jQuery Panel Gallery Plugin 1.2
I’m happy to announce the release of version 1.2. This version adds the ability to pause the transitions simply by placing your mouse over the image as well as specify an amount of overlap in terms of the time of the section transitions.
The best part of this plugin is that not one image needs to be sliced or edited to work with it. 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 – now for each image individually. 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.
Download
Download jquery.panelgallery-1_2.js
What’s So Great About this Plugin?
- No slicing or editing of the images is needed
- It’s just 8 KB
- Each image can have its own fade direction
- The gallery can be set to pause on mouseover (new)
- Section transition timing can be set to overlap (new)
- 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-1_1.js"></script> <script type="text/javascript"> $(function(){ $('#container').panelGallery(); }); </script>
Finally, while you don’t have to specify any directions for the fade (the default direction is left to right), you can give each image it’s own direction. To do this, add the name attribute to the image and specify either (lr, rl, tb, or bt). For example:
<img src="image2.jpg" alt="image 2" name="bt" 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:
- 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)
- overlap – the percentage of the sectionTransitionDelay option a section should wait before beginning (0 to 1). For example, if the sectionTransitionDelay is 1000 milliseconds and the overlap is set to .75, then at 750 milliseconds the next section transitions will begin. If you want a section to fully complete before the next section begins, set this to 1. (default: .75)
- enablePause – whether or not to pause the animations when the mouse is placed over an image (default 1).
- repeat – whether to endlessly repeat the series of images (default: true)
- direction – the default 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!
Quick question – if one were to set “sections:1,” would that allow for fading the the full images between one another?
@beginner
Yes. If you change sections to 1 just be sure to also set the overlap to 1 otherwise you may get a strange flicker. The effect is a nice subtly fade from one image to another.
Perfect, exactly what I need. Thanks for the plugins!
Good!
Can I put demo in my site http://www.belisma.it?
Cool plugin. The gallery looks like a video
So can you make more effect on changing photo from one to another? I’d like some effect in Windows Movie Maker. If it can be done, that’s great. We can show our gallery as a “real” video slideshow.
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
[...] jQuery Panel Gallery Plugin allows you to display a slideshow of images using a special effect that divides each image into multiple panels and fades them one after another to reveal the next image. You don’t need to slice your image to work with this plugin, it handles everything itself. Plugin is fairly easy to implement and uses very simple markup. [...]
Your scripts are fantastic, I have written down ideas on paper for my new website but struggled implementing them since I haven’t coded one line of code in 7 years and when I went looking for already made jquery scripts I could not believe that this panel transition effect for images was available ^_^ dammit I cannot wait to finish the graphics and implement it on parts of my site and get it ready before then end of the year!!! (not to mention the multiple other wonderful scripts on here I’m sure I will find a way to use)
Hi there-
I’ve been using this plugin as v1.1 for awhile and thought I would check out v1.2. There is a bug in the new version – when cross-fading between two images, the fade will skip the last 20% or so. This introduces a weird, jumping sensation into an otherwise smooth transition. Compare it to the v1.1 side-by-side and youll see exactly what Im talking about.
I did settings of:
sections:1,
imageTransitionDelay :2500,
startDelay:2500,
sectionTransitionDelay : 2000,
repeat:true
The effect was present in Firefox 3.5, Chrome and Safari4. Otherwise, this a great little jquery plugin – I love its small size and versatility.
@john
Try setting the overlap property. Something like .95 should help.
overlap: .95I am new to Javascript and jQuery and have found trying to find out how to do a simple animated slideshow with fades rather frustrating. Your plug-in changed that. Simple, yet visually elegant. One question, when I test using Firefox I don’t get any of the section effects as I do using IE. Instead, Firefox treats the slideshow as if I am using one section.
Donna
@Donna Leigh Bliss
Are you seeing the problem in our demo, your own installation, or both?
Only in my installation.
thanks for your good work
Might I suggest you adding something like below [into your js] to stop mouse flickering in IE6
//– flickering cursor for IE6 but not IE7, Moz, Safari, Opera…
if (typeof document.body.style.maxHeight == “undefined”) {
try {
document.execCommand(‘BackgroundImageCache’, false, true);
} catch(e) { /* unless it’s not IE6… */ }
} // if
@scott
Nice addition but since I’m anti-IE6 I won’t be adding this to compensate for that dinosaur. Yes people still use it, but that doesn’t mean that we should continue to encourage them to do so.
Hehe
well good on you – my sentiment is with you
not sure I could get away with that though
Cheers
Can anyone tell me why the PanelGallery on my web site at http://www.janfield.com/ does not work in IE6 (and possibly IE7)? The code does not work at all, and all the images show at once all the way down the page, covering up the text.
I realize IE6 is going out, but several of my customers apparently still use it. *shrug* Can’t lose potential business because the site doesn’t work properly!
Hilton,
I’m having the same problem. The pic gallery works beautifully on Firefox and Safari, but IE displays all the pictures in a vertical line, covering the text on the page.
Were you able to find a solution?
IE 7 and 8 work fine. I don’t know what you guys are doing.
I don’t have experience in this field. I just downloaded jquery into the site as instructed and copied the plug-ins within the head tag as instructed. From the get go it worked fine with FIrefox and Safari, but running this on a PC with IE, it just doesn’t work. Instead of the pictures sliding one at a time in the container, they just display statically one under the other and covering the rest of the page. I’m going to try to look for a different way of displaying the pics and hope it goes ok with IE.
Hello, and thank you for such a gorgeous little plugin. Delightful!
Quick question:
Using the plugin in Firefox 3.5.8 OS X (re your article on mac’s – how about swapping a bit of mac testing for a bit of pc?!) All works great, but if I move the cursor over the gallery div, it turns the the hourglass and the transitions stop. A slightly annoying – can I do anything about it?
Ok, one more question. Is it possible to use this plugin with links on the images?
Many thanks for your great work. T
Ok – please ignore the mouse over bit – I was tied and didn’t read your very clear description of the new “Pause” function. Apologies!
Is there any plans for basic caption support, using title attributes or similar? Would love to be able so style a semitransparent white caption layer on top of each image but failed to when I first tried (the license prohibits me from doing it too, no?)
cheers,
/Anton
Hm, guess I could make the caption as a totally separate div this time, and populate it with the caption using javascript. But is there a callback for when each image is loaded that I can use?
Hmmm, captions seem like an interesting idea for this plugin. I’ll see what it would take to add that as an option. The license for this plugin should allow you to change it as long as you ask for permission when redistributing it.