Feed on
Posts
Comments

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!

141 Responses to “jQuery Panel Gallery 2.0 Released”

  1. Mohammad says:

    Hi, It’s a great resource. But I am facing a problem. I am using in a wordpress site, while it it working in the local version but not working in the server version. Can anyone guide?
    Thanks.

    • Matt says:

      I’m also having this problem. Although not a WordPress site, my site is a “clean-style” code, so minimal scripts. I’m using the 1.2 version, but like Mohammad, the script works on a local copy, but once uploaded to the server, it just shows the image tag changing in FireFox 11 (no image), a blank image and then the transition and then another blank image on Safari. But it works well with IE9 on any copy – local or server-side.

      Please help.

  2. peta says:

    Random sort images

    $(function(){
    $(“#container”).html($(“#container img”).get().sort(function(){return 0.66 – Math.random();}));
    $(‘#container’).panelGallery();
    });

  3. Hooman says:

    Is it possible to make the images clickable?

  4. Hooman says:

    Second Request: Is there a version of this plugin that allows the images to be clickable? I really like this plugin and have already set it up but can’t seem to get it to work with the images being clickable. I would appreciate any assistance or even a referral to a paid version that is able to make the images linkable to another page.

    Thanks

  5. oggi says:

    This is fantastic. Is there an option to not loop the slideshow or loop for a certain number of times? Thank you.

  6. SinCabeza says:

    NIce plugin, but I have some bugs …
    Slider is showing on site, but at the footer area I see all the images scrolled down the page…

  7. Damon says:

    I see it has been asked before, but can the image be clicked onto to link to a page?

    I look forward to your reply!

  8. Rob says:

    Hi There,
    The overlayLeftRight transition is perfect for my project, but I need it to only play once.
    Is there something I can do to turn off repeat?

  9. Alex says:

    Hi, I just wanna ask.. i am using this plugin and i don’t know how to add an anchor tag of every image i have. i want my slide or image be clickable.

  10. Niall says:

    This is a great plugin with lots of features! Will definitely play around with it.

  11. Mavent says:

    Holy crap, people. It’s called an href. I understand not knowing EVERYTHING about html, but you can’t figure out how to attach an href to your image?

    • Karl says:

      Hahaha! You are mean man! LOL

    • Mike says:

      Adding href tags works in version 1 but not 2, I thought it was to do with the pauseOnHover so I set that to false and yet you still can’t link out from the images. Anyone else have this problem

  12. Grateful 4 The Slider says:

    Is it possible to add navigation to this? (i.e. enable left and right arrows to go to next slide, or back to one) If so, can you kindly let me know what I need to do in order to enable that function? Thanks!

  13. jeff says:

    Hello,
    Is it possible to add caption for each picture ?

  14. AndyP says:

    This slider is great. My only problem is that when the page first loads, all the images in the slider flash on the page for a fraction of a second before the slider loads. How can I hide the images until the page fully loads?

    Thanks

  15. Mike says:

    I tried adding a href tags for my images to make them clickable, but it doesn’t work. Any suggestions?

  16. Matt says:

    I just upgraded to version 2. The reason why I was still using v1.2 is that I never accessed this site until a few days back. Anyway, it works fine, even among the other javascripts that were included in the site. The only thing blocking the script at that time was the FireFox add-on AdBlocker. Once I disabled it, everything went fine.

  17. Marius says:

    Is it possible to attach links to the pictures? No i see a mouseover effect wich will make the click on a link not possible…

  18. Herb says:

    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?

  19. Robert says:

    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…

  20. Dennis says:

    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

  21. Testosterone is Vital for Sexual HealthWhile pharmaceutical companies encourage gentlemen to pursue products like farmacia on line and Cialis.
    It seems to be larger, too.

  22. Beth says:

    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?

  23. Richard says:

    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

  24. jiya says:

    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?

  25. Dorothy says:

    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!

Trackbacks/Pingbacks

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>