Drupal

Customizing views_cycle module for differently styled marquees

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


Filed under:

During the theming process for the Emmys, specifically Emmys.com and Emmys.tv, we were presented with 2 differently styled marquees. On Emmys.com, the pager uses an image, while on Emmys.tv, 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 views_cycle.theme.inc, 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 views_cycle.theme.inc:


    $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.

    Similar posts

    Get notified on new marketing insights

    Be the first to know about new B2B SaaS Marketing insights to build or refine your marketing function with the tools and knowledge of today’s industry.