Pikachoose/Fancybox Integration - Navigationspfeile auf dem Leuchtkasten

Question

ich die Fancybox Integration mit Pikachoose mit wie hier erklärt: http://www.pikachoose.com/how-to-fancybox/

Ich versuche, um die Leuchtkasten zu bekommen nächste und vorherige Pfeile angezeigt werden, aber nicht auf der Pikachoose Bühne und ich habe ein bisschen Ärger. Ich habe versucht, die Optionen von showNavArrows: true im fancybox Abschnitt des Skripts hinzuzufügen, aber es würde nicht funktionieren. Also dann habe ich versucht, die Nav-Optionen auf Pikachoose mit this: {text: {previous: "Previous", next: "Next" }} anzuzeigen, aber ich bekomme immer einen Fehler, möglicherweise meine Syntax nicht an der richtigen Stelle? Kann jemand bitte helfen?

Dies ist der Code Ich verwende:

$(document).ready(function() { 
    var a = function (self) { 
     self.anchor.fancybox({ 
      transitionIn: elastic, 
      transitionOut: elastic, 
      speedIn: 600, 
      speedOut: 200, 
      overlayShow: false 
     }); 
    }; 
    $("#pikame").PikaChoose({ 
     showCaption: false, 
     buildFinished: a, 
     autoPlay: false, 
     transition: [0], 
     speed: 500, 
     showCaption: false 
    }); 
}); 

Answer 1

Das Problem mit dem Verfahren in http://www.pikachoose.com/how-to-fancybox/ erklärt ist, dass Sie fancybox den aktuellen pikachoose Element self.anchor binden.

Mit diesem Ansatz gibt es keine Möglichkeit zu wissen, was eine Gruppe von Bildern zu einer fancybox Galerie gehören wird (Sie würden das gleiche rel Attribut teilt mehr als ein Element benötigen), weil es nur ein einziges pikachoose Bild ist: jeder Bild wird dynamisch zwischen den Attributen href und src (<a> und <img> Tags) innerhalb des Containers angezeigt.

Als Abhilfe können Sie müßten gebaut auf der fancybox Gruppe von Elementen VOR Bindung Ihre HTML-Struktur zu pikachoose

1) (pikachoose die DOM-Struktur ändern). So mit dieser HTML-Struktur:

<div class="pikachoose"> 
    <ul id="pikame"> 
     <li> 
      <a title="one" href="image01.jpg" id="single_1"><img alt="" src="thumb01.jpg" /></a> 
     </li> 
     <li> 
      <a title="two" href="image02.jpg" id="single_2"><img alt="" src="thumb02.jpg" /></a> 
     </li> 
     <li> 
      <a title="three" href="image03.jpg" id="single_3"><img alt="" src="thumb03.jpg" /></a> 
     </li> 
    </ul> 
</div> 

2). Erstellen Sie die fancybox-Gruppe von Elementen, die mit diesem Skript durch jeden Anker iterieren:

3). Dann binden Sie pikachoose an den gleichen Selektor #pikame. Sie können die .end() Methode verwenden, es über die ersten abgebremst Wähler zu tun, ohne es zu duplizieren;)

var fancyGallery = []; // fancybox gallery group 
$(document).ready(function() { 
    // build fancybox group 
    $("#pikame").find("a").each(function(i){ 
     // buidl fancybox gallery 
     fancyGallery[i] = {"href" : this.href, "title" : this.title}; 
    }).end().PikaChoose({ 
     autoPlay : false, // optional 
     // bind fancybox to big images element after pikachoose is built 
     buildFinished: fancy 
    }); // PikaChoose 
}); // ready 

Hinweis, dass wir die pikachoose Option buildFinished: fancy, die tatsächlich die fancybox Galerie feuern, wenn wir klicken auf das große Bild.

4). Hier ist die Funktion:

var fancy = function (self) { 
    // bind click event to big image 
    self.anchor.on("click", function(e){ 
     // find index of corresponding thumbnail 
     var pikaindex = $("#pikame").find("li.active").index(); 
     // open fancybox gallery starting from corresponding index 
     $.fancybox(fancyGallery,{ 
     // fancybox options 
     "cyclic": true, // optional for fancybox v1.3.4 ONLY, use "loop" for v2.x 
     "index": pikaindex // start with the corresponding thumb index 
     }); 
     return false; // prevent default and stop propagation 
    }); // on click 
    } 

Hinweis, die wir verpflichten, ein click Ereignis mit .on() (erfordert jQuery v1.7 +) an das pikachoose Element self.anchor abzufeuern fancybox Galerie $.fancybox([group]) die manuelle Methode.

Diese Problemumgehung funktioniert genauso gut für fancybox v1.3.4 oder v2.x.Siehe DEMO v1.3.4 verwenden, die mit IE7 feinen selbst scheinen zu funktionieren;)

Answer 2

JFK Antwort ist groß, aber es ist etwas zu korrigieren:

wenn Karussell in Pikachoose aktiviert ist, der berechnete Index dies mit Methode erhalten Sie eine ungültige geben, beacause pikachoose DOM manipulieren wird von ul bestehenden li in anhängt:

var pikaindex = $("#pikame").find("li.active").index(); 

Lösung:

function getCurrentIndex(fancyGallery) { 
    var activeLi = $(""#pikame").find("li.active"); 
    if (activeLi.length != 1) { 
     console.error('(getCurrentIndex) - only one image must have an active class set by Pikachoose'); 
     return -1; 
    } 

    var activeLiHtml0 = activeLi[0]; 
    var activeHref  = $(activeLiHtml0).find('img').attr('src');     // do not look for <a> tags, PikaChoose will remove them 
    if (activeHref === null || activeHref.length == 0) { 
     console.error('(getCurrentIndex) - can not get href attribute from selected image'); 
     return -1; 
    } 

    for (var i=0 ; i<fancyGallery.length ;i++) { 
     var obj = fancyGallery[i]; 
     if (obj.href.indexOf(activeHref) >= 0){ 
      console.debug('(getCurrentIndex) - found index: ' + i); 
      return i; 
     } 
    } 

    console.error('(getCurrentIndex) - this href: <' + activeHref + '> was not found in configured table'); 
    return -1; 
};