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 +')');
});
}
};
Comment | File | Size | Author |
---|---|---|---|
#3 | cycle_js_before_after-1548992-3.patch | 1.14 KB | sebastiendan |
cycle-js-before-after.diff | 1.4 KB | filsterjisah | |
Comments
Comment #1
aacraig CreditAttribution: aacraig commented+1 for this.
Firing an event before and after the slide cycles is a nice addition.
Comment #2
rooby CreditAttribution: rooby commentedIs 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
Comment #2.0
rooby CreditAttribution: rooby commentedadded javascript code
Comment #3
sebastiendan CreditAttribution: sebastiendan commentedHere's a patch from this diff.
Comment #4
rooby CreditAttribution: rooby commentedComment #5
NickDickinsonWildewith the json2 plugin you can use the before/after options in the advanced options section.