Pikachoose/Fancybox Integration - navigation arrows on the lightbox

Question

I'm using the Fancybox integration with Pikachoose as explained here: http://www.pikachoose.com/how-to-fancybox/

I'm trying to get the lightbox to display next and previous arrows but not on the pikachoose stage and I'm having a bit of trouble. I tried to add the options of showNavArrows: true in the fancybox section of the script but it wouldn't work. So then I tried the nav options on pikachoose to display using this: {text: {previous: "Previous", next: "Next" }} but I keep getting an error, possibly my syntax isn't going in the right place? Can someone help please?

this is the code I'm using :

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

The problem with the method explained in http://www.pikachoose.com/how-to-fancybox/ is that you bind fancybox to the current pikachoose element self.anchor.

With that approach, there is no way to know what group of images will belong to a fancybox gallery (you would need more than one element sharing the same rel attribute) because there is just a single pikachoose image : every image is displayed toggling dynamically its href and src attributes (<a> and <img> tags respectively) inside the .pika-stage container.

As a workaround, you would need to built the fancybox group of elements BEFORE binding your html structure to pikachoose (pikachoose will modify the DOM structure)

1). So having this html structure :

 <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). Create the fancybox group of elements iterating through each anchor with this 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). Then bind pikachoose to the same selector #pikame. You can use the .end() method to do it over the first decelerated selector without duplicating it ;)

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

Notice that we used the pikachoose option buildFinished: fancy, which actually will fire the fancybox gallery when we click on the big image.

4). Here is the function :

  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
  }

Notice that we bound a click event using .on() (requires jQuery v1.7+) to the pikachoose element self.anchor to fire fancybox gallery using the manual method $.fancybox([group]).

This workaround works equally fine for fancybox v1.3.4 or v2.x. See DEMO using v1.3.4 that seems to work fine even with IE7 ;)

Answer 2

JFK response is great, but there is something to correct :

if carousel is enabled in Pikachoose, the computed index using this method will give you an invalid one, beacause pikachoose will manipulate DOM by appending existing li in ul:

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

Solution :

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