Friday, 30 March 2018

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

No comments:

Post a Comment

Featured post

The Lord Of The Rings book pdf

Here you can find The Lord Of The Rings book pdf shared files, Just click on bottom Download link Part 1: The Fellowship of the Ring  Part 2...

Popular Posts