Clip Gallery ver 0.1

ClipGallery is a new way to show your pics. In combination with jQuery and the ClipFX plugin, it puts your photos in a grid and as the mouse moves over the "thumbs" they expand at full size.

How does it work?

Just put jQuery, Clip Animation plugin and ClipGallery plugin in the HEAD of your HTML page

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="clip.js" type="text/javascript"></script>
<script src="ClipGallery.js" type="text/javascript"></script>

Then you should use 4 rows of css, declaring height and width of the "parent" div (that is the full size of your images), relative positioning (as we do absolute positioning in the inside) and hidden overflow (avoiding some bad operations in IE6)

#gallery {
	width: 900px;
	height: 600px;
	position: relative;
	overflow:hidden;
}

Let's start the script

$(document).ready(function(){
	//default behavior
	$('#gallery').ClipGallery();
})

At last put your images in a div

<div id="gallery">
	<img src="images/1.jpg" />
	<img src="images/2.jpg" />
	<img src="images/3.jpg" />
	<img src="images/4.jpg" />
	<img src="images/5.jpg" />
	<img src="images/6.jpg" />
</div>

Default behavior

Options

As options you can set the number of rows and columns

var options = {
            col: 6,
            row: 1
        }
$('#gallery').ClipGallery(options);
		

Support

For support use the comments on my blog post

Download

License