CODEWITHSUNDEEP
javascriptjquery
supersize
supersize

Reputation: 14783

fire event after element cycled with cycle.js

im using cycle.js for some basic transitions between some pictures:

$(document).ready(function() {
    var first;
    var $slider = $(".trauringe");
    $slider.cycle({
    timeout: 8000,
    next:   '#next', 
    prev:   '#prev' });
 });

what i would like to do is, to fire an event when the element "cycled" to the next one. Means when the next picture is faded in.

Any help much appreciated!

greets

Upvotes: 0

Views: 130

Answers (2)

dreamweiver
dreamweiver

Reputation: 6002

$('#s5').cycle({ 
fx:     'scrollLeft', 
timeout: 5000, 
before:  onBefore, 
after:   onAfter 
});


 function onBefore() { 
 $('#output').html("Scrolling image:<br>" + this.src); 
 } 
  function onAfter() { 
   $('#output').html("Scroll complete for:<br>" + this.src) 
      .append('<h3>' + this.alt + '</h3>'); 
  }

Here is a working example from FIDDLE

Happy Coding :)

Upvotes: 1

sathish
sathish

Reputation: 800

You can use before / after.

For example,

$('#slide_cont').cycle({ 
    fx:     'scrollLeft', 
    before:  onBefore, 
    after:   onAfter 
 });
function onBefore() { 
    $('#output').html("Scrolling image:<br>" + this.src); 
} 
function onAfter() { 
    $('#output').html("Scroll complete for:<br>" + this.src).append(this.alt); 
}

Upvotes: 1

Related Questions