Zoomsaic JS

Lightweight jQuery plugin for zoom + mosaic animation

Requirements

Download

Guide

Zoomsaic JS is a simple jQuery plugin useful to create fancy galleries with minimal effort.
The plugin could be integrated in any platform, as far as your experience goes, and it's composed by three parts:

1. HTML

create as much as zoomsaic-elements as you want:

                <div class="zoomsaic">
                    <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>

2. Javascript

call the zoomsaic invoker with desired options:

                <script type="text/javascript">
                    $(document).ready(function(){    
                        $('#zoomsaic_demo_1').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
                        });
                        $('#zoomsaic_demo_2').zoomsaic({
                            width : 780, // container width
                            columns : 4 // columns per page
                        });
                    });
                </script>

3. CSS

include zoomsaic.css into your webpage

                <link href="css/zoomsaic.css" rel="stylesheet" type="text/css" media="screen" />

Demo 1


Demo 2

contact me at [email protected]