jQuery Panel Gallery 2.0 Released

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.

Download

Demos

  • 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" />
	.
	.
	.
</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. 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">
$(function(){
	$('#container').panelGallery();
});
</script>

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.

Options

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:

$('#container').panelGallery({
    boxSize:50,
    boxFadeDuration:1000,
    boxTransitionDuration:100,
    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).

Enjoy!

143 thoughts on “jQuery Panel Gallery 2.0 Released”

  1. I know this is asking a lot – but hundreds of people (especially me!) would love you if you could do a tutorial on how to integrate this into BigCommerce… Where to put all the code etc… But hey, I know this is asking a lot! LOVE this panel gallery! :)

  2. I had trouble with panel gallery 1.1 in Firefox. Panel Gallery 1.2 and 2.0 are working but… it shows a busy cursor when the mouse is on a image. Can this behaviour be changed?

    Thanks in advance

  3. Hello! great panel gallery (slideshow), i’m testing it right now and I also have an issue with busy cursor in firefox. it appears only when cursor is above the slideshow.
    Thank you a lot for sharing this!

    1. The busy cursor indicated that the gallery is paused. You can edit the plugin to change that since it’s only CSS.

  4. Just a quick question…. I can’t get the pauseOnHover: to work. Here’s how I used it in the program:

    $(function(){
    $(‘#slideshow_left’).panelGallery();
    viewDuration:4520;
    transitionDuration: 3000;
    pauseOnHover:false;
    FX: new Array(‘boxSouthEast’,’fade’,’boxRandom’,’jackpot’)
    });

    With this code, the page displays correctly except the mouse hover stalls the image! Help!

  5. Hi,

    We use this line for our Magento files

    however then panelgallery does NOT work. It does however when we remove the no-conflict part, like this:

    Any workaround for this? We do need that noconflict part.

    Thanks.

  6. and the code….

    /script type=”text/javascript” src=”http://www.redsmiley.com/mage14/js/index.php?c=auto&f=,jquery/jquery-1.4.2.min.js,jquery/jquery-noconflict.js” ></script/

    Any workaround for this? We do need that noconflict part.

    Thanks.

  7. Hi, im trying to implement this plugin, but i just get it to work in FF, im having problems in Chrome and IE any clues why this could be?

  8. Hello…Can these images be made clickable? I would like to be able to click on the picture and it take me to an external site. Any help would be appreciated.

  9. Hi, I’ve been looking at an implementation of this on a friends site and there seems to be a clash somewhere with the (very popular) AdBlock plugin which available for pretty much all browsers that support plugins.

    it manifests itself with a short but noticeable flash before the transition starts. It’s really quite prominent (can give you a link of a little video to demonstrate if that helps).

    Obviously we couldn’t expect visitors to know this or to disable such a useful plugin so any suggestions to a solution would be very welcome..

    1. A link to the actual page (not video) would help. I’ve never seen AdBlock interfere with this jQuery gallery so either it’s something else or the images are too large and should be preloaded.

  10. Is there any one, who… Can you tell me how to configure this plugin in ‘osdate’ cms? This is a dating site cms. I try to configure but… this is not working.
    if anyone have any solution it will be great help for me :)

  11. I noticed a number of questions about creating a clickable link from the images. I’ve only figured out how to do it by putting the whole div tag inside an a ref. I can’t figure out how to link individual images within it, but if you want to create a single link from the whole thing, this works. In my instance, I just wanted the viewer to be able to click anywhere in it to get to the store, so this worked:

    all your image links and stuff

  12. hi, thank you so much for this wonderful plugin, I will use it on the my next website.
    but, isn’t there buttons for navigation? if there is, that will be helpful for me.
    sorry for my engrish. and thank you so much again for your great work.

  13. I loved the effects. The only thing missing from this plugin is that it doesn’t allow me to add description to my images. It would be cool when the effect is done, a dark transparent box would come up from the bottom of the image with my description of it. Then the box go back again, the effect load, box goes back up ….

  14. There is a bug, i don’t know if some else mentioned it.
    When you add the script and run it on the web page, after a while, the animation goes crazy.
    I see this on FireFox 5.0.. On IE9 i think its working fine. It didn’t work on Chrome 12.0.742.112

    Please let me know if you experienced that too :)
    Thank you author for this wonderful work.. Best wishes :)

  15. This is really beautiful!!! Thanks for sharing!

    One question though, I want to use this as a slideshow for images (sort of like your carousel) instead of for a panel. Is there a way to add captions to each image like you did for the carousel?

Comments are closed.