JQuery Simple Lens - Magnifying Glass Effect

Use of jQuery simpleLens plugins  to create an image gallery with a 'magnifying glass' image zoom effect.

Make use of jQuery Simple Gallery and jQuery simpleLens plugins to create an image gallery with a 'magnifying glass' image zoom effect.

How to use it:

1. put the jQuery javascript  at the bottom of the web page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. put the jQuery simpleGallery and jQuery simpleLens after jQuery javascript .

<script type="text/javascript" src="src/jquery.simpleGallery.js"></script>

<script type="text/javascript" src="src/jquery.simpleLens.js"></script>

3. Put the required stylesheet file in the head section.

<link rel="stylesheet" type="text/css" href="css/jquery.simpleLens.css">

4. Create the the Html structure like below.

<div class="gallery-container" id="demo">

<div class="container">

<div class="big-image-container">

<a class="lens-image" data-lens-image="demo/large/1.jpg"> <img src="demo/medium/1.jpg" class="big-image"> </a> </div>

</div>

<div class="thumbnails-container">

<a href="#" class="thumbnail-wrapper" data-lens-image="demo/large/1.jpg" data-big-image="demo/medium/1.jpg"> <img src="demo/thumbnail/1.jpg"> </a>

<a href="#" class="thumbnail-wrapper" data-lens-image="demo/large/2.jpg" data-big-image="demo/medium/2.jpg"> <img src="demo/thumbnail/2.jpg"> </a>

<a href="#" class="thumbnail-wrapper" data-lens-image="demo/large/3.jpg" data-big-image="demo/medium/3.jpg"> <img src="demo/thumbnail/3.jpg"> </a> </div>

</div>

5. Call the plugin.

<script>

$(document).ready(function(){

$('#demo .thumbnails-container img').simpleGallery({

loading_image: 'demo/images/loading.gif'

});

$('#demo .big-image').simpleLens({

loading_image: 'demo/images/loading.gif'

});

});

</script>

Download This Plugin