jQuery Panel Gallery Plugin

catchmyfame has implemented a lightweight (5K) jQuery Panel Gallery Plugin, which changes automatically changes images after given interval of time. Plugin is useful for header banners, advertising banners.

Features:

• No slicing or editing of the images is needed
• It’s just 5K
• Easily configurable
• Reusable on multiple containers

Usage:

First, all images should be the same size and wrapped in a containing element

(div) which must have an ID.

<div id="container" style="position:relative">
<img src="image1.jpg" alt="image 1" width="500" height="250" />
<img src="image2.jpg" alt="image 2" width="500" height="250" />
<img src="image3.jpg" alt="image 3" width="500" height="250" />
..
</div>

Include jQuery and panelgallery scripts in page , then call panelGallery() function for your containing elements, We can apply the panel gallery to any number of elements on a page.

<script type="text/javascript" src="<b style="color: black; background-color: rgb(160, 255, 255);">jquery</b>.min.js"></script>
<script type="text/javascript" src="<b style="color: black; background-color: rgb(160, 255, 255);">jquery</b>.panelgallery.js"></script>
<script type="text/javascript">
$(function(){
 $('#container').panelGallery();
});
</script>

Options:

Plugin has various configurable options, that are applied using below syntax,

to know more details visit this.

$('#container').panelGallery({
 sections:5,
 imageTransitionDelay :3000,
 startDelay:5000,
 sectionTransitionDelay : 700,
 repeat:false,
 direction:"tb"
});

References:

WebSite: http://www.catchmyfame.com/2009/05/02/jQuery-panel-gallery-plugin
Demo: Demo 1 , Demo 2 , Demo 3
Download: http://www.catchmyfame.com/jQuery/jQuery.panelgallery.js