jQuery cycle plugin and Views
Tags :
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:
<div class="view-example-name"><br /> <div class="view-content"><br /> <div class="row-1">...</div><br /> <div class="row-2">...</div><br /> <div class="row-3">...</div><br /> ...<br /> </div><br /></div>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) {<br /> // display the pager at the bottom <br /> $('.view-example-name .view-content').after('<div id="pager-slide-your-module" class="pager-slide">').cycle({<br /> fx: 'fade',<br /> speed: 'fast',<br /> timeout: 0,<br /> pager: '#pager-slide-your-module',<br /> before: function() { if (window.console) console.log(this.src); }<br /> });<br />};Comments
Post a comment
Presentations
What we've coded
Videos
Upcoming workshops
-
San Francisco, CAFebruary 28, 2012
-
Denver, COMarch 19, 2012
I agree with you on just doing it myself, however, there is a views cycle plug in you may want to mention in your post: http://drupal.org/project/views_cycle
Simple but effective. Thanks.
Thanks Jonathan, I've now listed Views Cycle in the post. As I recall Views Rotator also uses the jQuery cycle plugin - not sure how these two modules differ.
Just what i was looking for! small and direct.
thanks
Simple but effective. Thanks.
I am using javascript to try and create a social media marketing application that can be used on smart phones. I am running into a little trouble. The code is causing me trouble, but I think with your current information, I might be able to make it work. Do you care if I hit you up for more advice, if needed?