Submit your widget
HomeLightbox & Dialog & OverlayjQuery Plugin - imgBox lightbox image

jQuery Plugin - imgBox lightbox image

Created 13 years ago   Views 20600   downloads 3421    Author jqueryglobe
jQuery Plugin - imgBox lightbox image
View DemoDownload
109
Share |

imgBox is a jQuery plugin that implements a smooth zoom effect on images. Download it, try it, let me know what you think.

What’s So Great About this Plugin?

  • Elegant looking, Mac-like effect
  • Popup blockers are no problem. The content opens within the active browser window
  • Multiple images can be opened at the same time
  • Can be customized with settings and CSS
  • It’s just 7KB (packed)
  • All modern browsers supported, including IE6

How to Use

First, make sure that there is a XHTML DOCTYPE declaration at the very top of the page. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

1. Include necessary files

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="imgbox/jquery.imgbox.pack.js"></script>
<link rel="stylesheet" href="imgbox/imgbox.css" />

 

2. Create a link elements. You can set the title using the title attribute: 

<a class="zoom" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>

 

3. Apply a imgBox using jQuery's selectors like so: 

$("a.zoom").imgbox();

 

This will add the zoom effect to any a tag classed with zoom

Available options

You have 2 different ways to modify the settings:

  1. Directly modify $.fn.imgbox.defaults
  2. Set as parameter to the imgbox(); function, example:

 

$("a.zoom").imgbox({
 'zoomOpacity' : true,
 'alignment' : 'center'
});

 

Here is the complete usable settings list

padding Padding around full image
alignment Position of the full image in the client, either 'auto' or 'center'. By default it expands equally in all directions from the thumbnail
allowMultiple Allow more than one popup to be open at the same time
autoScale If true, images are scaled to fit in viewport
speedIn Speed in milliseconds of the zooming-in animation
(fading if set to 0)
speedOut Speed in milliseconds of the zooming-out animation
(fading if set to 0)
easingIn, easingOut Easing used for animations
zoomOpacity If true, changes image transparency when zooming
overlayShow If true, shows the overlay (false by default)
Overlay color is defined in CSS file
overlayOpacity Opacity of overlay (from 0 to 1)
hideOnOverlayClick Hides popup when clicked on overlay
hideOnContentClick Hides popup when clicked on full image

You might also like