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
   
Flexible jQuery Gallery Plugin With Image Zoom Animations - ZoomsaicJS

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.