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!

144 thoughts on “jQuery Panel Gallery 2.0 Released”

  1. Hi,
    this is a really great slide show plugin, and absolutely easy to install! But I would like to design our new homepage resizeable, and even when I define the height and width of the images in percentage values, they do not resize at all when I change the window’s size.
    Does anyone have a suggestion how or if it is possible to resize the images dynamically dependant on the window’s size?

  2. Browser: FireFox (latest version)
    OS: Windows 7 Home Primeum
    web developer: Dream Weaver CS5.5 and PhotoShop CS5.5
    URL: http://mobilehost.me/ARIES/
    I had the gallery plugin working just great, but somehow I broke it. (Iknow, where’s the backup?).
    I figured the JS files were the culpret as the images were displaying verticly down the page. I reinstalled the js files with no change. Then I checked the CSS files that were being called and could find nothing.
    I have just trippled checked to ensure the JS were in the prober folder and and all the calls were correct. Still can’t get it working again.
    Now I notice that after installing the JS files again, out of desperation, I no longer see the images at all.
    Totally confused, had no trouble setting the gallery u the first time I did it. Could you please take a look?

    Bob…

  3. Hello there! This is kind of off topic but I need some guidance from an established blog. Is it difficult to set up your own blog? I’m not very techincal but I can figure things out pretty fast. I’m thinking about creating my own but I’m not sure where to start. Do you have any ideas or suggestions? Thank you

  4. I love this slideshow! The best I have seen! Thank you for sharing it! Do you know if this will work in a Google Site? I have had trouble finding a way to embed one that will work. Is it perhaps a Google App or can it be made into one?

  5. Hi,

    Sorry for bad english, i’m a french boy.

    Is it possible to add a visible title on the image, on hover or all time for each picture ?

    Sincerly

  6. very nice plugin. great work. but i have a problem. there is a flickering of the sliding images . what to do? i have check this problem many time but no solution. please guide me?

  7. After I originally left a comment I appear to have clicked on the -Notify me when new comments are added- checkbox and now whenever a comment is added I receive four emails with the same comment. Perhaps there is a means you are able to remove me from that service? Thank you!

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

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

  10. 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?
    Thanks!

  11. 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!

      1. 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?

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

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

  14. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *

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