This tutorial explains how to use mootools and pathfusion multibox to implement a very nice lightbox on your website.
When an user clicks on a thumbnailed image, the script displays a big image preview in a window above all other page elements. The result is something like this:
You can download this tutorial using the following links which includes mootools framework and pathfusion script.
Download this tutorialStep 1: include CSS and Javascript
Create a new HTML page and add the following code into <head> tag to link mootools and multibox script/css:
<link href="multibox.css" rel="stylesheet" type="text/css" />
<script language=""javascript" src="mootools.js">
<script language=""javascript" src="multibox.js">
<script language=""javascript" src="mootools.js">
<script language=""javascript" src="multibox.js">
Step 2: add thumbnail images
Now, in the <body> tag, add thumbnailed images using this code for each image:
<a href="my_image_1big.jpg" id="mb1" class="mb" title="Add here image title">
<img src="my_image_1.jpg" width="200" height="118" border="0"/>
</a>
<div class="multiBoxDesc mb1">
For each image, you can add a short description here...
</div>
<img src="my_image_1.jpg" width="200" height="118" border="0"/>
</a>
<div class="multiBoxDesc mb1">
For each image, you can add a short description here...
</div>
...remember to change ID for each image link using a progressive number (mb1, mb2, mb3...) and the relative multiBoxDesc reference (in bold in the code above!).
Step 3: add the script
When you added all tumbnailed images you want, add below this few lines of code:
<script type="text/javascript">
window.addEvent('domready', function(){
new MultiBox('mb', {descClassName: 'multiBoxDesc'});
});
</script>
window.addEvent('domready', function(){
new MultiBox('mb', {descClassName: 'multiBoxDesc'});
});
</script>
It's all! Save and try.
Download this tutorialResources
For other infos about this post take a look here:
No comments:
Post a Comment