Fancybox Integration

Looking to integrate fancybox with PikaChoose? It’s simpler than you think! This requires version 4.1.2 or greater of PikaChoose.

Getting Started

You should setup PikaChoose as you normally would, but also include the fancybox scripts in the head. So the head of your document might looks something like this:

<head>
   <script type="text/javascript" src="/assets/js/jquery.js"></script>
   <script type="text/javascript" src="/assets/js/jquery.pikachoose.js"></script>
   <script type="text/javascript" src="/assets/js/fancybox/jquery.fancybox-1.3.3.pack.js"></script> 
   <link rel="stylesheet" type="text/css" href="/assets/js/fancybox/jquery.fancybox-1.3.3.css" media="screen" />
</head>

Building your list

Now we can move onto integrating the two. Lets start by setting up our gallery with a series of images that are a medium size. Then we’ll use the auto linking in PikaChoose to link to the larger images for Fancybox. Take a look at the example below, our images are denoted with a _m for the medium size image and a _l for the large size image.

<ul id="pikame">
  <li><a href="/images/myimage1_l.jpg"><img src="/images/myimage1_m.jpg"></a></li>
  <li><a href="/images/myimage2_l.jpg"><img src="/images/myimage2_m.jpg"></a></li>
</ul>

API Hook

Still with me? That’s takes care of the setup, now we need to add in the api hook and get PikaChoose to recognize we want our main image to be a Fancybox link. We’re going to use an API hook to do this (it’s not as scary as it sounds!). Here’s a standard PikaChoose call that you’re probably already using

$(document).ready(function (){
   $("#pikame").PikaChoose();
});

All we’re going to do is define our API function before hand, assign Fancybox to the link created by Pikachoose, and enjoy! So now it should look like:

$(document).ready(function (){
   var a = function(self){
      self.anchor.fancybox();
   };
   $("#pikame").PikaChoose({buildFinished:a});
});

Example

Load it up and give it a try! Everything should work and you’ll now have large images linked off from your standard size slideshow! Leave a comment below of suggestions or questions.

  • Any html can be used in captions
  • A variety of options are available to style PikaChoose
  • Use custom images or let PikaChoose create thumbs for you.

30 Responses

  1. Adam:

    Do you know if there is ANY other selector other than ‘a img’ that can access the cursor-style of Pikachoose’s image window?

    February 17, 2012 at 6:05 pm
    Reply
  2. Adam:

    Have almost got my integration with Fancybox done and it is going great, but some of the pictures will not be using Fancybox and I have modified its script to return nothing in their cases (altered the script to eliminate the “file-missing” nonesense that would normally pop-up – the images that do use Fancybox will have a caption indicating so). The last issue is that Pikachoose still regards the empty link as a link and the cursor still changes to the hand when on one of them.

    Have set up a css element to maintain the default ‘pointer’ cursor on those pages, but when I add it to the anchor, it breaks the Fancybox script as soon as one of those images is reached. Is there a way to get Pikachoose to accept ‘a’ or ‘a.nodetail’ as both being valid in the href? I tried inserting a wildcard, but cannot get it to work properly. Here are two examples of the possible data to be passed.

    a href=”images/1_detail.jpg”

    or

    a.noDetail href=”#”

    February 15, 2012 at 6:13 am
    Reply
  3. Eddy:

    Can’t seem to get it to work on my site, I did everything you said :\ I have FB Version: 1.3.4 (2010/11/11) the one from their site that on the right hand side.

    February 7, 2012 at 7:44 pm
    Reply
  4. Carlo:

    How can I set the image size?

    January 29, 2012 at 6:01 pm
    Reply
  5. inJesusItrust:

    Thank you soooooooo much!!!!

    January 24, 2012 at 2:24 pm
    Reply
  6. sadaf:

    hello and thank you so much for sharing all this :)

    i have a situation here
    i need the user to dynamically enter its images so i cant just enter the img src in the code
    this is my code:

    <img src='’ />

    (the image s are entered in the behind code)
    as you see i only have one img tag
    is there a way i can connect my code with pikachoose?
    thank you so much

    January 16, 2012 at 9:11 am
    Reply
  7. Rifat Caner ANILTURK:

    Hi;

    I have a question. Can i embed youtube or any video player ?

    Thank you

    January 11, 2012 at 8:21 pm
    Reply
  8. Awais:

    Hi,
    Is it possible to use the whole image gallery on a modelpopup instead of clicking on image which pops up the image, I have got the anchor link as view image gallery, what i was looking for is when the client clicks on that link the pikachoose gallery should popup, is it possible to do something like this using your plugin

    January 11, 2012 at 12:14 pm
    Reply
  9. Soggymist:

    How can I get pikachoose to work with images of varying sizes?

    December 21, 2011 at 5:12 am
    Reply
  10. Charlie Trafton:

    I love your site. I found you through Bing. I will be returning to check out your newests posts. :)

    December 7, 2011 at 12:30 am
    Reply
  11. karol:

    hello :) thank you for your great work! everything works fantastic. But I’d like to use multiple images in my fancybox and i dont know how to modife the api hook. i try something like that:

    $(document).ready(function (){
    var a = function(self){
    self.anchor.fancybox({
    ‘transitionIn’ : ‘none’,
    ‘transitionOut’ : ‘none’,
    ‘titlePosition’ : ‘over’,
    ‘titleFormat’ : function(title, currentArray, currentIndex, currentOpts) {
    return ‘Image ‘ + (currentIndex + 1) + ‘ / ‘ + currentArray.length + (title.length ? ‘   ‘ + title : ”) + ”;
    }
    });
    };
    $(“#pikame”).PikaChoose({buildFinished:a});
    });

    where should i put the rel=… ?

    thanks, karol

    December 5, 2011 at 6:01 pm
    Reply
    • karol:

      hi jeremy, i really need your help, if its not possible with a[rel=example_group], please let me know :) i cant finde any solution…

      cheers, karol

      December 9, 2011 at 5:12 pm
      Reply
      • Jeremy:

        It’s a bit of a manual process but here’s the basics.
        The following code creates an array for a fancybox manual call with an ‘href’ and ‘title’ defined for each index value.
        1. Loop through each li tag to populate array
        - Store image location from anchor. Replace with “javascript:;”
        - Store caption from img alt attribute
        - Add incrementing i as title to access image location from array
        2. On PikaChoose image change, call updateImage function
        - Update current active image index
        - Apply clicktag to run showGallery and pass index
        - Executes a fancybox manual call at index value.

        var imgArr 		= [];
function setGallery()
{
    $("#pikame li").each(function(i)
    {
        var img 	= $(this).find('a').attr('href');
        var title 	= $(this).find('img').attr('alt');
        imgArr[i] 	= 	{
                            'href' 	: img,
                            'title'	: title
                        }
        $(this).find('a').attr("href", "javascript:;");
        $(this).find('img').attr("title", i);
    });
    //console.log(imgArr);
}
setGallery();

function showGallery(num)
{
    $.fancybox(imgArr,
    {
        'index'		: num,
        'titlePosition'	: 'inside',
        'type'		: 'image'
    });
}

function updateImage(self)
{
    var num	= self.active.attr("title");
    //console.log(num, imgArray);
    //self.caption.find("a").click(function(){showGallery(num)}); // Uncomment to activate popup on any links in caption
    self.anchor.click(function(){showGallery(num)});
}

$("#pikame").PikaChoose({autoPlay:true, animationFinished:updateImage});

        HTML Used:

        <div class="pika-wrap">
    <ul id="pikame" class="jcarousel-skin-pika">
        <li>
            <a href="images/myImg.jpg" rel="nofollow">
            <img src="images/myImgThumb.jpg" alt="Enter Popup Caption" />
            </a>
            <span>Enter normal Caption</span>
        </li>
    </ul>
</div>
        December 12, 2011 at 11:37 pm
        Reply
        • jon:

          Hi do you have a build that features this MultiImage for Fancy Box?

          Alternatively can you direct me as to where this Javascript should be placed; does it overwrite any existing code?
          Thanks in advance

          December 19, 2011 at 8:45 am
        • karol:

          Hi jeremy, at first thank you very very much for your time and help! :) your code works with multiple images but my problem is that i want to do groups like …rel=”group1″…rel=”group2″ etc… my english is not so well, sorry… anyways,

          best wishes and merry christmas,
          karol

          December 19, 2011 at 11:59 pm
        • karol:

          hey jon,

          just put this code as normal js function inside of head and it works :)
          i dont have any other code by now.. so it doesnt overwrite.

          also, i have tried an other way to make multiImages:
          api hook:
          var a = function(self){
          self.anchor.attr(“rel”,”example_group”).fancybox();
          };
          $(“#pikame”).PikaChoose({buildFinished:a});

          fancybox:
          $(“a[rel=example_group]“).fancybox({
          ‘transitionIn’ : ‘none’,
          ‘transitionOut’ : ‘none’,
          ‘titlePosition’ : ‘over’,
          ‘titleFormat’ : function(title, currentArray, currentIndex, currentOpts) {
          return ‘Image ‘ + (currentIndex + 1) + ‘ / ‘ + currentArray.length + (title.length ? ‘   ‘ + title : ”) + ”;
          }
          });

          and it works also..so you have two options :) but i think jeremys code ist better.

          good luck, karol

          December 20, 2011 at 8:59 am
        • NeonDevil:

          This implementation works great for me!

          However, i think this workaround prevents the fancybox option ” ‘cyclic’ : true ” from working as expected. Am I doing something horribly wrong?

          February 14, 2012 at 5:55 am
  12. Danny Tonkin:

    Hi there. Thank you for your efforts on such a great gallery.

    I’d like to know if there’s a way to integrate fancybox with the open in new tabs menthod?

    Reason is that the website i’m trying to get this working on uses iframes and fancy box is appearing inside an iframe, not the outer page.

    Is this possible?

    Thanks,
    Dan

    December 3, 2011 at 8:00 pm
    Reply
  13. Jon:

    Hi, thanks for making this great plugin, it is the fancybox support that really made the choice for me, however, does the call work with fancybox 2.0.3? I cannot seem to get this to call fancy box on the image click using
    $(document).ready(function (){
    var a = function(self){
    self.anchor.fancybox();
    };
    $(“#pikame”).PikaChoose({buildFinished:a});
    });
    even though the pikachoose gallery itself is working.
    many thanks for any advice!
    All the best

    Jon

    November 29, 2011 at 6:12 pm
    Reply
    • Jeremy:

      I haven’t had much luck with Fancybox v2 yet. I’m going to give it a couple more weeks to get the bugs worked out (gone from 2.0 to 2.0.3 in about 3 days) before trying again. Then I’ll update the guide here. For now I’d grab the newest 1.x version.

      November 29, 2011 at 7:43 pm
      Reply
    • loko87:

      Try checking twice if u haven’t got unnecesary jquery lib calls – thats what happened to me while using cmsms. Used pikachoose and it worked fine, fancybox didn’t tho. Finally found out that Jquery Tools module and jquery lib i was attaching were causing the issue (and still all the other jQuery scripts were fine, thats why it was not so obvious :P )

      December 21, 2011 at 9:09 am
      Reply

Leave a Reply