Thursday, January 10, 2008
imgBox ...like my lighter lightbox
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