Feed on

jQuery Panel Gallery Plugin 2.0

Since it’s been about a year since the Panel Gallery plugin was last updated, I figured that it was overdue for some spiffying up. I’ve completely rewritten the Panel Gallery plugin and added a HUGE amount of new effects. You’re no longer are you limited to just panels to transition your images; now you have a whole slew of different effect to apply, with multiple ways to apply them. View the demos.

Version 2.0 (the Super Happy Fun Ball™ edition) has the following transition effects:

  • Fade – A simple total image fade
  • Box (5 variations) – Transitions by dividing up an image into small squares. Transitions can be random, or wipe diagonally from top left to bottom right, top right to bottom left, bottom left to top right, and bottom right to top left.
  • Panel (44 variations) -  Too many to list, panels divide up an image horizontally or vertically and animate based on your options. Some effects are, zipper, teeth, reveal, north/south, east/west.
  • Overlay (8 variations) – These are the original Panel Gallery effects, with the ability to add a blinds effect for any overlay option.
  • Jackpot – Vegas style baby! This effect divides an image up into three pieces and transitions them like slot machine wheels.

You can apply specific effects on any image, create an array of effects, of let the plugin pick effects for you. This, combined with the plugin’s options gives you an unlimited amount of combinations to use.

Version 2.0 still has the ability to pause the transitions simply by placing your mouse over the image.

As with previous releases of the Panel Gallery, the best part of this plugin is that not one image needs to be sliced or edited to work with it; the plugin does all the work! Plus it degrades gracefully for those who have JavaScript disabled.



  • Example 1 – Movie stills from Inception, The Matrix, Machete, and Disney’s next animated movie Tangled
  • Example 2 – Supermodels
  • Example 3 – Large floral images
  • Example 4 – Multiple panel galleries on one page

What’s So Great About this Plugin?

  • No slicing or editing of the images is needed
  • Dozens of image transition effects
  • It’s just 11 KB compressed
  • Each image can have its own fade effect
  • You can setup an array of effects to apply to your images
  • The gallery can be set to pause on mouseover
  • Easily configurable
  • Reusable on multiple containers

How to Use

First, all of your images must 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.

<div id="container">
	<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" />

All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers. You can mix various image formats like Gif, Jpg, and Png.

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.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.panelgallery-2.0.0.js"></script>
<script type="text/javascript">

Finally, while you don’t have to specify any effects as the plugin will random pick them for you, you can specify transition effects for individual images, or set an option of an array of effects to cycle through (see options below). Image specific effects take the highest priority, followed be the array of effects options, and finally random effects. If you set an array options, the plugin will apply each effect in the order you specify, cycling through them regardless of how many images you have. For example if you have 10 images and your array has three effects, the first image will get the first effect, the second image will get the second effect, the third image will get the third effect, and the fourth image will then get the first transition effect, and so on.

No longer do you specify a direction for an effect as you did with the older version of this plugin. Instead, you specify a specific effect which contains the direction.  To add a specific transition effect to an image, you assign it to the image’s name attribute. For example:

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

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


The following options are configurable:

  • viewDuration: the time (in milliseconds) to pause between a completed image and the next image (default: 4000)
  • transitionDuration: the time (in milliseconds) to pause between each section of an image (default: 1000)
  • boxSize: the height and width of boxes (in px) when using box transitions (default 35)
  • boxFadeDuration: the time (in milliseconds) is takes for an individual box to fade out (default: 1000)
  • boxTransitionDuration: the time (in milliseconds) to wait before the next box begins to fade in (default: 100)
  • panelWidth: the height (or width) of each panel when using panel transition effects (default 40)
  • panelTransitionDuration: the time (in milliseconds) to wait before the next panel begins to fade in (default: 100)
  • pauseOnHover: Boolean value of whether to enable the pause on hover feature (default: true)
  • FX: an optional array of transition effects where each effect is enclosed in single quotes and separated by a comma (default is an empty array – Array())

Options are added when calling the script:

    FX: new Array('boxSouthEast','fade','boxRandom','panelZipperDown,true','panelZipperRight,true','panelTeethDown,true','panelTeethRightReveal')

Transition Effects

For an example of each effect, click the name to open a new window where a series of images will transition based on the effect you select.

Panel effects that have a true/false second parameter refer to whether the panel should fade in as it moves (true) or remain fully opaque from start to finish (false). Overlay effects that have a true/false second parameter refer to whether the blinds effect should be used (true) or not (false).


141 Responses to “jQuery Panel Gallery 2.0 Released”

  1. Appreciating the persistence you put into your website and detailed information you provide.
    It’s awesome to come across a blog every once in a while that isn’t the same old rehashed material.
    Great read! I’ve saved your site and I’m adding your RSS feeds to my Google account.

  2. You can also perform erection exercises that will increase the blood flow to the penis and
    in fact increase the size of your penis both
    in length but more importantly (as my wife tells me) width.
    It is estimated that more than 16 million people
    in the UK suffer from type-2 diabetes – a health condition that can adversely affect a
    man’s erection. And then along came a little blue tablet called Viagra – and a bunch of other big name brands followed in its wake.

    Visit my webpage: viagra online prescription cheap

  3. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each
    time a comment is added I get several e-mails with the same comment.

    Is there any way you can remove people from that service?

  4. JoseLuis says:

    Hi! First of all, congrats for your blog and such useful scripts.

    I’m trying to use PanelGallery2.0 on my site and it’s working but have a problem: images have a weird behavior. Please, check it out at http://www.renewpanama.com/ and let me know what I’m doing wrong.

    Thanks a lot!

    • admin says:

      Please describe the “weird behavior”.

      • JoseLuis says:

        Is not fluid (constant), like your examples. For instance: first picture appears, then the second one and get back to the first one very quickly and without transition effect, then blank, then get back to the second one…and so on. Could you see this behavior on my page?

      • admin says:

        Looks fine to me.

  5. blogspot.com says:

    If you’ve been looking for some new goggles lately, you know the
    challenge. Make the dance a theme or even a costume event based
    on the music group’s musical style. For instance, you can use bench press, chin-ups and squats.

  6. Its like you learn my mind! You seem to know so much about this, like you
    wrote the guide in it or something. I feel that
    you could do with some p.c. to power the message house
    a little bit, however instead of that, that
    is wonderful blog. An excellent read. I will certainly be back.

  7. Ken says:

    I really like your plugin as it works great on a range of images. Is it possible to use this on just one image? I am attempting to use it for a page transition such that my background image moves from one page’s background to another with your transitions. I am attempting to hook the div tag into a click event on a hovering panel, grab the div and then apply a transition – so far it does not work. Thanks!


  1. [...] Catch My Fame » jQuery Panel Gallery 2.0 Releasedlt: true) fx: an optional array of transition effects where each effect is enclosed in single quotes and separated by a comma (def…はてなブックマークより [...]

  2. [...] ist das Plugin unter:  http://www.catchmyfame.com/2010/09/13/jquery-panel-gallery-2-0-released/, auf dieser Seite lassen sich auch weitere sehr schöne Effekte dieses Plugins [...]

  3. [...] #20. jQuery Panel Gallery 2.0 [...]

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>