realSlider Callback

[florian@wearesuperideal.com]

Hey there,

i was wondering if there is any way to give realSlider(settings) a callback to execute after the realSlider is initiated and everything is done or if there is an event to capture for that.

I need this for having the realSlider load into a fancybox via AJAX. Everything works fine except the fact that the fancybox (or the realSlider) don’t get scalled properly after the realSlider is initiated. In short: fancybox loads, displays realSlider code and then the realSlider gets initiated.

Thanks for your help
Florian

[Rattus]

Public methods:

// You can get slider instance from realSlider data:
var slider = $('#realSlider_ID<?php echo $gallery['term_id']; ?>').data('realSlider');

slider.goTo(3); // go to slide with id
slider.next();  // next slide
slider.prev();  // prev slide

slider.destroy(); // removes all events and clears all slider data
                  // use on ajax sites to avoid memory leaks

slider.updateSliderSize(); // updates size of slider. Use after you resize slider with js. 
slider.updateSliderSize(true); // Function has "forceResize" Boolean paramater.

slider.updateThumbsSize(); // updates size of thumbnails

// Fullscreen public methods
slider.enterFullscreen();
slider.exitFullscreen();

// Autoplay public methods
slider.startAutoPlay();
slider.stopAutoPlay();
slider.toggleAutoPlay();

Public properties:

slider.currSlideId // current slide index
slider.currSlide // current slide object

slider.numSlides // total number of slides

slider.isFullscreen // indicates if slider is in fullscreen mode
slider.nativeFS		// indicates if browser supports native fullscreen

slider.width // width of slider
slider.height // height of slider

slider.dragSuccess // Boolean, changes on mouseup, indicates if slide was dragged. Used to check if event is drag or click.

slider.slides // array, contains all data about each slide

slider.st // object with slider settings
slider.ev // jQuery object with slider events

Events:

// In each listener event.target is slider instance
slider.ev.on('gmAfterSlideChange', function(event) {
    // triggers after slide change
});
slider.ev.on('gmBeforeAnimStart', function(event) {
    // before animation between slides start
});
slider.ev.on('gmBeforeMove', function(event, type, userAction ) {
    // before any transition start (including after drag release)
    // "type" - can be "next", "prev", or ID of slide to move
    // userAction (Boolean) - defines if action is triggered by user (e.g. will be false if movement is triggered by autoPlay)
});
slider.ev.on('gmBeforeSizeSet', function(event) {
    // before size of slider is changed
});
slider.ev.on('gmDragStart', function(event) {
    // mouse/touch drag start
});
slider.ev.on('gmDragRelease', function() {
    // mouse/touch drag end
});
slider.ev.on('gmBeforeDestroy', function() {
    // triggers before slider in destroyed
});
slider.ev.on('gmSlideClick', function(event, originalEvent) {
    // originalEvent - the original jQuery click event.
    // triggers when user clicks on slide
    // doesn't trigger after click and drag
});
slider.ev.on('gmEnterFullscreen', function() {
    // enter fullscreen mode 
});
slider.ev.on('gmExitFullscreen', function() {
    // exit fullscreen mode 
});

slider.ev.on('gmVideoPlay', function() {
    // video start
});
slider.ev.on('gmVideoStop', function() {
    // video stop
});

slider.slides[2].holder.on('gmAfterContentSet', function() {
    // fires when third slide content is loaded and added to DOM
});
// or globally
slider.ev.on('gmAfterContentSet', function(e, slideObject) {
    // fires when every time when slide content is loaded and added to DOM
});

[Author]

Posts