Drupal Technical

[Drupal] Learn how to create a separate slide show for each content of a content type using the images in the content

Emily Mathew | | 1 min read

In one of the Drupal projects I was working on, the site had a content type with a field image which had multiple number of values for that field. We were required to create a separate slide show for each content of this content type. Using the jQuery Cycle plugin, you can create the slide show quite easily. Read on to know more

The following are the steps to create the slide show

  • Make sure the Number of values is set to Unlimited in configuration option of the image field.

  • In the tpl file print the images in the image field in a loop. Wrap it in a div and add a class 'slide-show' to the div.

    Example code:

      
    <div class="slide-show">
      <?php foreach($node->field_image as $field_image): ?>
      <img src="/<?php print $field_image['filepath']; ?>"> 
      <?php endforeach;?> 
    </div>

  • Add the following code in you custom JS file.

      $(document).ready(function(){
    $('.slide-show').cycle({fx:'fade'});
  });

    It will show the fade effect. If you want, you can also use another effect.

    Now, if we take any content of our content type, it will display a slideshow with the images of that content only. Also note, it will display as slide show if that content has more than one image in the image field.

By doing the above three steps, we can easily create separate slide show for each content of a content type

 

 

Related Topics