jQuery Panel Gallery 1.1 Plugin Released

jQuery Panel Gallery Plugin 1.1

Update: the latest version of this plugin can be found via our plugins page.

Building upon the first release of the Panel Gallery plugin I’m happy to announce the release of version 1.1. This version streamlines the code of the first release and adds the ability to specify the direction of the transformation for each image individually.

Please upgrade your browser

Again, so what’s the big deal? Well first off, and the best part in my opinion, is that not one image needs to be sliced or edited to work with this plugin, in fact the plugin handles everything itself. Next, you can choose the direction in which the transition occurs from left to right, right to left, top to bottom, or bottom to top – now for each image individually. You can set the initial delay before the transitions begin, set the transitions to loop or stop after the last image, set the time it takes for each panel to appear, and set the delay between the images. Phew.

Download

What’s So Great About this Plugin?

No slicing or editing of the images is needed

It’s just 7K

Each image can have its own fade direction

Easily configurable

Reusable on multiple containers

How to Use

First, all of your images should be the same size and wrapped in a containing element
(I recommend a div) which must have an ID. Any images will work, however transparent images aren’t recommended. Finally, your container element should be positioned (e.g. relative, absolute, etc.). The container needs to be positioned otherwise the images within it won’t end up in the right spot on your page.

All images *MUST* have the width and height declared otherwise the plugin won’t
work in Safari, Chrome, and any other webkit-based browsers. Also, all images should
be the same size. You can mix various image formats like Gif, Jpg, and Png, however
transparent images aren’t recommended.

To use the plugin you’ll need to have a copy of jQuery, or point to jquery on Google, and the plugin. Place the files on your site and link to them:

Finally, while you don’t have to specify any directions for the fade (the default direction is left to right), you can give each image it’s own direction. To do this, add the name attribute to the image and specify either (lr, rl, tb, or bt). For example: