cooking, programming and everyday life xrado

Thursday, January 10, 2008

imgBox my lighter lightbox

You all probably know lightbox image popup,.. ok ..this is my simple version of it, using mootools 1.2.


- 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

	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'

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.