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.
This right above is a demo. Take it for a spin!
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.
- Through The Looking Glass, Or How My Great Macbook Adventure Was All Too Brief
- Carousel Gallery (jQuery) for WordPress [Updated January 2010]
- It's Plugin Update Day!
- Vanilla CSS Un-Reset
I’m afraid it’s highly unlikely that I’ll get it fixed in the next few weeks. I’m so busy these days. Sorry.
ok. No problem. Thanks though. If anyone does have or finds a solution could they let me know? Cheers
I love this plug-in! It looks amazing, is quick to load, and easy to use. I was wondering if there is a way to make the title/caption font smaller? And also a way for the thumbnails to line up neatly (already tried changing the # of columns but it didn’t matter)?
Thanks so much!
Yes, using CSS.
.caption { font-size: 7pt; } .cgj_title { font-size: 12pt; }There’s also CSS to line up the thumbnails neatly, but that’s more than I can remember off the top of my head! Sorry.
Is it possible to make the thumbnail border go active onClick instead of waiting for the image to scroll across?
Also, it it possible to disable the Previous link when on the first image, and the Next link when on the last? I`ve seen this in other jCarousel galleries.
Hey Joen,
Great plugin – thanks for creating it. I just wanted to report the same issue that @mark posted recently.
Has anyone found a solution to this?
hi joen
this plugin is fantastic. one question, where can i hook in to make the Forward/Previous links images instead of that text? i know i can make the font white or the size small, but i’d like an image if possible to ouput. Thanks so much!
You have to use CSS. For instance:
a.cgj_prev { display: block; text-indent: -9999px; overflow: hidden; width: 100px; height: 70px; background: url("images/prev_icon_100x70.gif") no-repeat left top; }This is wonderful!
But where can I download this plugin?
Most embarrassing, I’ve accidentally deleted the download link in a recent post update. It’s now restored.
Thank you very much Joen :)
sorry men, can u said to me how make that work on wordpress. cuz, im installed but i dont know how meka a post the pictures whith this carucel FX.. tks u !
I really like your plugin, the test example looks great.
I’m having some trouble with it on my end, however. I have installed it, and the thumbnail images and navigational text are showing up, but the full image is not. Any ideas?
Hi,
u have made a nice plugin, but some questions,
is there a possibility to have the pictures preloaded?
I tryed it with the discription from jCarousel, now they are preloaded,
but the navigation does not work. Any ideas?
The second question is, caus i use it without space between the pictures
if u press the last picture, while the first is shown, there is a space between the to
pictures in the animation. Do u know a possibility to have no space between there, or
is it possible to have the second picture in between when navigating between the first and
the last one?
Greetings and thanks a lot
H.Rahn
Nice plug-in! I had never actually made use of the gallery short code, but this plug-in makes it worth it. Nice job.
Still no solution to the IE bug on this carousel?
A truly great plugin, hopefully it will be fixed soon..
I saw some other java carousel just putting the images 10 times after one another, kind of tricking it to look like its going round and round, not really a good solution though..
Hey,
GREAT plugin.
My question:
I noticed the images are formatted to certain height and width. I know the thumbnails are adjustable in the settings panel but how about the main image? Is there any way to change that?
You should have searched the other comments for this one..
Here’s the solution anyways..
The image size is based upon the medium size in the media settings. When you change it you’re gonna have to re-post your post for the change to take effect.
For now, you can’t specify a unique gallery width and height.
And so, the width and height of each image is set according to what you’ve entered in the Settings > Media sizes section of WordPress. (I think the medium size is being used).
Please note that should you change these media sizes, you need to delete the images in your gallery, and upload anew.
Nice timing Joen, but i was 2 minutes faster! #yey :)
Thanks guys!
When I move the image caption left or right it gets cutoff when it hits the outside of the div. I know it’s a width or overflow issue but I don’t know where to address it. Any ideas?
When I move the image caption left or right it gets cutoff when I try to move it outside the image’s div. I know it’s a width or overflow issue but I don’t know where to address it. Any ideas?
Got a link to an example?
I’m working on a local server so I can’t provide a link but here’s a screen shot my page with the carousel gallery: http://picasaweb.google.com/lh/photo/aSONySKkB27ZlFMlpRKC0g?feat=directlink
I outlined and color coded the divs using the firefox web developer toolbar so you can see where my photo caption and description get cut off when I try move them.
I figured it out. I had to remove ‘overflow: hidden’ from .jcarousel-list and .jcarousel-clip. Sorry ’bout that.
Awesome. I’m glad you managed to fix it. I’m not sure I could’a helped.
Hi I’m trying to use this plugin inside an iframe and im getting the infinite loop error.
here’s where the script is on this test site:
http://aeki.aekidesign.com/work/print/
if you load it directly (not through the iframe) it works. So, I don’t know where the error is occurring.
http://aeki.aekidesign.com/work/print/specific-project/
If you could help I’d appreciate it, thanks.
SEO Friendly Images is incompatible with this plugin, any way to fix it?
It won’t show the big image when you have both SEO Friendly Images and Carousel Gallery activated.
Joen, as everyone has said, your plugin ROCKS.
I’ve used it on a couple of sites, always loving it (and editing the css/php to suit my needs). I have come across a problem however: when i want the next/previous arrows to be next to the SPANs that choose the thumbnails, it doesn’t work. if i want this:
<< 1 2 3 4 >>
and i just move the next/prev buttons from lines 128 down to 377 (and change the code a bit obviously), everything looks good (and validates, etc), but the actual JQuery functionality is lost. i’m even keeping that jcarousel-scroll div intact. do you know if the next/prev need to be at the place you initiated them? is the post->ID changing (i don’t think so, and i even did something that saves that ID and resuses it below, to no avail) or some other variable changing or being initialized differently up there than below, where you declare #innercontrols?? thanks so much!! bondy
I’ve come back to this issue. I still can’t figure out how to make the width and height work in an iframe.
Click on the top left orange project to see the error message:
http://aeki.aekidesign.com/work/print/
Hi!
this is great plugin,
hi again… rest of my comment was deleted…. :( so here it is again:
any way, i can’t change the size of the main image.
i tried reinstall and reload images, tried the height=800 but nothing work.
also tried the css and php options but couldn’t resolve it.
also trying to to center the main image… any way to to that?
Thanks
haim
I’m not quite sure I’ve understood your question, but I understand you want to move the next prev buttons?
I think you can only do that with CSS. Try either removing the bundled CSS file, or adding your own to the mix. Let me know if it works.
i meant that i want to move the large image of the gallery, not the navigation buttons.
now the main image is stick to left of the screen and i want to center it.
This is a much requested feature, and I should build it into the next version. I think on one of the comment pages, one of the commenters has found a temporary solution.
i read most of the comments.. but i will look again.
for the main image size, couldn’t change this as well. i saw a post where you wrote to some one
to reinstall the plugin and upload again all images… didn’t work for me.
i think this plugin have a lot of potential but it really need some more basic features.
thanks.
Hi, great plugin, I’m looking for the same thing. A carousel for the thumbnails. Thanks.
Great plugin man, been looking for something like this for ages! Thank you!
Only trouble I am having is with the vertical spacing of the images. Cant seem to make the thumbnails appear in their own space, they are coming out on top of each other at the moment. Any idea whats wrong?
Can see here:
http://blog.derestricted.com/2009/10/motocross-des-nations-2009-franciacorta-italy-2/
ok, I kind of got around it by making the thumnail sizes smaller so they dont overlap, but still looking for the css(think thats what I need to change anyway) which sets the vertical spacing of the images…
Hi I really like your plugin, but I’m having trouble with it loading in an iframe.
http://aeki.aekidesign.com/work/print/
if you click on the orange images you get the “jquery no width/height set” error. If you load the frame directly the script works fine. Any help?
first of all, great plugin. thanks a lot
I would like to make the image title link to another page. The problem is that once I include a link, it makes the image slide. I suppose the problem is that the regular link behaviour has been turned of with ‘return false‘. However, after hours of tweaking I can’t find out how to make it work. It’s just too much code for my skill level. Do you any idea how to pull this off?
how can i auto play the images in gallery? any idea ?
Hi! First of all, thanks for sharing such great plugin! But, i’m having some problems with it. Im using WordPress 2.8.6, and thumbnails show perfectly… but the full images won’t. Is there any compatibility bugs with this wp version? Thanks again!
Hi! First of all, thanks for sharing such great plugin! But, i’m having some problems with it. Im using WordPress 2.8.6, and thumbnails show perfectly… but the full images won’t show at all.
Is there any compatibility bugs with this wp version? Thanks again!
Hi!
Sorry to be a pain. I just figured out the exact problem. I’ve tried in different browsers, but Firefox’s error console detects what going on. It says:
Could you please tell me whats wrong? Im working on WP 2.8.6 on localhost (wish I had it online to show you). Please, I wold appreciate a lot your help, since I like a lot your plugin and is just what im needing! Thanks!
Yeah, it sounds like you’re experiencing one of these problems:
Thanks a lot Joen. I figured it! I had the Popup Date Picker function of the CformsII plugin. This made a conflict with jQuery. Just deactivated it and problem is gone. Thanks a lot. Great plugin!!!
FINALLY! A WordPress gallery plugin that does not use Lightbox! I was starting to lose hope, and then I found this. Can’t wait to try it out.