Feed on
Posts
Comments

jQuery Panel Gallery Plugin

The other day I went looking for a simple way using jQuery to fade between a set
of images on a page. I found a few good plugins, some with many options, but none that
did exactly what I was looking for. InnerFade came close, as did jQuery Cycle, but neither had the effect that I wanted, nor the simplicity and reusability that I needed. So, being a coder, I set out to create my own plugin. I was mainly looking for a simple way to take a group of images and transition from one to the other in a smooth, visually appealing way. I’ve seen countless galleries where one image fades into another and I like that effect, but wanted to come up with something new, so I began writing my first jQuery plugin. I didn’t set out to make a “gallery” per se, however when I was done, I realized that that was really what I had ended up with. Let me take a moment to say that I’m fairly new to jQuery and even newer to writing jQuery plugins — in fact this my first one, however I’ve tested this as much as I can, and made it as small as I can (without compressing it), and it works with everything I’ve thrown at it. So to make a long story short, here’s what I ended up with:

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. 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. All in a plugin that’s less than 5k uncompressed. Not bad.

Note: the latest version of the Panel Gallery is available here.

Download

Download version 1.1 here

Download jquery.panelgallery.js (version 1.0)

What’s So Great About this Plugin?

  • No slicing or editing of the images is needed
  • It’s just 5K
  • 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.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').panelGallery();
});
</script>

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

147 Responses to “jQuery Panel Gallery Plugin”

  1. Antony says:

    Nice work. : D

  2. Jeevan says:

    Would be useful for header banners. Thanks for sharing.

  3. Biju Subhash says:

    Thank you for sharing… :D

    Biju Subhash

  4. Great plugin.

    Thanks for sharing. Check my site for an implementation…

  5. Matt says:

    Nice job, keep up the good work :)

  6. Kasper says:

    Wow really nice plugin :D I am planning on using this for sure!Keep up the great plugins :D

  7. hello parabens very good! pardon my English I am Brazilian!

  8. Josh says:

    This is nice, very flash like

  9. umun says:

    Hi, great work!

    But I receive a lot
    error in parsing value for ‘background-image’. Declaration dropped.
    in Firefox 3.5.5
    I am using v1.2

  10. umun says:

    Now I think I know why. The file name of the images I used were of the type that included spaces and other strange characters. Replacing the spaces with underscores, helped to remove those errors plus it now works in Firefox and Safari. might hv t do with filename parsing…

  11. Paul says:

    Good work…. one of the more useful jquery plugins

  12. Dan says:

    How hard would it be to add: autoStart: true/false, navigation: true/false? I’d like for people to be able to select from a few different images. Thanks! It’s awesome!

    • Bill says:

      The latest version pauses the transitions when the mouse is over the image. What do you mean by navigation true false? There is no navigation.

  13. Adrian says:

    Great work!
    I am just trying to apply it into my website and I have set up 3 images slideshow for test purposes.
    It works fine with latest Opera, Firefox, Chrome. But when it comes to Safari, there is no transition – just plain jump from one image to another. I have included image’s width and height as advised.
    Can anyone help me?
    Thanks

  14. bsd-roo says:

    Hi
    First of all I would just like to say that this is an awsome plugin and I was just wondering if there is a way to add href to the images or call a javascript function for AJAX use. Basically Im trying to add a link to the images, is that possible?

    thanks in advance

  15. Kalpesh says:

    Thank you for giving examples.

  16. cool website you have by the way

  17. Eric says:

    I was wondering if you had any methods to either suspend the animations/stop the animations. I have a page with multiple slideshows and I would like to give the option to stop some of them if they want.

    Thanks

  18. I already did this jquery plugin slideshow in one website..actually its autoplay slideshow..i wan the controls for the next and previous can you help me..

  19. namita says:

    Nice Work ! Keep it up

  20. hello, muy buen post.
    muchas gracias..

    Slds..

  21. Great plugin. Thanks for sharing we will be making some tweeks to this and using it.

  22. klaudio says:

    does someone could give an example of how to put a link to another page using this plugin?

  23. Lizette says:

    Greetings! This is my first visit to your blog!
    We are a group of volunteers and starting a new project
    in a community in the same niche. Your blog provided us beneficial information to work on.
    You have done a extraordinary job!

  24. Ashot says:

    Hi
    Your plugin works just fine on Apple Mac and firefox and on some windows versions but on Windows 8, all i can see is the whole of the screen is filled with the small rotating images expanded to fill the entire screen.
    Any help would be welcome.

    thanks for your work.

    jack

Trackbacks/Pingbacks

  1. [...] jQuery Panel Gallery (演示 | 下载) [...]

  2. […] jQuery Panel Gallery (演示 | 下载) […]

  3. […] jQuery Panel Gallery (演示 | 下载) […]

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>