maartendeblock | Freelancer en opleidingen Drupal

Drupal 7 is here, but getting a slideshow to work isn't that simple at the moment. Usualy I user the views carousel module, but they aren't making any new versions because the jCarousel module has identical features starting from the 2.x version. But ... the views integration isn't ready yet. Warning, this article is only for jCarousel versie 7.x-2.2-alpha1. Newer versions should already have it working.

If you already have a view, activate the 'PHP Filter' module and go to step 6.

We need the following modules:

• jCarousel (http://drupal.org/project/jcarousel): module for the actual slideshow effect
• Views (http://drupal.org/project/views): needed to make a list of the slides
• Chaos Tool Suite (http://drupal.org/project/ctools): needed for the views module

Steps:

1. Upload these modules to the server and active them.
   
    
2. Activate the 'PHP filter' module (Core)
   
    
3. Make a content type to use as slides. I named it 'slide' genoemd and added a field 'field_slide_image' of type 'Image' (314x100px).
   
    
4. Add a few nodes.
    
5. Make a view with a 'block' display. Filter on your content type and set any other settings you want.
    
6. And now for the important part. Set 'Style settings' -> 'Style' to 'HTML List'. 'jCarousel' is what we will use in future versions.
    
7. In 'Style options' of 'HTML List' (it should be the following screen) set 'List class'. I chose 'slideshow-item-list'.
   
    
8. Add a footer (Add footer) en and choose the type 'Global: Text area'.
    
9. Enter following text (only bold part):
   <?php jcarousel_add('slideshow-item-list', array('auto' => 5,'wrap' => 'circular', 'scroll' => 1)); ?>
   Replace 'slideshow-item-list' with the 'List class' you chose in step 7. In the array next to it, you can set the slideshow settings. You can find more options at admin/help/jcarousel on your site.
    
10. Make sure 'Text format' is set to 'PHP code'.
    
     
11. Save your view.
     
12. Go to 'Structure' -> 'Blocks' and move your block to the desired position.

Done! You can see a working example here: http://drupal7.maartendeblock.com/

PS: I used following CSS:

#block-views-slideshow-block-1,
#block-views-slideshow-block-1 ul{
width:314px;
}

#block-views-slideshow-block-1 ul li{
float:left;
margin:0;
width:314px;
height:100px;
}