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.

6 Responses

  1. Hey! This is my first visit to your blog! We are
    a team of volunteers and starting a new initiative in a community in the same niche.
    Your blog provided us useful information to work on. You have
    done a wonderful job!

  2. Loyd:

    I see a lot of interesting posts on your blog. You have to spend a
    lot of time writing, i know how to save you a lot of work, there is a tool
    that creates unique, google friendly articles in couple of
    minutes, just search in google – laranita’s free
    content source

  3. Toyin:

    How do I insert pikachoose into my wordpress site? I use a genesis framework.

  4. I just couldn’t depart your website before suggesting that I
    really loved the standard information an individual provide in your
    visitors? Is going to be back incessantly to investigate cross-check new posts

    Here is my page; REEBOK SHAQNOSIS

  5. Paul Baylis:

    How does the fancybox integration work with dynamic data obtained from a database?

    Currenty I have:

    var a = [];
    for (var i = 0; i<res.ROWCOUNT; i++) {
    var img = res.DATA.IMAGE[i].toLowerCase();
    var cap = res.DATA.CAPTION[i].toLowerCase();
    var lnk = img;
    var ttl = res.DATA.TITLE[i].toLowerCase();
    var str = {
    "image": img,
    "caption": cap,
    "link": lnk,
    "title": ttl

    How do I alter this using the new:

    var a = function(self){

    Many thanks,

  6. Several of the new arrangements we received are the following.

    You can enjoy Contact of Work: Black Ops on Playstation3, the XBOX and Nintendo Wii.
    Obtaining more lifestyles and preserve them returning!

Leave a Reply

7 × = twenty eight