Carousel Gallery (jQuery) for WordPress [Updated January 2010]

This plugin builds on the builtin WordPress gallery, and replaces any gallery inserted using the gallery tag with a neat jQuery powered carousel. By carousel it means you can browse through all the pictures in the gallery and they’ll slide from the right to the left and seamlessly start over at the end.

The plugin uses jQuery and a jQuery plugin called jCarousel.

Download

Download the plugin from the WordPress repository

Further Development

Due to my busy schedule, development on this plugin is intermittant and not quite as often as it deserves. Fortunately, the plugin is open source. Are you an experienced plugin developer willing to lend some love, then you’re welcome to get co-ownership of this plugin. Let me know.

[Update]: Added an IE “loop bug” fix. Thanks to Luqman Amjad.

Responses to “Carousel Gallery (jQuery) for WordPress [Updated January 2010]”

  1. Alex says:

    Hi there Joen

    I love the plugin, it’s great and it’s working fine on WP 2.9.1, spent sometime looking for a solution like this.

    I do have a question though, I’m a newbie at both Jquery & WordPress, but I’d like to have the thumbnails above the main image area (as opposed to the bottom). I have tried a few things like trying to edit the CSS, but I’m still off the mark.

    Could you offer any suggestions? my site is http://www.stanuga.net

    Alex

    • Josh says:

      I would also like to be able to have the Links and Thumbnails displayed above the image. How could i do this without having to use CSS positioning?

      Cheers

  2. Luqman Amjad says:

    please see http://pastie.org/794947 for the IE6/7 loop bug fix!

  3. Joi says:

    How do I adjust the width of the main image?

  4. Gavin says:

    Hey great plugin – works well.

    Did anyone figure out how to center it… I have got the thumbnails centering but the main image is still on the left.

    Any help would be much appreciated.

  5. Jae says:

    Hi! Awesome and simple plugin, thanks! One question…

    It seems like the main image title has a bullet before it, how do I remove that?

    http://stilettomediagroup.com/wordpress-design/wordpress-samples/

    Thanks again!

    -Jae

  6. Devin Walker says:

    Isn’t this a slider not a carousel? Sweet website though…

  7. jarrad says:

    Hey, this plugin is perfect! i have just wondering, how i could call a function to state what number image the slide is up to, for example ” 1/4 ”
    ive been trying a few things but i havent had any luck, im still trying to get my head around your code. any help would be greatly appreciated!

    thanks heaps.

  8. Augusto says:

    Loved your tips about jquery

  9. Jonah says:

    Hi there, thanks so much for the plugin, it works great! How can I make it so clicking on the large image uses a lightbox script instead of moving to the next slide? I’ve been able to remove the click function but I cannot get it to play with any lightbox script. Can you please offer some insight as to how to get this to work?

    Thanks,
    Jonah

  10. fb says:

    Love this plugin well done only one problem I cannot get this to validate…..

    Any suggestions.. Anybody else experiencing this?

  11. Eric says:

    The plug-in works great. However, it breaks Lightbox 2. With both plug-ins activated, Carousel works fine but lightbox doesn’t. Once I deactivate Carousel, Lightbox works.

    Is there any version of Lightbox/Thickbox or similar plug-in compatible with Carousel?

  12. Tricia Okin says:

    Hey there, first off thanks a ton for making this plug-in. I’m the issue as Joi up there – http://noscope.com/journal/2009/03/carousel-gallery-jquery-for-wordpress/comment-page-3#comment-101907

    I’m having a problem changing the width of the main image. No matter what, it keeps loading the medium size of 225 x 300 even though I changed that within WordPress’ settings. Is there a way around this at all? It would be much appreciated to have a solution for this. Thanks again for your hard work.

  13. Mick says:

    Hi there!

    I really like the plugin and the way it nicely works with the gallery build in wordpress.

    But I do experience one thing.. If I put a link somewhere in the description, then it somehow functions as a button instead of going to the url.. Any help?

    Mick

  14. Hey there,

    For whatever reason this doesn’t seem to work with jCarousel’s autoscrolling functionality. I’ve tried adding the ‘auto: x’ parameter but it doesn’t seem to have any effect and I can’t figure out why.

    Thanks for your efforts!

  15. Ah, figured it out, it’s because you don’t load the items in the list beforehand.

  16. Gavin says:

    Hi There,

    This is one of the best plug-ins I have used for WordPress :-) thank you.

    I was wondering how to move the title to below the prev | next. I have been tinkering with the php file with no success.

    Any helped would be much appreciated.

    Best,
    Gav

    • Chandra says:

      Gavin,

      Hi Gavin,

      Were you ever able to figure out how to move the title in this gallery?

      I see that this was a while ago, but if you were successful I would really appreciate knowing how you did it.

      Thanks!

  17. Tallulah says:

    This plugin is working great, thanks!

    Is there any way I can order the carousel images by the name of the image file I have uploaded? Right now, it seems like it is displaying the images in the order I have uploaded them.

    Thanks so much in advance.

  18. Tallulah says:

    By the way, I tried using [gallery orderby="post_title"]

  19. Tallulah says:

    I got it to work! [gallery orderby="title"]

  20. layla says:

    hey there!

    This plugin looks awesome though for some reason i can’t seem to be able to get it to work properly… it displays the images but doesnt display the top rotating image… and even if i press on the images doesn’t seem to respond… any idea whats the story? what am i doing wrong?

  21. http://tinyurl.com/ausyhs
    Carousel Gallery (jQuery) for WordPress [Updated January 2010] (Noscope)
    (NOSCOPE.COM)

  22. tobi says:

    hi – a very nice plugin! excellent work! but i have one problem. on a single page the plugin works perferct, but on my start page the posts toggle (click to hide/show the entry) and if i put the gallery into a post i get this error message (browser alert):

    jCarousel: No width/height set for items. This will cause an infinite loop. Aborting…

    is there a way to fix this?

    thanks a lot!
    tobi

  23. Charlie says:

    For those that can’t get this to work with non default themes, insert this wp_head(); (in php tags) into your themes header file just before the </head> tag.

    Great plugin!

  24. tobi says:

    hey, i have another question: is there a way to combine this with nextgen gallery. the thing is, i want to manage my galleries (like nextgen does) – so that every gallery gets an id and i can insert something like this [gallery id=4] into a post/entry.

    is that possible?

    thanks a lot
    tobi

  25. Arrgh broken it somehow and keep getting this error: Warning: Cannot modify header information – headers already sent by (output started at /public_html/wp-content/plugins/carousel-gallery-jquery/carousel-gallery-jquery.php:1169)

    Any advice?

  26. steno says:

    having issues with main image showing in safari/chrome (thumbnails are showing) – the source code shows the [li] tag is empty :(

  27. RobertGall says:

    well first of all im happy for the great plugin!!!

    REALLY APRICHIATE THET YOU DID TAKE THE TIME AND EFFORT TO MAKE IT

    I have a website already where i use jCaroussel but is not WP based..
    Now im trying to make a replica of my old website with wp as Cms.. so ewerithing is fine except 1 thing the ..

    class=’carousel-controls jcarousel-control_”

    i know should be possible to instead of displaying all thumbnails witch slows my browser down over 100 images …
    i just van use a dot which is an html symbol &#8226 and show witch slide is .active {}

    the problem if i get it right is with this part of the script in / incarousel-gallery-jquery.php / file…

    ——————————————————————————————————————————————
    /**
    * Add thumbnail navigation
    */
    $output .= “ID.”‘>\n”;
    $n = 1;

    if (get_option(‘cgj_thumbnail_size’) && get_option(‘cgj_thumbnail_size’) != “”) {
    $thumb_size = array(get_option(‘cgj_thumbnail_size’), get_option(‘cgj_thumbnail_size’));
    } else {
    $thumb_size = ‘thumbnail’;
    }

    foreach ( $attachments as $id => $attachment ) {
    $link = wp_get_attachment_link($id, $size, true);

    $output .= “ID.”\”>”.$n.”" . wp_get_attachment_image( $id, $thumb_size ) . “•\n”;
    $n++;

    }
    $output .= ”;

    /**
    * End
    ———————————————————————————————————————————————-
    if i get this right again im new to this but i try :) .. so :

    wp_get_attachment_image( $id, $thumb_size ) . this part.. from the above code.?

    So my question really is how to change it so i and up with just a dot but still will show me where is the slide is at the moment i mean the dot will be shown the .active class..

    i hope it made all sence..
    I SPENT 3 DAYS WITH THIS but couldn’t figure it out..

    ps:sorry for the bad English
    i would really appreciate your help or maybe the code snippet…
    thanx
    best regards
    rg

  28. RobertGall says:

    also : wrap: ‘circular’, dos not work with : wrap: ‘both’, is it any special reason why?

    thanx!

  29. michael says:

    Hi! great plugin!

    Is it possible to have the Carousel Gallery without the circular?

    thanx !

  30. Gaurav Kumar says:

    This plugins upload all the images at the same time , It effects on the page load time. Is it possible to upload one large image at one time?

    • Joen says:

      This plugins upload all the images at the same time , It effects on the page load time. Is it possible to upload one large image at one time?

      I think you’re referring to Image Symlinks, and I’ve noted that on the “ToDo list”. The solution for now, is to upload no more than 3 or four at a time.

  31. andi says:

    Hello, thanks for your work!

    I’ve got one question though: is it possible to have the respectively shown picture link to its (bigger) original as it is done with the “vanilla” (that is unchanged/built-in) gallery? It would be great to have the rotation done by the links “next/previous” and the possibility to get to the original directly.

    Thanks in advance!

  32. Kezia says:

    Great plugin thanks a lot it was just what I needed. I had a couple of ideas of extensions you may want to think about when you have time work on it. It would be great to have an option to show the thumbnails or not in the settings screen. Also wondered if there could be an option to show ‘Image 1 of 13′ type thing :)

  33. DMD says:

    Hi, great plugin, I’ve used it one a couple of sites now. I’m currently trying to use on wordpress 3.1 and getting this error.

    jCarousel: No width/height set for items. This will cause an infinite loop. Aborting…

    This despite having set the width and height for items.

    Anyone know why this is?

  34. http://tinyurl.com/ausyhs
    Carousel Gallery (jQuery) for WordPress [Updated January 2010] (Noscope)

  35. Rich says:

    This sounds like a fantastic plugin… but it doesn’t seem to work. When I click on the images it just takes me to their page, the gallery function doesn’t work at all.

    • Joen says:

      This sounds like a fantastic plugin… but it doesn’t seem to work. When I click on the images it just takes me to their page, the gallery function doesn’t work at all.

      Uhm. Oops.

      Looks like the theme codebase I just switched to overrides the features of the carousel gallery plugin. I’ve added that to my theme fix list.

      The plugin should work fine for you. Try it. Also, there are screenshots here: http://wordpress.org/extend/plugins/carousel-gallery-jquery/screenshots/

  36. Chandra says:

    Hey there,

    Is it possible to move the cgj_title to appear below the feature image rather than above.

    I have tried to move things around in the php file with no success.

    Please let me know if you can help. Thanks!

    • Joen says:

      Chandra,

      I haven’t worked in this for a while, so I might be wrong. But I’m pretty sure you can move the title in CSS only.

      • Chandra says:

        Joen,

        Hi Joen,

        Thanks for your reply! I have tried moving items around in both css files now. carousel-gallery-jquery.css and carousel.css

        Still can’t get it to move. I would really appreciate your help with this, I’m sure its such a easy change but I am having no luck.

        Please let me know if you have any other suggestions.

        Thanks!

  37. Hi Joen,
    using the carrousel for the second time, and strangly this time I can’t find where to get rid of the img-titles. I went through both CSS and did’nt find where to fix that. I would greatly appreciate a hint. And thanks for this carrousel, I find it the best so far, all the others seemed terribly complicated.
    Grüße aus Frankfurt
    Mariam

  38. did I make a mistake and did my message not go through? am trying desperately to get rid of the img titles on the website above. could you help?
    greetings
    mariam

  39. LYKC says:

    Great plugin! Works a treat. I edited the CSS and JS files to accommodate my design at http://www.thebridalmakeupartist.co.uk/gallery/bridal/ Thanks again!

  40. Merlin Mason says:

    Is there anyway to get two of these running on one page?

    I’m trying to use the to pull in a couple of galleries to the homepage.

    Any help would be very appreciated! Thanks

  41. Spelen says:

    Cool plugin, works like a train… Thanks for sharing!

  42. Ginny says:

    Awesome plugin – just what I need.

    My only problem is that the big image isn’t visible – just thumbnails. Been trying to run down any conflicts, but no dice. All other plugins are deactivated and the plugin’s jquery includes seem to be pointing to the right place.

    Any suggestions? Thanks!

  43. Dany says:

    I have installad the plugin jcarousel in my wordpress installation.

    Where can I find code to realize the example in this page ?
    small image at the bottom e big image above sliding ?

    Thank you in advance

  44. Ben Linford says:

    Awesome work.
    Thanks for this.

  45. Garth says:

    Hello,

    Is it possible to move the thumbnails to the right of the main image? and possible have 2 or 3 columns..

    Thanks

  46. amanda says:

    Hello,
    Is it possible to get the thumbnails to the right of the actual image?
    instead of below…

    best
    amanda

  47. riasaursurex says:

    Along w/ a few others who have asked, I’d like to not use wrap: ‘circular’, but if you change it in the .php file to one of the other options, it doesn’t work properly then. Does anyone have a solution to this?? Please help. Thanks

Reply