Hilfe bei Anpassung Suchstring

  • Hallo Forum,


    da ich mich mit JavaScript null auskenne, brauche ich mal eure Hilfe beim anpassen von 2 JS Funktionen.


    Hintergrund:

    Ich setze auf einer Homepage eine Fotogalerie mit der Lightbox-Variante "MediaboxAdvanced" ein.

    Es funktioniert auch alles soweit.


    Mein einziges Problem ist, dass der Code nicht HTML5 valid ist.

    Das liegt daran, dass die Lightbox über "rel=lightbox" angesprochen wird. Also z.B. <a href="bild.jpg" rel="lightbox">.

    Und lightbox ist halt in HTML5 kein definiertes Keyword für das rel Attribut.


    Um das Problem zu lösen, habe ich irgendwo gelesen, dass man die Lightbox einfach mit z.B. <a href="bild.jpg" data-rel="lightbox"> aufrufen soll.

    Damit das funktioniert, muss man natürlich auch den JavaScript Teil abändern, so dass nach "data-rel=lightbox" anstatt "rel=lightbox" gesucht wird.

    Wie ich hier gelesen hab, müsste man in der mediaboxAdv-1.3.4b.js wohl diese 2 Funktionen ändern:


    Code
    1. linkMapper = linkMapper || function(el) {
    2. elrel = el.rel.split(/[\[\]]/);
    3. elrel = elrel[1];
    4. return [el.href, el.title, elrel];
    5. };
    Code
    1. Mediabox.scanPage = function() {
    2. var links = $$("a").filter(function(el) {
    3. return el.rel && el.rel.test(/^lightbox/i);
    4. });
    5. $$(links).mediabox({/* Put custom options here */}, null, function(el) {
    6. var rel0 = this.rel.replace(/[[]|]/gi," ");
    7. var relsize = rel0.split(" ");
    8. return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
    9. });
    10. };

    Was muss ich ändern, damit der HTML-Code <a href="bild.jpg" data-rel="lightbox"> wieder die Lightbox triggert?

  • Hi Amon,


    zum ändern des Zugriffs von rel zu data-rel kann ich JS das data access object genutzt werden.


    Aktuell wird das rel attribute angesprochen: https://www.w3schools.com/jsref/prop_anchor_rel.asp

    z.B. das e.rel oder this.rel in den beiden snippets oben. Um nun von rel auf data-rel zu kommen kannst du das verwenden:

    https://developer.mozilla.org/…Howto/Use_data_attributes

    D.h. du müsstest das "rel" durch dataset.rel ändern (wovon es oben einige gibt)


    (Ist ungetestet, aber sollte nach meinem verständniss funktionieren)


    Grüße


    Timo