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

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

Oliver77

Oliver77

Aktives Mitglied
Hi, ich möchte eine Galerie anlegen, wobei jedes Bild eine eigene URL bekommt (Links Bild, rechts Text), nun sollen zwei Pfeile verlinkt sein zum Blättern durch die Galerie.
Das ist mir aber zu umständlich, das manuell zu machen. Und hatte die Idee mit jQuery load die
Übersichtsseite mit allen Bildern in ein ausgeblendetes Div zu laden und mit einer Schleife ein Array mit allen Bildlinks zu füllen, dann über ein Script die Pfeile so verlinken, dass dann die nächste oder vorige URL zu laden möglich ist, Ich habe das hier gefunden:
Javascript: 
$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});
Kann ich nachdem die Seite geladen ist über Javascript/jQuery darauf zugreifen, und die Verlinkungen rausfischen, oder ist mein Ansatz zu umständlich und es gibt bessere Möglichkeiten?
Schon mal Danke für Feedback.
 
Werbung:
Hmm mir ist grad eingefallen, dass ich in einem Sessionstorage die URL`s abspeichern könnte!
 
Irgend wie verstehe ich nicht richtig, was Du da vor hast. Möchtest Du erreichen, dass jedes Bild in der Galerie über eine eigene URL zu erreichen ist und z. B. als Lesezeichen gespeichert werden kann? Wenn es nur um eine Galerie mit Pfeilen zum Blättern geht, gibt es doch genug vorgefertigte Skripts.
 
Werbung:
Also ich habe ja ne Übersichtsseite mit allen Bildern, wenn ich auf ein Bild gehe öffnet sich eine neue Seite da sind zwei Pfeile mit Verlinkung zur nächsten Seite oder vorherigen, diese Links möchte ich nicht von Hand setzen.
 
Wenn Du eine Lightbox wie Fancybox benutzt, werden die Pfeile mit den richtigen Verweisen automatisch angelegt.
Oder, Du generierst die Galerie mit den Bildern mit PHP automatisch, dann sollte es kein Problem sein, auch die Links zu generieren?
 
Hallo ich habe die Galerieübersichtsseite in ein div geladen und die Links rausgefischt
Javascript: 
    if ($(".g-pic").length > 0) {
        $("#load-html").hide();
        $("#load-html").load(loadFrom + " .entry-content", function () {
            $(".arrow-left,.arrow-right").show();
            links = [];
            $("#load-html .gallery a").each(function (index) {
                links.push($(this).attr("href"));

            });
            console.log(links)
            let urlIndex;
            let prev;
            let next;
            $("#load-html").remove();
            const currentUrl = window.location.href;
            for (i = 0; i < links.length; i++) {
                if (currentUrl == links[i]) {
                    urlIndex = i;
                }
            }
            prev = urlIndex - 1;
            if (prev == -1) {
                prev = links.length - 1
            }
            next = urlIndex + 1;
            if (next > links.length - 1) {
                next = 0;

            }
            $(".arrow-left").wrap('<a href="' + links[prev] + '" </a>');
            $(".arrow-right").wrap('<a href="' + links[next] + '" </a>');
        });
    }
Geht, aber die Verlinkungen lassen eine Weile auf sich warten, da ich ne Seite nachlade, gibt es eine Möglichkeit den HTML-Source-Code zu laden, anstatt die gesamte Seite inklusive Bilder, dann könnte ich mit Regex die Links auslesen.
 
Werbung:
die Verlinkungen lassen eine Weile auf sich warten, da ich ne Seite nachlade, gibt es eine Möglichkeit den HTML-Source-Code zu laden, anstatt die gesamte Seite inklusive Bilder, dann könnte ich mit Regex die Links auslesen.
Zum Vergrößern anklicken....
Nach allem was ich über Ajax weiß, ob es nun das load von jQuery oder fetch ist, wird dabei nur der HTML-Text geladen (in deinem Fall) und nicht die Bilder. Der Browser parst dann das HTML und lädt die Bilder sofern welche drin sind. Wenn das Laden bei dir lange dauert, muss das eine andere Ursache haben.

Außerdem sehe ich nicht, warum es für das Erzeugen der Links nötig ist, das HTML mit Ajax nachzuladen.

Und das ganze Verfahren kommt mir zu kompliziert vor. Wie schon geschrieben: Irgend wo muss die Galerie ja her kommen und da würde ich erwarten, dass man gleich beim Erzeugen der Galerie die Links fertig vorbereitet. Oder gibt es da andere Gesichtspunkte, die das ausschließen?
 
Also es ist eine Wordpressseite und die Bilder sind einzelne Seiten mit Bild und Text,
auf der Übersichtsseite sind sie dann verlinkt.

Ich wollte mir die Arbeit ersparen die Links für die Pfeile händisch einzubauen. Es ist keine Galerie mit einem Plugin oder so.

Kann man HTML als String laden?
 
Kann man HTML als String laden?
Zum Vergrößern anklicken....
Wie oben schon geschrieben tut das load von jQuery nichts anderes. Du kannst es ja überprüfen indem Du im Netzwerk-Tab deiner Entwicklerwerkzeugen nachsiehst.
Kannst Du die URL posten?
Aber ich denke, jetzt verstehe ich erst das ganze Verfahren: In der Übersichtsseite wird immer nur eine Seite mit Bild und Text angezeigt. Und die URLs der Links, die jeweils aktiv sind, musst Du dynamisch für die jeweilige Seite passend erzeugen, richtig?
 
Werbung:
Das zuckt stark beim Blättern, erst wird ein kleineres Bild angezeigt und dann in voller Größe. Ist das das Problem, was Du meinst?
 
Nein die Pfeile kommen verspätet, es zuckt ja, weil ich Javascript zum Responsive-Verhalten genutzt habe. Asche auf mein Haupt.
 
Werbung:
Seufz, eine Inflation von Divs, wie es bei Wordpress so üblich ist. Ich werde eine Weile brauchen, bis ich da durch steige.
 
Ich denke, jetzt verstehe ich das Ganze. Die Übersichtsseite braucht 400 - 500 ms zum Laden, nur der Text. Dadurch kommt die kurze Verzögerung zu Stande bis die Pfeile angezeigt werden. Und ich fürchte, an dieser Verzögerung führt auch kein Weg dran vorbei, wenn Du bei deinem Verfahren bleibst.

Du trägst das geladene HTML in einen unsichtbaren Container ein, damit es geparst wird und Du an die URLs heran kommst. Das ist ungünstig weil der Browser dann auch die Bilder lädt. Umgehen kannst Du das, indem Du, z. B. mit $.get, den Text lädst, ohne ihn in einen Container einzutragen und dann mit DOMParser parst:
developer.mozilla.org

DOMParser - Web APIs | MDN

The DOMParser interface provides the ability to parse XML or HTML source code from a string into a DOM Document.
developer.mozilla.org developer.mozilla.org

Ich würde aber überlegen, das Ganze nicht beim Laden der Seiten zu machen, sondern, wenn die Übersicht erstellt wird, eine JS- oder JSON-Datei automatisch erzeugen, die dann wesentlich kompakter ist.

Natürlich kannst Du für das Array mit den URLs auch einen Cache im Sessionstorage führen, wäre aber IMO unnötig kompliziert.
 
So habe mal folgendes probiert:
Javascript: 
if ($(".g-pic").length > 0) {
  
        $.ajax({
            method: 'GET',
            dataType: 'text',
            url: loadFrom,
        }).catch(function (jqXHR) {
            return jqXHR.responseText;
        }).then(function (data) {
            const stringHtml = data;
            const reg = /\<img\s.*?\>/g;
            const newStr = stringHtml.replace(reg, "<div></div>");

            const html = $.parseHTML(newStr);

            $("#load-html").html(html);
            $("#load-html").hide();

            $(".arrow-left,.arrow-right").show();
            const links = [];


            $("#load-html .gallery a").each(function (index) {
                links.push($(this).attr("href"));

            });
            $("#load-html").remove();
            const currentUrl = window.location.href;
            for (i = 0; i < links.length; i++) {
                if (currentUrl == links[i]) {
                    urlIndex = i;
                }
            }
            var prev = urlIndex - 1;
            if (prev == -1) {
                prev = links.length - 1
            }
            var next = urlIndex + 1;
            if (next > links.length - 1) {
                next = 0;

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

        });
    }
Ich habe den HTML-String und schmeiße die img's raus...
Es lädt noch nen bissel nach, JSON klingt erstmal gut nur wie implementiere ich es in Wordpress?
 
Zuletzt bearbeitet:
Werbung:
Ganz einfach, Du hast ja dein Array links, das kannst Du mit JSON.stringify in einen JSON-String umwandeln. Den trägst Du in das Sessionstorage ein und später, wenn Du es ausliest, wandelst Du es wieder mit JSON.parse in ein Array um und kannst sofort damit arbeiten.

Mit deinem Code oben verhinderst Du zwar das Laden der Bilder aber auf diese Weise ist das sehr kompliziert. Einfach das HTML in eine Variable parsen, dann gelangt es gar nicht erst in das DOM und es werden keine Bilder geladen. Mal ins Unreine geschrieben:
Code: 
$.ajax({
            method: 'GET',
            dataType: 'text',
            url: loadFrom,
        }).catch(function (jqXHR) {
            return jqXHR.responseText;
        }).then(function (htmlText) {
            const 
                parser = new DOMParser(),
                doc = parser.parseFromString(htmlText, "text/html");

            $(".arrow-left,.arrow-right").show();

            let links = [];
            doc.querySelectorAll('.gallery a').forEach(link => {
                links.push(link.href);
            });
            const currentUrl = window.location.href;
            // usw. wie bisher
 
Ah supi funktioniert, sehe zwar keine Änderung der Ladezeit, aber so ist es schlüssiger, mit SessionStorage habe ich in Gedanken schon gespielt, aber was ist wenn man die einzelne Bildseite ohne den Umweg über die Übersichtsseite öffnet?
 
aber was ist wenn man die einzelne Bildseite ohne den Umweg über die Übersichtsseite öffnet?
Zum Vergrößern anklicken....
Daran habe ich auch schon gedacht. Einfach auf der Bildseite prüfen, ob die Links schon im Cache bzw. Sessionstorage sind. Wenn ja, sie von dort verwenden, wenn nicht, neu ermitteln. Benutzt man einen Cache auf dem Server, arbeitet man normaler Weise mit einer Verfallszeit: Ist der Cache jünger als diese Zeit: Daten aus dem Cache verwenden; andernfalls: Daten neu ermitteln. Aber in unserem Fall ist das nicht nötig.

BTW: Wenn ich mich richtig erinnere, kann man jQuery auch einen HTML-Text übergeben und er wird automatisch geparst:
Code: 
$.ajax({
            method: 'GET',
            dataType: 'text',
            url: loadFrom,
        }).catch(function (jqXHR) {
            return jqXHR.responseText;
        }).then(function (htmlText) {
            $(".arrow-left,.arrow-right").show();

            let links = [];
            $(htmlText).find('.gallery a').each(function (idx, link) {
                links.push($(link).attr('href'));
            });
            const currentUrl = window.location.href;
            // usw. wie bisher
"write less, do more"
 
Zuletzt bearbeitet:
Werbung:
So Danke Sempervivum!
Der Vollständigkeit halber der gesamte Code:
Javascript: 
(function ($) {

    if ($(".g-pic").length > 0 && sessionStorage.getItem("gallery") == null) {

        $.ajax({
            method: 'GET',
            dataType: 'text',
            url: loadFrom,
        }).catch(function (jqXHR) {
            return jqXHR.responseText;
        }).then(function (htmlText) {
            const links = [];
            $(htmlText).find('.gallery a').each(function (idx, link) {
                links.push($(link).attr('href'));
            });

            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) {

        $(".arrow-left,.arrow-right").show();
        if (JSON.parse(sessionStorage.getItem("gallery") != null)) {
            var pLinks = JSON.parse(sessionStorage.getItem("gallery"));
        } else {
            pLinks = links;
        }
        var urlIndex;
        var currentUrl = window.location.href;
        for (i = 0; i < pLinks.length; i++) {
            if (currentUrl == pLinks[i]) {
                urlIndex = i;
            }
        }
        var prev = urlIndex - 1;
        if (prev == -1) {
            prev = pLinks.length - 1;
        }
        var next = urlIndex + 1;
        if (next > pLinks.length - 1) {
            next = 0;

        }
        $(".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);
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben