Flexible jQuery Gallery Plugin With Image Zoom Animations - ZoomsaicJS
File Size: | 192KB |
---|---|
Views Total: | 3991 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
ZoomsaicJS is a small jQuery plugin that organizes a group of images in a customizable gallery layout with support for amazing image zoom animations when mouse over.
How to use it:
1. As usual, include the latest jQuery javascript library and jQuery zoomsaicJS' script and CSS files in your page.
<link href="css/zoomsaic.css" rel="stylesheet" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2. Include jQuery easing plugin for easing effects. (Not required but suggested)
<script src="js/jquery.easing.min.js" type="text/javascript"></script>
3. Build the html structure for the gallery.
<div class="zoomsaic" id="demo"> <div class="zoomsaic-element"> <div class="zoomsaic-before"> ... your before hover part ... </div> <div class="zoomsaic-after" style="display:none;"> ... your after hover part ... </div> </div> <div class="zoomsaic-element"> ... </div> <div class="zoomsaic-element"> ... </div> </div>
4. Initialize the plugin with all default options.
<script type="text/javascript"> $(document).ready(function(){ $('#demo').zoomsaic({ columns : 4, // (REQUIRED) columns per page width : 780, // (REQUIRED) container width height : 195, // container height elements_per_page : 4, // total elements per page box_width : 195, // before zoom box width box_height : 195, // before zoom box height max_box_width : 260, // after zoom box width max_box_height : 260, // after zoom box height easein : "linear", // easing of the zoom animation, supports additional effects from jquery easing/jquery ui easout : "linear", // easing of the zoom animation, supports additional effects from jquery easing/jquery ui pagination : true, // pagination enabled / disabled navigator : true, // pager enabled / disabled direction: "left", // direction of the pager animation easepage : "easeInExpo" // easing of the pager animation, supports additional effects from jquery easing/jquery ui }); }); </script>
This awesome jQuery plugin is developed by jonathanargentiero. For more Advanced Usages, please check the demo page or visit the official website.