The problem with the method described at http://www.pikachoose.com/how-to-fancybox/ is that you bind fancybox to the current pikachoose self.anchor element.
With this approach, there is no way to find out which group of images will belong to the fancybox gallery (you will need more than one element sharing the same rel attribute), because there is only one pikachoose image: each image dynamically displays its href and src attributes ( <a> and <img> respectively) inside the .pika-stage container.
As a workaround, you will need to create a fancybox BEF group of elements linking your html structure to pikachoose (pikachoose will change the DOM structure)
one). 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 a group of fancybox elements, iterating through each anchor using 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 #pikame selector. You can use the .end() method to do this on the first slow 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
Note that we used the pikachoose buildFinished: fancy option, which will actually launch the fancybox gallery when we click on the large 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 }
Note that we linked the click event using the .on() (jQuery v1.7 + required) element of pikachoose self.anchor to launch the fancybox gallery using the manual $.fancybox([group]) method.
This workaround works equally well for fancybox v1.3.4 or v2.x. See DEMO using v1.3.4, which seems to work just fine even with IE7;)