Feed on
Posts
Comments

jQuery Panel Gallery Plugin 1.2

Note: The latest version of the Panel Gallery is available here.

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!

Demos

38 Responses to “jQuery Panel Gallery 1.2 Plugin Released”

  1. beginner says:

    Quick question – if one were to set “sections:1,” would that allow for fading the the full images between one another?

    • admin says:

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

      • Hi,
        I love the smooth visual effect and would like to use this plugin on one of my wordpress sites. Can you tell me or send me a link with information on how to integrate it in wordpress?
        Many thanks in advance and thanks for the plugin!
        Fabian

  2. beginner says:

    Perfect, exactly what I need. Thanks for the plugins! :)

  3. Elena says:

    Good!
    Can I put demo in my site http://www.belisma.it?

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

  5. umun says:

    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

  6. SoulMyst says:

    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)

  7. john says:

    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.

  8. Donna Leigh Bliss says:

    I 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

  9. scott says:

    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

    • admin says:

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

      • scott says:

        Hehe
        well good on you – my sentiment is with you
        not sure I could get away with that though

        Cheers

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

    • Richard Tortora says:

      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?

      • Jason says:

        IE 7 and 8 work fine. I don’t know what you guys are doing.

      • Richard Tortora says:

        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.

  11. Tim Way says:

    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

    • Tim Way says:

      Ok – please ignore the mouse over bit – I was tied and didn’t read your very clear description of the new “Pause” function. Apologies! :)

  12. Anton Andreasson says:

    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

    • Anton Andreasson says:

      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?

    • admin says:

      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.

      • Anton Andreasson says:

        OK. I managed to get captions going by adding a callback to your plugin, and using that to populate a separate div with the alt-text of each image, when animation was completed.

        FYI, I added (on line 25):
        callback : function(){}

        …and then later down (on line 169):
        options.callback();

        Using this I called it with:

        $(‘#gallery’).panelGallery({
        sections:5,
        imageTransitionDelay:4000,
        startDelay:4000,
        sectionTransitionDelay:600,
        repeat:true,
        direction:”rl”,
        callback: function(obj){
        var image = $(“img:visible:last”, obj);
        var text = image.attr(“alt”);
        $(‘#image-info’).html(text);
        }
        });

        Hope that helps those with similar questions/ideas.

        /Anton

  13. Jan says:

    Hi, thanks for great plugin. It is just what I want and it works when I use it on its own.
    But something is wrong, I am sure this is my fault but I have tried to figure it out for so long now without finding the solution… The plugin works fine but has a conflict with my other jquery plugins. For example ; if I add the .panelGallery in the end of my js.site-file the .accordion plugin before it doesnt load anymore. If I take ,panelGallery out of the js.site-file and add it in the webpage before instead, then It wont work unless I take away the link to js.site-file wich I need since my navbar runs with a jquery plugin.
    (I suppose you can not have two “$(function(){” calls – but my problem is: Why can I not add your plugin to my js.site-file with the other jquery plugins without having a conflict?
    (I am in dreamweaver , Safari & Firefox testing)
    Would love to understand what is going on…

    The end of my js.site (wich works fine without the .panelGallery – code):
    $(‘#accordion’).accordion({
    collapsible: true,
    active: false,
    autoHeight: false
    });
    $(‘#picContent’).panelGallery( {
    sections: 1,
    imageTransitionDelay : 40000,
    sectionTransitionDelay : 1000,
    startDelay : 60000,
    repeat:true });
    });

    • Jan says:

      I found out where I was wrong; sorry to have bothered you – I am new to all this as you can see…
      (I had only loaded the files needed for that webpage to work but I now realize I must also include the other js files that are called for in my js.site-file, otherwise the loading gets “stuck”. Maybe there is a way to get around this but my problem is solved at least so I am happy.)
      Apologies, again and Thanks for plugin!

  14. very useful plugin! thanks

  15. jeff says:

    Great stuff.. Noticed one issue. When I images that are 1200 x around 477 pixels I get a gap at the top of the image. When the transition completed the image jumps. I double checked the image sizes and they are all the same size… Any ideas?

  16. Kiril says:

    is there an option to randomize the order of the images?

  17. Elias says:

    is there any beetter way to embed infinite carousel

  18. click says:

    Have you considered including several social bookmarking buttons to these sites. At the very least for youtube.

  19. Юрий says:

    КАК СДЕЛАТЬ ЧТО БЫ КАРТИНКИ ПО ЦЕНТРУ

Trackbacks/Pingbacks

  1. [...] 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. [...]

  2. [...] jQuery Panel Gallery Plugin has a best feature is not one image needs to be sliced or edited to work with it, the script is just 8 KB and each image can have its own fade direction. The demo of this plugin: http://www.catchmyfame.com/jquery/demo/11/ http://www.catchmyfame.com/jquery/demo/11/index2.html [...]

  3. [...] Catch My Fame » jQuery Panel Gallery 1.2 Plugin Released. [...]

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>