Hello,

Can anybody tell me how to use the jquery Fancybox in html module? I would like to add an image to the html module and let it popup like the Will Strohl lightbox module. I am totally new to jquery, so I don't know were to start. I have tried google for many times, but can't find an easy solution for this. 

Hope somebody can help me.

Many thanks, 

 

 

 

Hi,

download Will Strohl's Content Injection Module (http://wnsinj.codeplex.com/), install it, place an instance of it on the page where you want to have this effect and add an injection like this (replace square brackets by angle brackets):

[!-- Add fancyBox --]
[link rel="stylesheet" href="pathTo/jquery.fancybox.css?v=2.0.5" type="text/css" media="screen" /]
[script type="text/javascript" src="pathTo/jquery.fancybox.pack.js?v=2.0.5"][/script]

[script type="text/javascript"]
$(document).ready(function() {
$(".myFancyBoxClass").fancybox({
});
});
[/script]

For special effects see the FancyBox documentation.

In the HTML module (on the same page), add a link to the large image around the thumbnail, like

[a href="pathTo/LargeImage.jpg" target="_blank" class="myFancyBoxClass"][img src="pathTo/Thumbnail.jpg"][/a]

That's it.

Note: The class of the link has to correspond to the class in the script ("myFancyBoxClass" in this case). If you assign this class to more images, it will work for all and you will be able to move through all these pictures with this class inside the lightbox.

Best wishes
Michael

---

Jan,

if you hover over the images on the left and right side you should get some arrows that allow you to scroll through the images when you click them.

Best wishes
Michael

---