Easy jQuery Lightbox Plugin For Image Gallery - ion.zoom
File Size: | 3.1MB |
---|---|
Views Total: | 2791 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

ion.zoom is a lightweight and touch-friendly jQuery plugin for adding image lightbox effects to your gallery. It supports arrow and keyboard navigation to browse the large images of the gallery.
How to use it:
1. Include required CSS file on the web page
<link href="css/ion.zoom.css" rel="stylesheet" type="text/css">
2. Create a image gallery
<div class="gallery"> <a href="img/zoom/zoom-big-01.jpg" class="gallery_1"><img src="img/zoom/zoom-small-01.jpg" alt="" /></a> <a href="img/zoom/zoom-big-02.jpg" class="gallery_1"><img src="img/zoom/zoom-small-02.jpg" alt="" /></a> <a href="img/zoom/zoom-big-03.jpg" class="gallery_1"><img src="img/zoom/zoom-small-03.jpg" alt="" /></a> <a href="img/zoom/zoom-big-04.jpg" class="gallery_1"><img src="img/zoom/zoom-small-04.jpg" alt="" /></a> <a href="img/zoom/zoom-big-05.jpg" class="gallery_1"><img src="img/zoom/zoom-small-05.jpg" alt="" /></a> <a href="img/zoom/zoom-big-06.jpg" class="gallery_1"><img src="img/zoom/zoom-small-06.jpg" alt="" /></a> </div>
3. Include jQuery library and jQuery ion.zoom plugin on the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/ion-zoom/ion.zoom.js"></script>
4. Call the plugin with options
<script>$(document).ready(function() { $(".gallery_1").ionZoom({ visibleControls: true // set false to disable the controls and navigation }); })</script>
This awesome jQuery plugin is developed by IonDen. For more Advanced Usages, please check the demo page or visit the official website.