• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] Links von einer Übersichtsseite sammeln (Galerie)

Funktioniert zwar offenbar aber ich finde es wieder ein wenig kompliziert, vor allem weil das Handling mit dem Localstorage so verstreut ist. Ich hatte mir das mehr so vorgestellt:
Code: 
        (function ($) {
            if ($(".g-pic").length > 0) {
                let links = [];
                if (!sessionStorage.getItem("gallery")) {
                    // Die Links sind noch nicht im Sessionstorage,
                    // wir müssen sie zunächst ermitteln:
                    $.ajax({
                        method: 'GET',
                        dataType: 'text',
                        url: loadFrom,
                    }).catch(function (jqXHR) {
                        return jqXHR.responseText;
                    }).then(function (htmlText) {
                        $(htmlText).find('.gallery a').each(function (idx, link) {
                            links.push($(link).attr('href'));
                        });
                        // Jetzt ist das Array mit den Links fertig
                        // und wir tragen es im Sessionstorage ein:
                       sessionStorage.setItem('gallery', JSON.stringify(links);
                    });
                } else {
                    // Die Links sind schon im Sessionstorage,
                    // wir brauchen sie nur von dort auszulesen:
                    links = JSON.parse(sessionStorage.getItem('gallery'));
                }
                // Jetzt steht das Array mit den Links zur Verfügung
                // und wir können sie in das HTML eintragen:
                setPrevNext(links);
            }
            // Hier weiter wie bisher.
            // ...
        })(jQuery);
 
Zuletzt bearbeitet:
Hi ah ok ist bissel aufgeräumter bei deinem Script, leider habe ich nen Fehler drin, ich,weiß nicht warum es nicht mehr geht :(
Javascript: 
(function ($) {
 if ($(".g-pic").length > 0) {
                let links = [];
                if (!sessionStorage.getItem("gallery")) {
                    // Die Links sind noch nicht im Sessionstorage,
                    // wir müssen sie zunächst ermitteln:
                    $.ajax({
                        method: 'GET',
                        dataType: 'text',
                        url: loadFrom,
                    }).catch(function (jqXHR) {
                        return jqXHR.responseText;
                    }).then(function (htmlText) {
                        $(htmlText).find('.gallery a').each(function (idx, link) {
                            links.push($(link).attr('href'));
                        });
                        // Jetzt ist das Array mit den Links fertig
                        // und wir tragen es im Sessionstorage ein:
                       sessionStorage.setItem('gallery', JSON.stringify(links));
                    });
                } else {
                    // Die Links sind schon im Sessionstorage,
                    // wir brauchen sie nur von dort auszulesen:
                    links =  JSON.parse(sessionStorage.getItem('gallery'));
                    
                    console.log(links)
                }
                // Jetzt steht das Array mit den Links zur Verfügung
                // und wir können sie in das HTML eintragen:
    
                setPrevNext(links);
            }

    const paddingArrows = 80;
    const textDefaultPadding = $(".g-text").css("padding");
    function resizePic() {
        $(".g-pic").css("height", "").css("width", "");
        $(".g-pic").parents(".panel-grid-cell").css("width", "");
        $(".g-pic-wrap").css("flex-direction", "");

        var nw = $(".g-pic img").get(0).naturalWidth;
        var nh = $(".g-pic img").get(0).naturalHeight;
        $(".g-pic img").css("width", "100%");
        $(".g-pic").css("aspect-ratio", nw + "/" + nh).css("height", $(window).height());
        $(".g-pic").parents(".panel-grid-cell").css("width", $(window).height() * nw / nh - 15);
        $(".g-text").parents(".panel-grid-cell").css("width", $(window).outerWidth() - $(".g-pic img").outerWidth() - 15);
        $(".g-pic-wrap").css("padding-left", paddingArrows).css("padding-right", paddingArrows);

        if (!$(".arrow-left").length) {
            $(".g-pic-wrap").append('<div class="arrow-left"></div><div class="arrow-right"></div>');

            if (sessionStorage.getItem("gallery") != null) {
                setPrevNext("");
            }
        }

        if ($(window).width() < 1450) {
            $(".g-pic").css("height", "");
            $(".g-pic-wrap").css("flex-direction", "column");
            $(".g-pic").parents(".panel-grid-cell").css("width", "100%");


            $(".g-text").parents(".panel-grid-cell").css("width", "100%");
            $(".g-text").css("width", "100%").css("padding", "0px");
        } else {
            $(".g-text").css("width", $(window).outerWidth() - $(".g-pic").outerWidth() - 15 - paddingArrows);
            $(".g-text").css("width", "100%").css("padding", textDefaultPadding);
        }

    }

    if ($(".g-pic").length > 0) {
        const gPicSrc = $(".g-pic img").attr("src");
        const gImg = new Image();
        gImg.src = gPicSrc;
        $(gImg).on("load", function () {
            resizePic();
        });
    }
    $(".gallery a").click(function () {
        const aLinks = [];
        $(".gallery a").each(function (index) {
            aLinks.push($(this).attr("href"));
        });
        const myJSON = JSON.stringify(aLinks);
        sessionStorage.setItem("gallery", myJSON);
    });
    function setPrevNext(links) {
        
        console.log(links)

        $(".arrow-left,.arrow-right").show();
     pLinks = links;
        var urlIndex;
        var currentUrl = window.location.href;
        for (i = 0; i < pLinks.length; i++) {
            if (currentUrl == pLinks[i]) {
                urlIndex = i;
            }
        }
        console.log("url-index: "+urlIndex)
        var prev = urlIndex - 1;
        if (prev == -1) {
            prev = pLinks.length - 1;
        }
        var next = urlIndex + 1;
        if (next > pLinks.length - 1) {
            next = 0;

        }
        console.log(prev)
        $(".arrow-left").wrap('<a href="' + pLinks[prev] + '" </a>');
        $(".arrow-right").wrap('<a href="' + pLinks[next] + '" </a>');

    }
    $(window).resize(function () {
        if ($(".g-pic").length > 0) {
            resizePic();
        }
    });

})(jQuery);

Siehst du den Fehler?
https://mg-otterson.de/fileadmin/website7/retratos/
 
Im Debugger sehe ich, dass hier in Zeile 115 die Pfeile nicht vorhanden sind:
Code: 
        console.log(prev)
        $(".arrow-left").wrap('<a href="' + pLinks[prev] + '" </a>');
        $(".arrow-right").wrap('<a href="' + pLinks[next] + '" </a>');
Und ich sehe, dass diese in resizePic hinzu gefügt werden. Vermutlich muss diese Funktion vor dem Wrappen aufgerufen werden.
 
Die Funktion setPrevNext wird 2 Mal aufgerufen, beim ersten Mal nach dem Holen der Links und das zweite Mal durch die Funktion resizePic. Ich bin der Meinung, dass die Links nur ein Mal angelegt werden müssen.
 
Javascript: 
(function ($) {
 if ($(".g-pic").length > 0) {
                let links = [];
                if (!sessionStorage.getItem("gallery")) {
                    //alert("s")
                    // Die Links sind noch nicht im Sessionstorage,
                    // wir müssen sie zunächst ermitteln:
                    $.ajax({
                        method: 'GET',
                        dataType: 'text',
                        url: loadFrom,
                    }).catch(function (jqXHR) {
                        return jqXHR.responseText;
                    }).then(function (htmlText) {
                        $(htmlText).find('.gallery a').each(function (idx, link) {
                            links.push($(link).attr('href'));
                        });
                        // Jetzt ist das Array mit den Links fertig
                        // und wir tragen es im Sessionstorage ein:
                       sessionStorage.setItem('gallery', JSON.stringify(links));
                        setPrevNext(links);
                    });
                } else {
                    // Die Links sind schon im Sessionstorage,
                    // wir brauchen sie nur von dort auszulesen:
                    links =  JSON.parse(sessionStorage.getItem('gallery'));
                    setPrevNext(links);
                    console.log(links)
                }
                // Jetzt steht das Array mit den Links zur Verfügung
                // und wir können sie in das HTML eintragen:
    
                
            }

    const paddingArrows = 80;
    const textDefaultPadding = $(".g-text").css("padding");
    function resizePic() {
        $(".g-pic").css("height", "").css("width", "");
        $(".g-pic").parents(".panel-grid-cell").css("width", "");
        $(".g-pic-wrap").css("flex-direction", "");

        var nw = $(".g-pic img").get(0).naturalWidth;
        var nh = $(".g-pic img").get(0).naturalHeight;
        $(".g-pic img").css("width", "100%");
        $(".g-pic").css("aspect-ratio", nw + "/" + nh).css("height", $(window).height());
        $(".g-pic").parents(".panel-grid-cell").css("width", $(window).height() * nw / nh - 15);
        $(".g-text").parents(".panel-grid-cell").css("width", $(window).outerWidth() - $(".g-pic img").outerWidth() - 15);
        $(".g-pic-wrap").css("padding-left", paddingArrows).css("padding-right", paddingArrows);

    

        if ($(window).width() < 1450) {
            $(".g-pic").css("height", "");
            $(".g-pic-wrap").css("flex-direction", "column");
            $(".g-pic").parents(".panel-grid-cell").css("width", "100%");


            $(".g-text").parents(".panel-grid-cell").css("width", "100%");
            $(".g-text").css("width", "100%").css("padding", "0px");
        } else {
            $(".g-text").css("width", $(window).outerWidth() - $(".g-pic").outerWidth() - 15 - paddingArrows);
            $(".g-text").css("width", "100%").css("padding", textDefaultPadding);
        }

    }

    if ($(".g-pic").length > 0) {
        const gPicSrc = $(".g-pic img").attr("src");
        const gImg = new Image();
        gImg.src = gPicSrc;
        $(gImg).on("load", function () {
            resizePic();
        });
    }
    $(".gallery a").click(function () {
        const aLinks = [];
        $(".gallery a").each(function (index) {
            aLinks.push($(this).attr("href"));
        });
        const myJSON = JSON.stringify(aLinks);
        sessionStorage.setItem("gallery", myJSON);
    });
    function setPrevNext(links) {
           if (!$(".arrow-left").length) {
            $(".g-pic-wrap").append('<div class="arrow-left"></div><div class="arrow-right"></div>');

            if (sessionStorage.getItem("gallery") != null) {
                //setPrevNext("");
            }
        }
        console.log(links)

        $(".arrow-left,.arrow-right").show();
     pLinks = links;
        var urlIndex;
        var currentUrl = window.location.href;
        for (i = 0; i < pLinks.length; i++) {
            if (currentUrl == pLinks[i]) {
                urlIndex = i;
            }
        }
        console.log("url-index: "+urlIndex)
        var prev = urlIndex - 1;
        if (prev == -1) {
            prev = pLinks.length - 1;
        }
        var next = urlIndex + 1;
        if (next > pLinks.length - 1) {
            next = 0;

        }
        console.log(prev)
        $(".arrow-left").wrap('<a href="' + pLinks[prev] + '" </a>');
        $(".arrow-right").wrap('<a href="' + pLinks[next] + '" </a>');

    }
    $(window).resize(function () {
        if ($(".g-pic").length > 0) {
            resizePic();
        }
    });

})(jQuery);

Ich musste setPrevNext(links) zwei mal einfügen, weil das Get verzögert lädt, die Pfeil Erzeugung habe ich ich in die setPrevNext reingepackt, das Gute ist jetzt, dass die Pfeile nur einmal lange laden , super!
 
Stimmt, das GET arbeitet asynchron, das hätte mir auffallen müssen. Gut, dass das in der Funktion setPrevNext verpackt ist.
 
Danke Dir! Du bist der Beste!
Ne andere Frage, ich mag das Flackern nicht, jetzt habe ich im CSS body{
visibility:hidden;
}
gesetzt und im jQuery wieder sichtbar gemacht, ist das verkehrt bzw. nicht empfehlenswert?
 
Ich habe es mir nicht im Detail angesehen aber wenn Du das CSS mit Javascript einstellst, führt wahrscheinlich kein Weg dran vorbei, es so zu machen.

Diskussionswürdig ist eher die Frage, ob es angebracht ist, das überhaupt mit Javascript zu machen: Machst Du es nur mit CSS, kann der Browser frühzeitig alle Abmessungen berechnen und es kommt wahrscheinlich gar nicht erst zu einem Flackern. Du gibst ja die Maße der Bilder an, so dass auch das Seitenverhältnis bekannt ist.

Darüber hinaus gefällt mir das Layout so, wie es jetzt ist, nicht unbedingt: Ich würde es schöner finden wenn gleich alles kleiner angezeigt würde, so dass es ohne Scrollen sichtbar ist. Das Bild könntest Du bei Bedarf fensterfüllend anzeigen, ich habe das früher mal gemacht mit einem hübschen Explosionseffekt.
 
Zuletzt bearbeitet:
Du hast Recht, sowohl im Quer- als auch im Hochformat braucht man nicht zu scrollen. Nur wenn das Browserfenster annähernd 1:1 ist, muss man ein wenig vertikal scrollen, das war bei mir häufig der Fall wenn ich die Entwicklerwerkzeuge offen hatte. Kann man aber akzeptieren.
 
Hab noch ne Frage, der Layoutbuilder in Wordpress nutzt jQuery, um den Inhaltselementen 100% Breite zu geben, wenn man das einstellt.
Jetzt funktioniert mein Script nur, wenn es als letztes ausgeführt wird, es liegt vor dem </body> Tag

Wird ein Script im Header davor oder danach ausgeführt? (Also nach dem Footer).
Ich habe es mit SetTimeout gelöst, aber das ist nicht schön
Javascript: 
 $(gImg).on("load", function () {
            setTimeout(function () {
                resizePicLandscape();
            }, 10);
        });
 
Wenn Du das onload-Event benutzt, wie in dem Ausschnitt, den Du gepostet hast, sollte es eigentlich auch funktionieren, wenn Du es in den head-Bereich legst. 10ms für die Verzögerung sind ja minimal, man macht das aber manchmal, damit ein CSS, das man vorher gesetzt hat, wirksam wird für weitere Berechnungen.
 
So jetzt bin ich dazu gekommen das alles mit einem Mini-Backend und Datenbank zu lösen.
Hier ist die Anzeige von den Bildern
https://mg-otterson.de/fileadmin/we...t-martarranya/?gcat=retratos&gsubcat=frechits

Jetzt habe ich ein CSS-Problem, der vertikale Abstand ist nicht so hoch wie der horizontale, (bei den Bildern) jemand ne Idee woran das liegt?

P.S.: Die Seite wird sich noch ändern und der Link könnte in Zukunft tot sein!
 
Zuletzt bearbeitet:
So etwas habe ich noch nie gesehen: Du hast zwar ein einheitliches Padding aber im Seiteninspektor ist das untere deutlich kleiner als die anderen. Des Rätsels Lösung: Du hast sowohl dem Bild als auch dem umgebenden div.single-grid ein Seitenverhältnis von 4/3 zugewiesen. Das erfordert, dass die seitlichen Abstände größer sind als die vertikalen. Lösche ich das Seitenverhältnis für das div werden sie sofort gleich. Das kann man problemlos machen, denn das Seitenverhältnis soll ja für das Bild gelten.
Offenbar setzt sich das Seitenverhältnis gegenüber dem Padding durch.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben