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>
Note: You can also use the Google Code CDN for jQuery

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;

Let's start the script

	//default behavior

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" />

Default behavior


As options you can set the number of rows and columns

var options = {
            col: 6,
            row: 1
View an example


For support use the comments on my blog post


Download the source code or the packed version (packed with Dean Edwards packer).


Creative Commons License
ClipGallery by is licensed under a Creative Commons Attribution-Share Alike 2.5 License.