cool tech graphics

Customizing views_cycle module for differently styled marquees

Filed under:

During the theming process for the Emmys, specifically and, we were presented with 2 differently styled marquees. On, the pager uses an image, while on, the pager uses number with a background image along with next/previous buttons.

Since we use a multisite Drupal setup for the Emmys, we had to make some changes to the views_cycle module to accommodate the marquee designs.

First, we had to find a way to pass the theme name into views_cycle.js. To do that, in, we added these lines:

$current_theme = variable_get('theme_default', 'none');
$settings['params']['theme'] = $current_theme;

By doing that, we can do something like this in views_cycle.js:

var theme = config.params.theme;


function makeAnchors(idx, slide) {
if(theme == 'emmyscom') {
return '

  • ' + "
  • \n";
    } else {
    return '

  • ' + (idx+1) + "
  • \n";


    Another example of modification that we've made to views_cycle module was when we were presented with different sized marquees based on which page you are on, which got IE7 a little irritated.

    To solve this problem, we followed closely to what we did on the Emmys project with a slight modification. Instead of the theme name, we needed to know which page a user is on. So in

    $info = menu_get_item();
    $current_page = $info['page-arguments']['0']->path;
    $settings['params']['current_page'] = $current_page;

    Then in views_cycle.js:


    var curr_page = config.params.current_page;


    cycler.children('li').each(function () {
    var li = $(this);
    if(curr_page == 'home') {
    if(jQuery.browser.msie && jQuery.browser.version >= "7.0") {
    tallest = 280;
    } else {
    tallest = 335;
    } else {
    if(jQuery.browser.msie && jQuery.browser.version == "7.0") {
    tallest = 220;
    } else {
    tallest = 195;


    Any comment or feedback is appreciated.

    Date posted: December 1, 2009



    I'm new to Drupal, but learning quickly! I need to create an effect like, using views cycle. can you give me a quick overview of how to implement the menus like that?

    greatly appreciated!

    Add new comment

    Restricted HTML

    • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
    • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
    • Web page addresses and email addresses turn into links automatically.
    • Lines and paragraphs break automatically.

    Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

    Have questions?