Pikachoose/Fancybox Integracja - strzałki nawigacyjne na ulubionych

Question

Używam fancybox integrację z Pikachoose jak wyjaśniono tutaj: http://www.pikachoose.com/how-to-fancybox/

Próbuję uzyskać lightbox do wyświetlania kolejnych i poprzednich strzały, ale nie na etap pikachu i mam trochę problemów. Próbowałem dodać opcje showNavArrows: true w sekcji fancybox skryptu, ale nie zadziałałoby. Tak więc wypróbowałem opcje nav na pikachoose, aby wyświetlić przy użyciu this: {text: {previous: "Previous", next: "Next" }} , ale ciągle dostaję błąd, być może moja składnia nie idzie we właściwym miejscu? Czy ktoś może pomóc?

jest to kod używam:

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

Problem z metodą wyjaśnione http://www.pikachoose.com/how-to-fancybox/ jest to, że wiążą fancybox do bieżącego pikachoose elementu self.anchor.

z tym podejściem, nie ma sposobu, aby wiedzieć, co grupa obrazów będzie należeć do galerii fancybox (będzie trzeba więcej niż jeden element w obrębie tego samego atrybutu rel), ponieważ istnieje tylko jeden pikachoose obraz: każdy Obraz jest wyświetlany dynamicznie zmieniając odpowiednio jego atrybuty (href i src (<a> i <img>) wewnątrz kontenera .pika-stage.

Jako obejście, trzeba by zbudowany grupy fancybox elementów PRZED wiążący swoją strukturę HTML na pikachoose (pikachoose będzie modyfikować strukturę DOM)

1). Tak więc mając tę ​​strukturę 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). Utwórz grupę elementów fancyboksa, które przechodzą przez każdą kotwicę za pomocą tego skryptu:

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). Następnie przytwierdź pikaczoose do tego samego selektora #pikame. Można użyć metody .end() to zrobić w ciągu pierwszego spowolnił selektora nie powielając go;)

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 

Zawiadomienie że użyliśmy pikachoose opcję buildFinished: fancy, która faktycznie będzie ogień galerii fancybox gdy klikamy na wielki obraz.

4). Oto funkcja:

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 
    } 

Wskazówka że związany zdarzenie click korzystając .on() (wymaga jQuery v1.7 +) do pikachoose elementu self.anchor ognia fancybox galerię stosując metodę ręcznego $.fancybox([group]).

To obejście działa równie dobrze w przypadku wersji fancybox v1.3.4 lub v2.x.Zobacz DEMO użyciu v1.3.4, który wydaje się działać prawidłowo nawet z IE7;)

Answer 2

odpowiedź JFK jest super, ale jest coś do poprawienia:

jeśli karuzela jest włączony Pikachoose, indeks obliczany za pomocą tego metoda daje nieprawidłowy jeden, beacause pikachoose będzie manipulować DOM przez dołączenie istniejących li w ul:

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

rozwiązanie:

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