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:

   <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" />

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>

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 (){

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){


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.

78 Responses

  1. Thank you a bunch for sharing this with all people you really understand what you’re talking
    approximately! Bookmarked. Kindly additionally consult with my web site =).
    We may have a link alternate agreement among us

  2. I don’t know whether it’s just me or if perhaps
    everybody else experiencing problems with your blog.
    It seems like some of the text in your content are running off the
    screen. Can someone else please comment and let me know if this is happening
    to them too? This might be a problem with my browser because I’ve had this happen before.


  3. This post gives clear idea in favor of the new users of blogging, that
    truly how to do blogging and site-building.

  4. Great weblog right here! Also your website loads up very fast!

    What host are you the usage of? Can I get your associate link on your host?
    I desire my site loaded up as quickly as yours lol

  5. whoah this weblog is fantastic i like studying your posts.
    Keep up the good work! You know, lots of people are hunting around for
    this information, you can aid them greatly.

  6. It will save to a small (less than 5K) file that can easily be emailed to other users.
    Apart from a personal computer, this popular technology is
    used by video game consoles, tablets, digital audio players
    and smartphones. You should see a wizard that asks you which signal it should repeat’choose your
    network and enter the password. Don’t continue to be frustrated by the limited range of your current wireless network
    when one simple product can help you achieve so much more.

  7. Alex:

    Just a warning, FancyBox is NOT available for commercial use.

  8. If some one desires to be updated with latest technologies then he must be go to see
    this website and be up to date daily.

Leave a Reply

1 × = seven