shyft › Callbacks

Callbacks

Callback functions can be defined as part of the Options object. For more details about the specific parameters and usage for the callbacks, keep reading.

.onload( count, current )

Triggered when the carousel finishes loading. The function passes two arguments:

• count: Integer for the total number of slides for the current carousel
• current: Integer for the current slide (starting at 1)

1
2
3
4
5
6
7
// Instantiate shyft with an onload() callback
var opts = {
    onload: function(count, current) {
        alert('shyft initialized.  Total slides: ' + count + '.  Current slide: ' + current);
    }
}
shyft($('#myshyft', opts));

.onupdate( count, current )

Triggered when the carousel finishes updating. Functionally, this callback is exactly the same as onload. The only difference is that onload() is only triggered when the plugin initially loads. When the carousel is reloaded via the public method update(), the onupdate callback is triggered instead.

Passes two arguments

• count: Integer for the total number of slides for the current carousel
• current: Integer for the current slide (starting at 1)

1
2
3
4
5
6
7
// Instantiate shyft with an onupdate() callback
var opts = {
    onupdate: function(count, current) {
        alert('shyft updated.  Total slides: ' + count + '.  Current slide: ' + current);
    }
}
shyft($('#myshyft', opts));

.ondestroy()

Triggered when the carousel is destroyed via the public method destroy(). Note that while updating the carousel techically utilizes the destroy() method, the ondestroy() callback is not triggered as part of the update cycle.

Passes no arguments.

1
2
3
4
5
6
7
// Instantiate shyft with an ondestroy() callback
var opts = {
    ondestroy: function(count, current) {
        alert('No more shyft :( ');
    }
}
shyft($('#myshyft', opts));

.onadd( slide )

Triggered when a slide is added to the carousel via the add() method.

Passes a single argument:

• slide: jQuery reference to the added slide. The element does not need to have a wrapper. shyft will wrap the element appropriately.

1
2
3
4
5
6
7
// Instantiate shyft with an onadd() callback
var opts = {
    onadd: function(slide) {
        slide.css('opacity', .5);    
    }
}
shyft($('#myshyft', opts));

.onremove( slide )

Triggered when a slide is removed from the carousel via the remove() method.

Passes a single argument:

• slide: jQuery reference to the removed slide. Note that any wrappers added by shyft will be removed from the object.

1
2
3
4
5
6
7
8
// Instantiate shyft with an onremove() callback
var opts = {
    onremove: function(slide) {
        // Add the removed item into another area of the DOM
        $('#unused-slides').append(slide);
    }
}
shyft($('#myshyft', opts));

.onprechange( oldindex, newindex )

Triggered before a slide change begins. The function passes two arguments:

• old: Integer for the old slide (starting at 1)
• new: Integer for the current slide (starting at 1)

1
2
3
4
5
6
7
// Instantiate shyft with an onprechange() callback
var opts = {
    onprechange: function(current, new) {
        alert('Pre change.  Old slide was: ' + old + '.  New slide will be: ' + new);
    }
}
shyft($('#myshyft', opts));

.onpostchange( oldindex, newindex )

Triggered after a slide change ends. The function passes two arguments:

• old: Integer for the old slide (starting at 1)
• new: Integer for the current slide (starting at 1)

1
2
3
4
5
6
7
// Instantiate shyft with an onpostchange() callback
var opts = {
    onpostchange: function(old, new) {
        alert('Post change.  Old slide was: ' + old + '.  New slide is: ' + new);
    }
}
shyft($('#myshyft', opts));

.onswiperight( el )

Triggered when a right swipe is detected. The function passes a single argument:

• el: jQuery object for the carousel element

1
2
3
4
5
6
7
// Instantiate shyft with an onswiperight() callback
var opts = {
    onswiperight: function(el) {
        el.css({ 'border': '10px solid blue' });
    }
}
shyft($('#myshyft', opts));

.onswipeleft( el )

Triggered when a left swipe is detected. The function passes a single argument:

• el: jQuery object for the carousel element

1
2
3
4
5
6
7
// Instantiate shyft with an onswipeleft() callback
var opts = {
    onswipeleft: function(el) {
        el.css({ 'border': '10px solid blue' });
    }
}
shyft($('#myshyft', opts));

.onplay()

Triggered when the slideshow status is changed to play. The function passes no arguments

1
2
3
4
5
6
7
// Instantiate shyft with an onplay() callback
var opts = {
    onplay: function() {
        alert('Play');
    }
}
shyft($('#myshyft', opts));

.onpause()

Triggered when the slideshow status is changed to pause. The function passes no arguments

1
2
3
4
5
6
7
// Instantiate shyft with an onpause() callback
var opts = {
    onpause: function() {
        alert('Pause');
    }
}
shyft($('#myshyft', opts));

.onstart()

Triggered when the slideshow status is changed to start. The function passes no arguments

1
2
3
4
5
6
7
// Instantiate shyft with an onstart() callback
var opts = {
    onstart: function() {
        alert('Start');
    }
}
shyft($('#myshyft', opts));

.onstop()

Triggered when the slideshow status is changed to stop. The function passes no arguments

1
2
3
4
5
6
7
// Instantiate shyft with an onstop() callback
var opts = {
    onstop: function() {
        alert('Stop');
    }
}
shyft($('#myshyft', opts));