jQuery cycle plugin and Views

Recently a few projects I've been working on have required some sort of javascript paging or cycling functionality hooked into Views. While there are a few dedicated modules to do this (Views Carousel, Views Rotator, Views Cycle), they get in the way for me and I'd rather just deal with the javascript directly instead of wasting time figuring out how a module works. I've found the simplest method is to include the jQuery cycle plugin, write a line or two of jQuery, and theme the rest with CSS. It's simple and just works. Checkout the plethora of demos for the plugin. There are a ton of display options but I used the auto-pager demo as a starting point.

Here's what I did on the last project and it saved me a lot of time. I needed to take an existing views output of items and make a javascript pager that would only show one at a time. The only requirement for the cycle plugin is a containing div so it knows what the child elements are, in views this is usually .view-content.

Existing Views Markup:


 

   
...

   
...

   
...

             ...
 

 

All I had to do was write a little jQuery to do the magic. After you know the container div where the child items to page are, you specify where you want to output the pager and that's it. No tpl.php overrides, no fighting module configuration screens or bugs.

The Magic

Drupal.behaviors.your_module = function (context) {
   // display the pager at the bottom
   $('.view-example-name .view-content').after('
').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#pager-slide-your-module',
        before: function() { if (window.console) console.log(this.src); }
    });
};

 

Harris Matt Phil
Rocks Gabe Arlina
Anthony Mark Brian
hjhgjhgjg jgjhghjg  
   
   

 

jkkhkjhjh jb  

kjlkjlkjlkjjk

jlkj

 
   
kjlklk

 

Topics