Jquery + Drupal + Carousels
I've seen several solutions out there for jQuery-based slideshows and carousels, but the most common one (jCarousel) seems a bit buggy, especially with webkit. There is, in fact, a module to integrate jCarousel into Drupal, which is interesting, given that the jQuery plugin hasn't been updated in a year and is only at version 0.2.3. I've seen this plugin on production sites of some significance, and I wouldn't recommend this.
After stumbling around for a bit, I found the very similar jQuery Carousel plugin. Unfortunately, there is no Drupal module for this plugin and its documentation is entirely in French, but the plugin seems to be more mature, more frequently released and considerably more simple than jCarousel (to me, this is a plus).
The homepage for this jQuery plugin is here: http://thomlx.free.fr/jquery/jquery_carousel.htm
To integrate this plugin into Drupal, begin by installing the jquery.carousel.js to your sites/all/js or sites/[domain]/js directory.
Then add the following to your template.php:
drupal_add_js('sites/all/js/jquery.carousel.js');
Now, create a View with a display as an unordered list. It can be nodes or fields -- I tend to use fields, focusing on an imagefield asset with, perhaps, a caption. Going this route, you can include an imagefield on certain content types called "spotlight" or "carousel," allowing any content to be featured in your carousel on the front page.
Next, you need to add the following script to the <head> of your page.tpl.php file -- or whichever template page you wish to use the carousel on. I tend to use a carousel on the front page, so I often add code to page-front.tpl.php.
<script type="text/javascript">
$(function(){
$("div.view-[VIEWCLASS]").find("div.item-list").attr("class","carousel");
$("div.carousel").carousel( { autoSlide: true, loop: true, slideSpeed: "slow", effect: "fade", autoSlideInterval: 6000, delayAutoSlide: 6000 } );
});
</script>
Note that you must change the [VIEWCLASS] above. If your view is named carousel, you would replace [VIEWCLASS] with carousel to have div.view-carousel.
Your carousel should now be loading on the template page that you've added it to. However, you still need to style it. Here's some CSS I've used, which can be in your theme's CSS file:
.carousel.js{
overflow:hidden;
}
.carousel,
.carousel .carousel-wrap{
margin:0;border:0;
}
.carousel.js .carousel-wrap {
display:inline-block;
vertical-align:middle;
width:470px;
margin:0 0px 0px;
}
.carousel ul {
list-style:none;
margin:0;
padding:0;
}
.carousel.js ul li {
display:inline;
float:left;
width:470px;
height:335px;
}
.carousel .carousel-control {
display:inline-block;
width:40px;
height:40px;
text-indent:-9999px;
cursor:pointer;
}
.carousel .carousel-next {
background:url(carousel/next.png) 0 0 no-repeat;
float: left;
display: inline;
position: absolute;
top: 382px;
left: 440px;
z-index: 1;
}
.carousel .carousel-previous {
background:url(carousel/prev.png) 0 0 no-repeat;
float: left;
display: inline;
position: absolute;
top: 382px;
z-index: 1;
}
.carousel .carousel-control:hover {
-moz-opacity:.7;
opacity:0.7px;
filter:alpha(opacity=70);
}
.carousel div {
border:0;
margin:0;
padding:0;
}
.carousel ul li {
position:relative;
width:470px;
margin:0;
}
.carousel ul li cite {
position:absolute;
bottom:3px;
right:10px;
line-height:19px;
font-size:11px;
}
.carousel ul li cite a img {
vertical-align:middle;
}
.carousel ul li cite a {
color:inherit;
text-decoration:none;
}
Note that the navigation buttons have png files for backgrounds -- I have made these and placed them in the carousel directory inside of my theme. You'll need to do something similar.
You can see this plugin in action on http://chapelsjd.org
