Pikachoose/Fancybox Integrazione - frecce di navigazione sul lightbox

Question

Sto utilizzando l'integrazione con Fancybox Pikachoose come spiegato qui: http://www.pikachoose.com/how-to-fancybox/

Sto cercando di ottenere il lightbox per visualizzare le frecce Avanti e Indietro, ma non sulla fase di pikachoose e sto avendo un po 'di problemi. Ho provato ad aggiungere le opzioni di showNavArrows: true nella sezione fancybox dello script ma non funzionerebbe. Allora, ho provato le opzioni di navigazione su pikachoose da visualizzare usando this: {text: {previous: "Previous", next: "Next" }} ma continuo a ricevere un errore, forse la mia sintassi non sta andando nel posto giusto? Qualcuno può aiutare per favore?

Questo è il codice che sto utilizzando:

$(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

Il problema con il metodo spiegato in http://www.pikachoose.com/how-to-fancybox/ è che si associa fancybox alla corrente pikachoose elemento self.anchor.

Con questo approccio, non c'è modo di sapere quale gruppo di immagini apparterrà ad una galleria fancybox (si avrebbe bisogno di più di un elemento condividono lo stesso attributo rel) perché non v'è solo una singola immagine pikachoose: ogni l'immagine viene visualizzata alternando dinamicamente gli attributi href e src (rispettivamente <a> e <img>) all'interno del contenitore .pika-stage.

Per risolvere il problema, si avrebbe bisogno di costruire il gruppo fancybox di elementi PRIMA vincolante la struttura html pikachoose (pikachoose modificherà la struttura DOM)

1). Quindi avendo questa struttura html:

<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). Crea il gruppo fancybox di elementi che iterano su ogni ancora con questo script:

var fancyGallery = []; // fancybox gallery group 
$(document).ready(function() { 

    $("#pikame").find("a").each(function(i){ 
    // buidl fancybox gallery group 
    fancyGallery[i] = {"href" : this.href, "title" : this.title}; 
    }); 

}); // ready 

3). Quindi legare pikachoose allo stesso selettore #pikame. È possibile utilizzare il metodo .end() per farlo il primo selettore decelerato senza duplicarlo;)

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 

Avviso che abbiamo usato il pikachoose opzione buildFinished: fancy, che in realtà sarà il fuoco della galleria fancybox quando si clicca su la grande immagine.

4). Ecco la funzione:

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 
    } 

Avviso che siamo vincolati un evento click utilizzando .on() (richiede jQuery v1.7 +) al pikachoose elemento self.anchor al fuoco fancybox galleria con il metodo manuale $.fancybox([group]).

Questa soluzione funziona altrettanto bene per fancybox v1.3.4 o v2.x.Vedere DEMO utilizzando v1.3.4 che sembra funzionare bene anche con IE7;)

Answer 2

risposta JFK è grande, ma c'è qualcosa da correggere:

se giostra è attivato in Pikachoose, l'indice calcolato utilizzando questo metodo vi darà un uno valido, beacause pikachoose sarà manipolare DOM aggiungendo esistenti li in ul:

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

Soluzione:

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; 
};