Building a nice slideshow with Drupal views and jQuery

For one of my projects at One-Agency, i had to build a slideshow with images of one of my content types.

I started to make my promotions content type with CCK and make it possible to upload an image and add extra information on the promo.
After that, i could start with the real work.

Prepare the view

I made a block-view with the settings to show only promotions that are published, and show the nodes in this view as a node. Once you have this set up, you can start to prepare you’re template file.

To easely theme my nodes, i made a node-promotion.tpl.php file.
Iadded a promo-splitter class between my teaser nodes, so i can easely hook on this class in my javascript. All the other classes / id’s are used to style my promotion-slideshow.

Once this is finished, i have a nice clean view that gives me a list of the promotions. Seperated by a div with class promo-splitter.

Make the javascript

Prepare the vars

I started with adding vars that will be needed in all my functions. Following vars are needed:

  • slides: jquery object that contains all the slides
  • position: the current position in the slideshow
  • slideshow_counter: empty var that will contain the counter (see later)
  • slideshow: my interval

Init the slideshow

After this, i started to make a new function on Drupal.behaviors that will be the init-er of my slideshow.
In this function, i will create my slides jquery object, create all the counters / start-stop buttons and start the slideshow.

show next slide

I created a function to loop through all the slides, and start with the first again after the last slide has been reached.

Start / stop the slideshow

To finish the javascript stuff. I created a start-stop function, so users can pause the slideshow, and start it again when they want. I wrapped my text in a Drupal.t function, so this text can easely be changed through Drupal translations.

Javascript code

  1. var slides;
  2. var position = 0;
  3. var slideshow_counter;
  4. var slideshow;
  5.  
  6. Drupal.behaviors.promosSlideshow = function(context) {
  7.  
  8.   slides =  $("#block-views-promosfrontendimage-block_1 .view-promosfrontendimage-splitter");
  9.   if(slides.length > 0) {
  10.     var slideshow_stats = $(‘#slideshow-stats’);
  11.  
  12.     slideshow_counter = document.createElement("span");
  13.     slideshow_counter.id = "slideshow-counter";
  14.     slideshow_counter.innerHTML = "1";
  15.     slideshow_stats.append(slideshow_counter);
  16.  
  17.     var slideshow_total = document.createElement("span");
  18.     slideshow_total.id = "slideshow-total";
  19.     slideshow_total.innerHTML = ‘ / ‘ + slides.length;
  20.     slideshow_stats.append(slideshow_total);
  21.  
  22.     var slideshow_pause = document.createElement("a");
  23.     slideshow_pause.onclick = function() { startStopSlideshow(); return false;}
  24.     slideshow_pause.href = "#";
  25.     slideshow_pause.id = "slideshow-pause";
  26.     slideshow_pause.innerHTML = Drupal.t("Pause");
  27.     slideshow_stats.append(slideshow_pause);   
  28.  
  29.     $(slides[position]).fadeIn("slow");
  30.     slideshow = setInterval("showNextSlide()", 7000);
  31.   }  
  32.  
  33. }
  34.  
  35. function startStopSlideshow() {
  36.  
  37.   if(slideshow == "") {
  38.     $(‘#slideshow-pause’).text(Drupal.t("Pause"));
  39.     slideshow = setInterval("showNextSlide()", 7000);
  40.   } else {
  41.     $(‘#slideshow-pause’).text(Drupal.t("Start"));
  42.     clearInterval(slideshow);
  43.     slideshow = "";
  44.   }
  45.  
  46. }
  47.  
  48. function showNextSlide() {
  49.  
  50.   var old_position = position;
  51.   position++;
  52.   if(position == slides.length) {
  53.     position = 0;
  54.   }
  55.   $(slides[old_position]).fadeOut("slow", function() {
  56.     $(slides[position]).fadeIn("slow");
  57.   });
  58.  
  59.   if(slideshow_counter) {
  60.     slideshow_counter.innerHTML = position + 1;
  61.   }
  62.  
  63. }

Finish it with css

Finally, i wrote some css to style my slideshow, and set all the slides default to display: none;.

Final result

A result can be viewed here

This entry was posted on Thursday, January 22nd, 2009 at 10:19 pm and is filed under Drupal, javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Building a nice slideshow with Drupal views and jQuery”

  1. Pedro Pablo Says:
    August 13th, 2009 at 11:55 pm

    Why don’t just use Slideshow Views module?
    I used it at this mantenimiento informatico spanish site, and it worked like a charm without going into javascript coding..

Leave a Reply