jQuery Plugins For Simple Image Gallery with Magnifying Glass Effect

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

How to use it:

1. Include the jQuery javascript library at the bottom of the web page.

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

2. Include the jQuery simpleGallery and jQuery simpleLens after jQuery library.

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

3. Include the required stylesheet file in the head section of the page.

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

4. Create an image gallery following 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 on the parent element.

<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> 

Change log:

2014-04-26

• Added simpleGallery css.

---

This awesome jQuery plugin is developed by WitTrue. For more Advanced Usages, please check the demo page or visit the official website.