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.
Is there a way to fancybox only the first or single image within a Pikachoose gallery?
I’ve found it unwraps the image on the stage and isn’t able to return and initialize a fancybox again
I’ve integrated pikachoose with fancybox in this gallery:
http://www.practi-k.com.ar/detalle_producto.php?id_pro=17&opc=detalle
I added an image inside the caption and would like it to open the image larger in fancybox. When I put the link tag to this image, the link doesn’t work.
When I put the link in the main image, it works, except in the area of the caption.
Is there a way to include a link with fancybox both in the main image and the caption?
Hi there friends, how is the whole thing, and what you would like to say
about this piece of writing, in my view its genuinely amazing
in favor of me.
Naturally I like your web-site, nonetheless you need to have to check the spelling on several of your posts. Numerous of them are rife with spelling troubles and I uncover it extremely silly to inform you. On the other hand I will undoubtedly come again once more!
I found a pretty simple solution to using PikaChoose and FancyBox V2, that also works with the Carousel option.
Example Code:
// Check if PikaChoose gallery is needed on this page
if ($(“.image-gallery”).length > 0){
// Load PikaChoose with Options
$(“.image-gallery-ul”).PikaChoose({autoPlay:false,carousel:true, showCaption: false,showTooltips:false, text: {previous: “”, next: “” },thumbOpacity:0.70,});
// Add Group Name (optional)
$(“.pika-stage a”).attr(‘rel’, ‘group’);
// Register the PikaChoose Stage Photos with Fancybox
$(“.pika-stage a”).fancybox();
}
Hope this helps!
I did all by instructions but it dint work. Can u give me ready example ?
A way to use fancybox2 open embed youtube video
Example code:
$(document).ready(function() {
var fb_pop = function(self) {
self.anchor.click(function(event) {
event.preventDefault();
var href = $(this).attr(“href”);
var title = $(this).attr(“title”);
$.fancybox.open({‘href’:href, ‘title’:title}, {‘type’:'iframe’});
});
};
$(‘#ul_video’).pikachoose({‘carousel’:true, buildFinished:fb_pop});
});
I need this plugin with carousel and fancybox together.
Is this possible ?
Is it possible to use Fancybox grouping along with Pikachoose, I can’t seem to get that to work.
So when you click an image and fancybox fires up, you get the arrows within fancybox to move to the next image.
Possible?
I found the answer on comments page 2! Jeremy, you should remove pagination from the comments.
Hello,
How can I get the “counter” to also show on the fancybox popup? Also is it possible to get the carousel to show again in the fancybox popup? like this site http://www.necdisplay.com/p/large–screen-displays/e322
Thanks!
diana@ i am also facing the same problem as yours if you solve it please post it ….
i have no idea about the web page designing and but i know little bit of html coding but i feel i can learn more with this webpage and make my web page look more sophisticated with the j query.thanks for the post
The pikachoose.js seems to be conflicting with jquery.tools.js, We’ve tried to change the $ to jQuery and used all the variations for the no.conflict but nothing seems to work. Any other ideas for getting it to work without conflicting with the jquery tools?