ajax pagination and slideshow effects in drupal 6

The state of the art of drupal slideshow modules

As you can read in the well made comparison of slideshow modules in drupal there are at least ten modules that practically aim to fulfil nearly the same task: implement a slideshow of content with ajax pagination and easing transition effects.

My personal fav is views slideshow, which is simple and does the right things. Dynamic display block seems also promising but i don't like the fact that you must add templates (tpl) and styles in your theme folder to make it work. I prefer views slidehow because it works in a moment just out of the box.

Ajax calling

When i made my last project there was no support for ajax pagination in any of the summentioned modules. This trend is changing rapidly as ajax loading of content with the ability to add easing effects is being requested more and more.

In the best case this will go straight into the views module in a near future.

The quick workaround

As i couldn't wait, I had to use I small fix for my project. What I needed was a simple ajax loading of content with a fadeIn/fadeOut effect applied every time the user clicks on next/previous link in some blocks of content.

First i reviewed all the modules above, then i decided to use none: the views module in drupal 6 has an excellent ajax pager, the only thing it lacks are easing effects applied to the slide transition. I thought that a small workaround around this could be more convenient than wait.

This is what I reached:

if (Drupal && Drupal.jsEnabled && Drupal.Views) {

  Drupal.Views.Ajax.ajaxViewResponse = function(target, response) {
    if (response.debug) {
      alert(response.debug);
    }
    var $view = $(target);

    if (response.status && response.display) {
      var $newView = $(response.display);
      $view.fadeOut('fast', function() {
        $view.replaceWith($newView);
        $view = $newView;
        $view.fadeIn('fast', function() { Drupal.attachBehaviors($view.parent()) });
      });
    }
    if (response.messages) {
      $view.find('.views-messages').remove().end().prepend(response.messages);
    }
  };

With this code placed in my custom theme javascript I've been able to simply overwrite
the views module handling of the ajax pager transition and to use the fadeIn/fadeOut effects.

You can put whatever effect you like in the code, in particular this is useful if you plan to use the jquery easing plugin for the dynamic effects.

Hint: if you, like me, have several blocks with different pagers in a single page, you must set a unique pager id for each one to make them work together. This is easily accomplished via panels module or using the pager properties when editing the views.


my 3¢