Adding effects to your Drupal jCarousel implementation
Many sites make use of the jCarousel and viewscarousel modules for Drupal to display slideshows of content. But what you may not know is that there are many ways to add effects to your carousels beyond the standard configuration options.
In our examples, we’ll be making use of jCarousel’s callback functions, specifically initCallback ( called when the carousel is initialized ), and itemVisibleInCallback ( called after an item has been slid into the viewable container ).
To add the callbacks, you just need to add some javascript to the page your carousel appears on, where ‘#id_of_ul_element’ is the css identifier of the <ul> tag of the rendered carousel.
drupal_add_js(array('jcarousel' => array('#id_of_ul_element' => array('initCallback' => 'example_initCallback','itemVisibleInCallback'=>'example_visibleCallback'))), 'setting');
With these callbacks in place we can make a number of enhancements. If your design or layout requires the buttons to be outside the carousel container, you may want to add custom buttons. To do this, you only need to add some HTML anywhere on the page:
<div id="buttons">
<a href="#" class="prev"><img src="/path_to_prev_button"/></a>
<a href="#" class="pause"><img src="/path_to_pause_button"/></a>
<a href="#" class="next"><img src="/path_to_next_button"/></a>
</div>and some javascript to tie the buttons to the carousel:
function example_initCallback(carousel) {
var paused = 0;
$('#buttons .prev').bind('click', function() {
carousel.prev();
return false;
});
$('#buttons .pause').bind('click', function() {
if(paused) { carousel.startAuto(); paused = 0; }
else { carousel.stopAuto(); paused = 1; }
return false;
});
$('#buttons .next').bind('click', function() {
carousel.next();
return false;
});
}Now we have custom buttons that control our carousel, including a pause button.
You may also want to add effects to the carousel. For example, you may have content that can be different heights, such as images that can be aligned horizontally or vertically, or captions that can be of variable length. Instead of setting the carousel so large that some slides have a lot of whitespace or so small that some of the longest content gets chopped off, you may want to adjust the size of the container to fit the content.
This javascript will slide the bottom of the carousel up or down to accommodate the size of the content inside. ( note: ‘.wrapper’ is the css class around the content of each carousel slide )
function example_visibleCallback(carousel, item, idx, state) {
var height = $('#id_of_ul_element .jcarousel-item-'idx' .wrapper').height();
if(height > 0) {
$('#id_of_ul_element .jcarousel-item').animate({height: height+'px'}, 200);
}
}There are many other callback functions available ( a full list is available here ), and these examples should work whether you decide to use viewscarousel to create your carousel or simply use jCarousel itself.
Comments
Post new comment