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 +')');
      });
    }
  };
Files: 
CommentFileSizeAuthor
cycle-js-before-after.diff1.4 KBfilsterjisah

Comments

+1 for this.

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

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

Issue summary:View changes

added javascript code