Zoomingbox : jQuery lightbox

A jQuery lightbox which enables you to use the lightbox modal as a container for a larger zoomed image

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Basic HTML Markup

Add necessary js and css files

Styles included in the css file are mostly basic functionality, customization of the plugin is possible through the API

<link href="css/zoomingBox.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/zoomingBox.js" type="text/javascript"></script>

Create anchor element

create an anchor element with the css class you want to target linking to the image you want to show in the lightbox

<a href="big image url" class="yourClass">your thumbnail or text</a>

If you want to use the gallery add the same "data-rel" attribute to every image you want to include in the gallery

<a href="big_image.jpg" class="yourClass" data-rel="myGallery">your thumbnail or text</a>
<a href="big_image2.jpg" class="yourClass" data-rel="myGallery">your thumbnail or text</a>
<a href="big_image3.jpg" class="yourClass" data-rel="myGallery">your thumbnail or text</a>

Fire up the plugin!

Simply target your anchor element's class using jQuery

$('.yourClass').zoomingBox();

Examples

complete image without thumbnails and both vertical and horizontal mouse action

$('.complete').zoomingBox();

Single image with thumbnails and both vertical and horizontal mouse action (Default)

$('.nothumb').zoomingBox({ thumbnails:false, });

vertical image with Thumbnails and vertical mouse action

$('.vertical').zoomingBox({ zoom:'vertical', imageResize:'width', });

horizontal image with thumbnails and horizontal mouse action

$('.horizontal').zoomingBox({ zoom:'horizontal'});

Gallery with vertical thumbnails

$('.gallery').zoomingBox({zoom:'vertical',imageResize:'width',});

Gallery with horizontal thumbnails

$('.gallery2').zoomingBox({zoom:'vertical',imageResize:'width',thumbnailPosition:'horizontal'});