Feed on
Posts
Comments

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.

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

Download jquery.panelgallery-1_1.js

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.

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

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:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.panelgallery-1_1.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').panelGallery();
});
</script>

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:

<img src="image2.jpg" alt="image 2" name="bt" width="500" height="250" />

That’s it! You can apply the panel gallery to any number of elements on a page.

Options

The following options are configurable:

  • sections – the number of panels to divine each image into (default: 3)
  • imageTransitionDelay – the time (in milliseconds) to pause between a
    completed image and the next image (default: 3000)
  • startDelay – the time (in milliseconds) to pause before beginning the first transition (default: 2000)
  • sectionTransitionDelay – the time (in milliseconds) to pause between each section of an image (default: 700)
  • repeat – whether to endlessly repeat the series of images (default: true)
  • direction – the default direction of the transitions: “lr” (left to right), “rl” (right to left), “tb” (top to bottom), and “bt” (bottom to top) (default: “lr”)

Options are added when calling the script:

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

Enjoy!

Demos

79 Responses to “jQuery Panel Gallery 1.1 Plugin Released”

  1. Mile says:

    Great!!!! Just what I was looking for! Ajax and jQuery are the future!!!

  2. mukul says:

    thanks that working nice and its easy to implement.

  3. This is a nice, lightweight plugin; easy to install; and works great. One thing I would note is that the containing div needs to have overflow:hidden, otherwise, a scrollbar would pop up for about a half second as the lr transition completed. :-)

    Thanks for the great work!
    Brandon

  4. webjosh says:

    This is simple and nice.

  5. Stefan says:

    Is it possible to use the transition twice on one page. I tried it so far and only on of the two divs work. What would I have to do, to get two transition working on one page.
    Thanks.

Trackbacks/Pingbacks

  1. [...] Attribution 2.5 License, which means that you are free to use and modify it for any purpose. Source #dd_ajax_float{ background:none repeat scroll 0 0 #FFFFFF; border:1px solid #DDDDDD; float:left; [...]

  2. [...] A free jQuery plugin, distributed under the Creative Commons Attribution 2.5 License, which means that you are free to use and modify it for any purpose. Source [...]

  3. [...] เปลี่ยนรูปที่ละขั้นบันไดอย่างสวยดูผู้ดีไปอีกแบบ Demo… [...]

  4. [...] เปลี่ยนรูปที่ละขั้นบันไดอย่างสวยดูผู้ดีไปอีกแบบ Demo… [...]

  5. [...] 10. jQuery PanelGallery [...]

  6. [...] 下载地址:http://www.catchmyfame.com/2009/08/13/jquery-panel-gallery-1-1-plugin-released/ jquery下载地址:http://www.jquery.com 或者直接引入谷歌的Jquery 库 [...]

  7. [...] 7. jQuery PanelGallery jQuery PanelGallery generates a slideshow of images with a unique transition. Image transition occurs in a sequential manner displaying the new image panel by panel, thus the name PanelGallery. It is lightweight and allows you to change the direction of panel transition. [...]

  8. [...] jQuery Panel Gallery MORE INFO / DEMO [...]

  9. [...] jQuery Panel Gallery Plugin 1.1 – MORE INFO [...]

  10. [...] jQuery Panel Gallery MORE INFO / DEMO [...]

  11. [...] jQuery Panel Gallery Plugin 1.1 – MORE INFO [...]