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 = "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 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>
|
5. Call the plugin.
| $(document).ready( function (){ |
| $( '#demo .thumbnails-container img' ).simpleGallery({ |
| loading_image: 'demo/images/loading.gif' |
| $( '#demo .big-image' ).simpleLens({ |
| loading_image: 'demo/images/loading.gif' |
No comments:
Post a Comment