You all probably know lightbox image popup,.. ok ..this is my simple version of it, using mootools 1.2.
DEMO
Features:
- gallery functions (next, previous image)
- direct link to certain image popup
- image description via title
- no extra css or images needed, except progress bar (optional)
- aware of linux flash non transparency
- fully custom able
- no effects ..not really a feature..but i like it this way
tested & working : firefox, opera, internet explorer, safari, konqueror
Default options
options:{
classname: 'imgbox',
overlay_bg: '#000000',
overlay_opacity: '0.6',
rbox_bg: '#ffffff',
controls_color: 'red',
numberof_color: '#333333',
title_color: '#ffffff',
thumb_url: 'size=thumb',
image_url: 'size=large',
progressbar: '',
margin_top: '20px'
},
Usage
1. Include imgbox.js and mootools.js (DomReady, Selectors, Element.Dimensions, Element.Styles and deps) to header
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/imgbox.js"></script>
2. Add class 'imgbox' (or the one you want) to images you want to popup
<img src="small_image.jpg" class="imgbox" title="image description">
3.Add this line some where on your page (within script tags) or add it directly to imgbox.js
window.addEvent('domready', function(){ new imgBox({}); });
Example with options
window.addEvent('domready', function(){
new imgBox({
thumb_url: 'small_',
image_url: 'big_'
});
});
thumb_url and image_url set the differences in thumbnail and popup image path that will be switched/replaced. For example if you have thumbnail image with name small_12.jpg, the popup will show big_12.jpg.
I hope you like the script. Feel free to use it on your site. If you have an idea how to improve it, let me know.
Download: imgbox.js
