A few examples of how to use Zoombox

Group of pictures :

Multimedia contents :

Set up

How to set up in two steps

First, place the whole directory "Zoombox" at the root of your website :

1- Zoombox uses 2 different Javascript scripts that you will have to import in this exact same order (in <head> or just before </body>)

<script type="text/javascript" src="/zoombox/jquery.js"></script>
<script type="text/javascript" src="/zoombox/zoombox.js"></script>

2- Link the CSS file to your page in the <head>

<link href="/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />


How it works ?

1- add rel="zoombox"onto your links in order to add the Zoombox effect

<a href="http://www.youtube.com/watch?v=8oejjWGFs6o" title="Session 2006" rel="zoombox">Lien</a>

2- if you would like a group of pictures, you will have to mention a group name in brackets

<a href="images/image-1.jpg" rel="zoombox[vacances]">image 1</a>
<a href="images/image-2.jpg" rel="zoombox[vacances]">image 2</a>
<a href="images/image-3.jpg" rel="zoombox[vacances]">image 3</a>

3- You can also mention a length and a height to the Box, rel="zoombox 800 600", in case of a link which is not a picture


What kind of links are supported ?

Images : jpg,png,gif,bmp
FLV (An FLV player has been added to the installation file)
Quicktime links: Mov or MP4
WMV links
Dailymotion videos : du type http://www.dailymotion.com/video/x1xhl1_jojodemarrages_creation
Vimeo links: http://www.vimeo.com/752791
Youtube links: http://fr.youtube.com/watch?v=8oejjWGFs6o
On any other links where the iframe system is being used.

Don�t hesitate to contact me if you have any other idea of additional links.


v1.1.0 (14/11/2009)

v1.0.1 (22/12/2008)

v1.0.0 (09/03/2008) :


Can I modify the file ?
Yes, but you will have to inform me of the changes you�ve done