Reorder fancybox Artikel in der Galerie

Question

Standardmäßig sieht es aus wie fancybox nimmt die Elemente in der Galerie in der Reihenfolge, in der sie im HTML hinzugefügt werden.

Gibt es eine andere Option, die durch Hinzufügen eines optionalen data- Attributs sie neu anordnet, wenn sie geöffnet werden, aber wenn sie auf der Seite angezeigt werden (nicht im Galerie-Popup), bleiben sie gleich?

Der Code sieht wie folgt aus:

<a class="fancybox" rel="gallery1" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg" title="Morning Godafoss (Brads5)"> 
    <img src="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_m.jpg" alt="" /> 
</a> 
<a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3691/10185053775_701272da37_b.jpg" title="Vertical - Special Edition! (cedarsphoto)"> 
    <img src="http://farm4.staticflickr.com/3691/10185053775_701272da37_m.jpg" alt="" /> 
</a> 
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_b.jpg" title="Racing against the Protons (tom.leuzi)"> 
    <img src="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_m.jpg" alt="" /> 
</a> 
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/291/18653638823_a86b58523c_b.jpg" title="Lupines (Kiddi Einars)"> 
    <img src="http://farm1.staticflickr.com/291/18653638823_a86b58523c_m.jpg" alt="" /> 
</a> 

und die JS:

$(".fancybox").fancybox(); 

JSFiddle

Wie der gleichen HTML-Code zu halten, aber sie im Popup in der öffnen folgende Reihenfolge: 3, 1, 4, 2 (zum Beispiel)?

Ich würde so etwas wie dies mag:

<a class="fancybox" rel="gallery1" data-fancybox-order="3" ... > 
<a class="fancybox" rel="gallery1" data-fancybox-order="1" ... > 
<a class="fancybox" rel="gallery1" data-fancybox-order="4" ... > 
<a class="fancybox" rel="gallery1" data-fancybox-order="2" ... > 

Wenn wir dann das zweite Bild (data-fancybox-order="1") im Popup öffnen, wird es keine vorherige Taste sein. Aber wenn wir weiter klicken, öffnet sich das vierte Bild. Wenn Sie dann erneut auf Weiter klicken, wird das erste Bild und dann das dritte Bild (data-fancybox-order="4") geöffnet. In diesem Moment wird die nächste Schaltfläche ausgeblendet.

Was ist der sauberste Weg, dies zu tun?

Answer 1

Leider fancybox bietet diese Option nicht an. Möglicherweise müssen Sie die fancybox-Galerie programmgesteuert in der gewünschten Reihenfolge erstellen und starten.

Zuerst müssen Sie jeden html Element ein data Attribut hinzufügen, um die Reihenfolge festzulegen, in der sie in der fancybox Galerie angezeigt werden, so etwas wie:

<a class="fancybox" href="image03.jpg" title="title 3" data-order="3">... 
<a class="fancybox" href="image01.jpg" title="title 1" data-order="1">... 
<a class="fancybox" href="image04.jpg" title="title 4" data-order="4">... 
<a class="fancybox" href="image02.jpg" title="title 2" data-order="2">... 

Beachten Sie, dass, da die Galerie Wird programmgesteuert erstellt, wird das rel Attribut irrelevant.

Zweitens statt der regulären fancybox Initialisierungsscript mit $(".fancybox").fancybox() Sie ein clickEreignis zu erstellen und starten Sie die fancybox Galerie binden müssen:

$(".fancybox").click(function(){ 
    // build fancybox gallery here 
    return false; // prevent event default and propagation 
}); 

Sobald wir eine der Thumbnails html klicken, wir werden wie folgt vorgehen:

• den Index des klickten Bildes erhalten (data-order Attribut)
• sammeln alle HTML-Elemente mit Klassefancybox (querySelectorAll())
• die fancybox Galerie von Elementen Array
• Iteration durch die html Elemente initialisiert und sie in die fancybox Galerie Array schieben
• sort die fancybox Array

Da die fancybox Galerie Objekt wird ein Array von Objekten sein, müssen wir eine Funktion s oder eine solche Anordnung durch eine ausgewählte Eigenschaft. Wir werden diese Funktion von this answer ausleihen:

// sort array of objects by a property 
var sortObjectsBy = function(field, reverse, primer) { 
    var key = primer ? function(x) { 
    return primer(x[field]) 
    } : function(x) { 
    return x[field] 
    }; 
    reverse = !reverse ? 1 : -1; 
    return function(a, b) { 
    return a = key(a), 
     b = key(b), 
     reverse * ((a > b) - (b > a)); 
    } 
} 

Dann werden wir alle Stücke zusammen, nachdem der click Veranstaltung:

$(".fancybox").on("click", function() { 
    // get the index of the clicked image 
    var thisIndex = this.dataset.order - 1; 
    // gather all html elements 
    var elements = document.querySelectorAll(".fancybox"); 
    // initialize fancybox gallery array 
    var fancyElements = []; 
    // push the html elements into fancybox gallery 
    for (var i = 0, elLength = elements.length; i < elLength; i++) { 
    fancyElements.push({ 
     href: elements[i].href, 
     title: elements[i].title + " - " + elements[i].dataset.order, 
     order: elements[i].dataset.order 
    }); 
    } 
    // sort the fancybox array of objects by the "order" property 
    fancyElements.sort(sortObjectsBy("order", false, function(a) { 
    return a; 
    })); 
    // launch fancybox programmatically 
    $.fancybox(fancyElements, { 
    helpers: { 
     title: { 
     type: "inside" 
     } 
    }, 
    // force index 
    index: thisIndex // start gallery from the clicked element 
    }) 
    return false; 
}); 

Bitte beachten Sie hinzufügen, was fancybox Optionen, um das Skript, wie ich mit tat der Titel Typ. Bitte beachten Sie auch, dass ich die order dem Titel zu Illustrationszwecken hinzugefügt habe, damit Sie überprüfen können, dass die Galerie in der Reihenfolge angezeigt wird, die durch das data-order Attribut festgelegt wird.

BTW, die order -Eigenschaft wird nicht von Fancybox benötigt, aber wir haben es verwendet, um nur das Array zu sortieren.

Siehe JSFIDDLE