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.

10 Responses

  1. Hi would you mind sharing which blog platform you’re
    working with? I’m looking to start my own blog soon but I’m having a difficult time selecting between
    BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because
    your layout seems different then most blogs and I’m looking
    for something unique. P.S Apologies for being off-topic but I had to ask!

  2. This might be a tedious affair but on the same time you’ll
    be able to at least receive the call from an employer of your respective
    choice. Provided the knowledge you post is located useful, with each new
    update on your site you build credibility with your
    potential customers.

    source

  3. My spouse and I stumbled over here coming from a different web address and thought
    I should check things out. I like what I see so now
    i am following you. Look forward to finding out about your web page yet again.

    My web blog – green coffee weight loss testimonials

  4. My coder is trying to convince me to move to .net from PHP.

    I have always disliked the idea because of the costs.
    But he’s tryiong none the less. I’ve been using Movable-type on a
    variety of websites for about a year and am concerned about switching to another platform.
    I have heard very good things about blogengine.
    net. Is there a way I can transfer all my wordpress posts into it?
    Any help would be really appreciated!

  5. hi!,I love your writing very a lot! percentage we keep in touch extra about your post on
    AOL? I need a specialist on this house to unravel my problem.
    May be that is you! Looking ahead to look you.

  6. Think of the ways we try to separate the outside climate from
    the inside climate. Worse than this, in our experience registrars simply
    don”t see anything wrong with what their auditors do. In the long run, earning an energy audit certification is not only useful in terms of helping launch a career in this field, but also in terms of protecting your own household.

  7. Hello there! I could have sworn I’ve been to this blog before but after reading through some of the post I realized it’s
    new to me. Anyways, I’m definitely delighted I found it and I’ll be book-marking and
    checking back often!

  8. Great deliverу. Sound arguments. Κeep up the grеаt effort.

    my webpage: power toothbrush

  9. Nice replies in return of this query with solid arguments
    and telling the whole thing regarding that.

    My web blog; quantrim weight loss

Leave a Reply


8 − = five