I wanted to do the following:

I've got a cycle view that shows nodes. Before and after each cycle I want to do change my header image (= 'image field' of my node). The header is on top and not wrapper in my view. I would like to call javascript to change the header image with the hidden 'image field' of my view.

It would be cool if there was a possibility to trigger a javascript function before and after cycling.
I've added a possibility to trigger a jquery event, but i'm pretty sure this could be better integrated in this module than i've done, maybe in textarea in the views interface with space to add custom javascript.

I've used this javascript code:

  Drupal.behaviors.home_page_cycle = {
    attach: function (context, settings) {
      
      //"views_slideshow_cycle_before" is not triggered on first element when loading
      var image_src = $('.views-field-field-case-image:first img', '#block-views-case-block-1').attr('src');
      $('.slidedown-content', '#block-views-case-block-1').css('background-image', 'url('+ image_src +')');

      //views_slideshow_cycle_before: hide prev case image
      $('.views-slideshow-cycle-main-frame-row', '#block-views-case-block-1').bind('views_slideshow_cycle_before', function(e, data) {
        $('.slidedown-content', '#block-views-case-block-1').css('background-image', 'none');
      });
      
      //views_slideshow_cycle_after: show new case image
      $('.views-slideshow-cycle-main-frame-row', '#block-views-case-block-1').bind('views_slideshow_cycle_after', function(e, data) {
        var image_src = $('.views-field-field-case-image img', e.target).attr('src');
        $('.slidedown-content', '#block-views-case-block-1').css('background-image', 'url('+ image_src +')');
      });
      
    }
  };
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

aacraig’s picture

+1 for this.

Firing an event before and after the slide cycles is a nice addition.

rooby’s picture

Is this the same as using the jquery cycle options before & after, which can be used from the views configuration?

See http://jquery.malsup.com/cycle/options.html

rooby’s picture

Issue summary: View changes

added javascript code

sebastiendan’s picture

Here's a patch from this diff.

rooby’s picture

Status: Active » Needs review
NickDickinsonWilde’s picture

Status: Needs review » Closed (won't fix)

with the json2 plugin you can use the before/after options in the advanced options section.