Views Carousel

On this week's Mustardseed Media Podcast, Bob shows off another module commissioned by Mustardseed. It's the Views Carousel Module for Drupal 6 (and Views 2). This module is a cool way to spice up your site without having to write any custom javascript. Also, don't forget, this can be used on more than just images...it can show any data that Views can spit out in a carousel format!

You rock and so does Innovating Tomorrow. I'm excited to try this out, now.
Very Cool! Thanks! You guys are awesome!
Is there a way to set it up so the smaller images in carousel either link to the larger images or can have a javascript setup that shows the image in its original size?
Hey Bob, this whole Drupal thing you got going on...envision, commission, release, tutor...sure works out well for us. Thanks! -NP
@Joe: Yeah, you could interface this with Lightbox 2, for sure. You'd have to custom theme the view to add the proper lightbox tags, but it's definitely doable.
Hey Bob, I was going to post this over at G & G, but I think one of your video tutorials would be more helpful than a G & G episode. It sure would be great to run through a technique for accomplishing image galleries with Lightbox, Shadowbox, etc with Drupal. Blessings, Anthony Pero
thanks for the module sponsor and showing this podcast. theming the block could be a challenge. could you post the css you created in the podcast.
Hello Great site and great tutorials but I have one very important question, how make carousel or tabs with something blocks instead images? You have 9 images I have 9 block and want put this block to carousel. How to make? Please answer. Thank You
Cool tutorial.I think the same think is used by Acquia team.Wish you all the best for rest of the cool modules.
Does this modual have the ability to add text with the images? I'm in need of something like that includes title, teaser/sub title and a more lengthy description. Will this work or do I need to keep looking for something else? I'm a Drupal virgin so bear with me as I learn this thing. :) Thanks!
Awesome tutorial - I tend to shy away from taking the time to load and watch video tutorials, but this one was straight and to the point and extremely helpful. It was also really clean, and I liked the picture in picture... helped keep my attention instead of just listening to a boring voice like so many of these things have.
Thanks for your engagement, will try it soon
Just wanted to say your video on using Views 2 was just what I need to get started using Views. Great site and podcast, the best Drupal stuff I've found
I tested this module, but instead of just images I included node title and vocabulary term to be displayed. The result is that in IE it doesn't display the image, but shows the node title and term. In Firefox and Chrome, it displays the images without the title and term. Did you also encounter this? Can you give some tips? Thanks.
It works fine in IE, FF, and Chrome. Can you give tips on how to set all images to the same size the EASY way?
Hi, Thanks a lot for the plugin AND podcast, it helped me! I've more or less succesfully used the plugin but I can't get it to work when I add a sorting to my view. It doesn't matter if it's 'random', 'by date' or whatever. Each time I use sorting my carousel renders some of the items like they are blank. It's very weird since I'm able to see that all my items do have content because the jQuery loads up a bit slow. How can this be? Works just fine when I'm not using any sorting. An example is available here: http://danskdynamit.com/tivoli (likely to get deleted some time tho). Thanks!
My Views Carousel shows only 1 image in the block. Don't know what's wrong. Can someone help please? Thanks Kshipra
Since a few people have had particular problems with this module (which most users aren't having), I recommend going over and filing an issue in the views rotator issue queue. None of the issues listed here are being seen by most people using the module, so please describe your exact problem as a support request there and hopefully we can help you iron them out (it's most likely a problem in your setup, not the module itself). I prefer not to have the comments here be an issue queue since it's more helpful to keep all the issues in the same place (on drupal.org) Thanks for watching!
It's probably worth mentioning that you need an extra CSS style to get rid of the
  • formatting (bullets, backgrounds, padding, etc) inherited from your theme I used #your-id-here ul li{list-style-type: none; background: none; padding: 0; border: none; margin: 0;} and for some reason I had to get rid of a border around jcarousel-item #your-id-here .jcarousel-item {width: auto; height: 100px; border: none; }
  • Your Podcasts are amazing...I just stumbled upon your Podcast and am working on getting caught up to all of them. One of my Drupal sites is heavily related to events. Could you have a cck node_reference field on you images that refers to event nodes and then have a carousel of images on each separate event node that would only show images relating to that event? What would you need to accomplish this? Panels? or just some fancy php code (which I'm not good with).
    Is it true that this approach doesn't work with pictures uploaded via the Image module? I can build a View Carousel of Image nodes, but can't seem to get at the image itself as a field.
    Coincidentally, I was looking a module to do this. Thanks a lot, is a great module.
    Is it possible to link the image to another page on or off of your site?
    Although this is very good and I am using it, it's not strictly a carousel and doesn't do the effect I was expecting. I have thought that when you get to the end and click on the Next link then it wouldn't scroll back to the first image, but just roll through to the first one again. At the moment, it's a bit like a fairground carousel ride with a stopper. The ride goes almost 360 degrees round, but just as it's about to do a complete lap it goes in reverse very quickly and starts again... Any plans for it to loop around properly? Thanks
    Does the pager above the carousel do anything? It seems a vestigial feature of something else ... or maybe it's just broken.
    Hi all Thanks to Bob for this great video - I've got the viewscarousel all set up nicely on my site. My only problem is with theming - I've watched video several times but have one major stumbling block. On the video Bob uses some keyboard shortcut to come up with the class for the viewscarousel on his site. I have no idea how he did this in firebug and have tried all the copy and pastes that are there and keyboard shortcuts. #block-views-dog_gallery-block_1 On my site I have the following but I can't work out what id to use in the css to identify the part to theme. I have tried variations on... #block-views-homes_for_sale-block_1 .jcarousel-container-horizontal {width:560px;} Can anyone point me in the right direction on how to work out the correct id to put in the style.css file? I've spent the best part of a couple of days watching different tutorials and stuff but am still at a loss. Kevan
    Hi all Thanks to Bob for this great video - I've got the viewscarousel all set up nicely on my site. My only problem is with theming - I've watched video several times but have one major stumbling block. On the video Bob uses some keyboard shortcut to come up with the class for the viewscarousel on his site. I have no idea how he did this in firebug and have tried all the copy and pastes that are there and keyboard shortcuts. #block-views-dog_gallery-block_1 On my site I have the following but I can't work out what id to use in the css to identify the part to theme. div class="view view-homes-for-sale view-id-homes_for_sale view-display-id-block_1 view-dom-id-3" I have tried variations on... #block-views-homes_for_sale-block_1 .jcarousel-container-horizontal {width:560px;} Can anyone point me in the right direction on how to work out the correct id to put in the style.css file? I've spent the best part of a couple of days watching different tutorials and stuff but am still at a loss. Kevan
    thanks for this great tutorial and module! maybe someone could explain how to get this to work with a lightbox. also dealing with the problem of small images in the carousel opening big in the lightbox. thanks, marcel
    I have used this great screencast on my multilang website, on the english part it plays great, but on the hebrew version the pictures inside the carousel are moved to the wrong side(with autoscroll), so instead to see the next pixtures I see blank. In RTL the left style attribute is on the right of the page... Any idea to correct this behavior ?
    To help to more understand the bug: Here english version LTR without the bug: http://web.3u4u.dyndns.biz:8000/rimonim/node/23 And same page in hebrew RTL with the bug: http://web.3u4u.dyndns.biz:8000/rimonim/he/node/23 Thanks to have a look to this bug...
    Yes, I dig Views Carousel; just checking on future releases. Still in development?
    Hello. In the node I have created, there are four different fields that regulate the insertion of the images. The number of values is set on unlimited, given that I won't be able to predict the exact number of images I will have to insert in each field. How can I manage the visualization of the images inserted in the fields using Carousel Views? An how can I integrate Carousel Views with Lightbox? Thank you very much. Tiziano
    To style the carousel, find the appropriate "skin.css" depending on which template you choose, ie. \sites\all\modules\jcarousel\jcarousel\skins\tango\skin.css - edits this CSS, not the main theme template as show in the video.
    A patch has been provided for the new version of Views carousel which uses the jcarousel module: http://drupal.org/node/462370
    Thanks for the great video and for developing this module. I'd like to implement something similar to what you have on Twoshirts.org. A carousel that displays a single image at a time but also has transparent text on it too. Did you guys use Views Carousel to implement this and if so can you give me a few hints on how you did it? It is similar to a very popular module in Wordpres, the dynamic content gallery --- http://www.studiograsshopper.ch/dynamic-content-gallery-mu-configuration/ Cheers Richard Boulder, Co
    There's a comment from February 28th asking about using the Carousel with standard image nodes i.e. ones created using the image module and image import. I'm having the same problem and would love some ideas. I have hundreds of image nodes and would really like to make use of the carousel. However the image nodes will display only as "node" in Views.. not "Fields" and Carousel doesn't seem to cope with the node view.. which is hardly surprising. Any ideas?
    On of the best Tutorials i have ever seen. thank you! awesome! I appreciate your work! I will have a try on it.
    thanks man, i just like to extend my appreciation on your work. Great to have you as a mentor.. Well i consider you as a mentor.. take care guys
    Thank you for the awesome tutorials...You guys truly rock. I was able to get the Views Carousel in only a few minutes....Keep the tutorials coming! Peace, H.
    Thanks Mr... Great video.
    Thanks a lot bob, great screencast. I was a Asp.net developer... but now working on drupal and enjoying it.. keep going with ur help.. Thanks
    Very nicely done, Very well presented. Should be very popular.
    Hello, Firstofall, thanks for the great podcasts for Drupal. You are providing the best of the drupal tutorials. I am wondering about the method to display one item from many categories using Views, for example: I have Events, News, Feeds, Blogs.. I want to display tabbed panel on homepage that display 5 items from each category. Carousel used to display different items from each category, and I can switch between categories using the tabs! I found many websites they used this but I don't know how they done it! Thanks!
    Hi, thank you for the work you've done on this and the tutorial! Even though I'm a complete Drupal newbie I was able to get it working in a few hours. I is scrolling vertically using imagecache-sized thumbnails and inserts titles below each image. Also, I have it set up on a number of gallery pages each using the same carousel but showing different images, using an argument in the block. The thumbnails in the carousel link to a detail page. I have two questions. 1. The last title in the carousel (which is under the last image) gets cut off. I've adjusted the CSS for everything I can see that would be relevant, from Firebug and from the carousel tango theme. I don't think it's a CSS issue, I think it's a javascript issue. What would I have to adjust to get the title of the image to show up.... I just need another 10pixels below the last image... 2. Ideally I'd like the thumbnail links from the carousel to use ajax to insert that large detail image into the main content area. But I can't write php or javascript code, although i can certainly cut and paste it in places... But if I can't get that to happen, then I'd like the detail page have the carousel also (for that particular gallery) so that you can click on another thumbnail and go to another detail page... But I'm a drupal newbie and I can't figure out how to make that happen... seems like it would be easy, but it's proving very difficult.
    I just want to say Thank You! for this great module. Excellent work! I'm a DotNetNuke guy who was 'forced' into using drupal... and I'm HOOKED! I've used this on my site at www.mawaa.org (Mid-Atlantic Wheelchair Athletic Association) using FeedAPI to pull RSS from Flickr. Used FeedAPI Mapper to map the picture URL to a node. Then used Views Carousel to pull it all together. Now my users post pics to Flickr and the views carousel automatically updates itself using RSS! Slick as snot! @Elena can you explain how you pulled off that block argument more? I'd like to implement it. Also, couldn't you use panel page and place an I-frame into one of the panels that links to the node? just a thought and haven't tested.
    Thank you, Bob! Your video tutorial was excellent, and I now have 99% of what I was after. Unfortunately, my carousel block of images does not show up for anonymous users - I am using panels for a custom home page. I am not using any node access modules, and I have investigated my permissions, views, and panels - to no avail. Any suggestions?
    Thanks for the great startup tutorial. Its so much easier to get started with a module when something like this is available. I really appreciate you taking the time to create this video. -Jeff
    The effect I'm trying to get is to 1- have the carousel at the bottom section of a picture 2- have the large image of the current carousel item display as the picture 3- have the current image in the carousel be highlighted slightly differently A similar example to what I'd like is at http://europasports.com/ ... where the tab also changes as the picture rotates through. Will carousel do that? Bobby
    This taught me not only how to use the Carousel but Views and CCK too. Awesome!! Cheers
    While this video has helped me somewhat it is NOT a good substitute for real documentation. The entire Drupal project is almost completely devoid of documentation that would be of any use to anyone who is just starting out. SOME of it would be just about good enough as a reference for someone who just needed a reminder but ONLY JUST! It would also have been better if you had not zoomed in on where you were working in various places within the video because you totally destroyed all context on what you were doing and where. I have NO idea where you went to go edit your CSS or what file you were editing or where it is in the file system or how you even found the items you added to it. I have found a css item called .jcarousel-container-horizontal but every time i edit it something restores the previous values behind my back and my container shrinks back down to its original size. Also, by using firegug and wizzing your mouse pointer all over the map clicking things willy nilly you have made it impossible for me to follow """E X A C T L Y""" what you did and where you did it. So now im left totally clueless about how to make this module usable. I have a carousel in my page but it does not look OR perform right. I have 3 images with text behind them which i dont want, followed by a blank space for an image which also shows this text, followed by 30 or so images followed by 4 more blanks.. .. . You obviously did something somewhere in that Gordian knot cluster &$(^ menu system that made it all just work. Whish your video had not glossed over 99% of the details needed to get this working :/