How to detect before and after change slide event in jShowoff?

333 views Asked by At

I'm using the jShowoff slider, and need to detect the moment before the slide changes and after. Before was an easy one, but I have a problem with detecting the moment when the index of the slide just changed. How can I do it?

I added an id to each slide, how can I write a function to detect when the slide just changed?

$("#rotator #slides").append(String.format('<div><a href="{0}" data-additional-url="{1}" data-id="{2}"><img src="{3}" /></a></div>', ob.RedirectURL, ob.AdditionalURL, index, imgSrc));

jshowoff:

(function ($) {
$.fn.jshowoff = function (settings) {
    var config = {
        animatePause: true,
        autoPlay: true,
        changeSpeed: 600,
        controls: true,
        controlText: {
            play: 'Play',
            pause: 'Pause',
            next: 'Next',
            previous: 'Previous'
        },
        effect: 'fade',
        hoverPause: true,
        links: true,
        speed: 3000
    };
    if (settings) $.extend(true, config, settings);
    if (config.speed < (config.changeSpeed + 20)) {
        alert('jShowOff: Make speed at least 20ms longer than changeSpeed; 
the fades aren\'t always right on time.');
        return this;
    };
    this.each(function (i) {
        var $cont = $(this);
        var gallery = $(this).children().remove();
        var timer = '';
        var counter = 0;
        var preloadedImg = [];
        var howManyInstances = $('.jshowoff').length + 1;
        var uniqueClass = 'jshowoff-' + howManyInstances;
        var cssClass = config.cssClass != undefined ? config.cssClass : '';
        $cont.css('position', 'relative').wrap('<div class="jshowoff ' + 
uniqueClass + '" />');
        var $wrap = $('.' + uniqueClass);
        $wrap.css('position', 'relative').addClass(cssClass);
        $(gallery[0]).clone().appendTo($cont);
        preloadImg();

(some settings)

if (config.links) {
       var handle = uniqueClass != undefined ? uniqueClass : 
uniqueClass2;
                $('.' + handle + '-active').removeClass(handle + '-active 
jshowoff-active');
                $('.' + handle + '-slidelinks 
a').eq(counter).addClass(handle + '-active jshowoff-active');
            };
        };

here my alert with beforechange statement

function transitionTo(gallery, index, uniqueClass2) {
alert("beforechange");           //alert
var oldCounter = counter;
            if ((counter >= gallery.length) || (index >= gallery.length)) {
                counter = 0;
                var e2b = true;
            } else if ((counter < 0) || (index < 0)) {
                counter = gallery.length - 1;
                var b2e = true;
            } else {
                counter = index;
            }
};

        function isPlaying() {
        return $('.' + uniqueClass + '-play').hasClass('jshowoff- 
paused') ? false : true;
        };

        function play(src) {
            if (!isBusy()) {
                counter++;
                transitionTo(gallery, counter, uniqueClass);
                if (src == 'hover' || !isPlaying()) {
                    timer = setInterval(function () {
                        play();
                    }, config.speed);
                }
                if (!isPlaying()) {
                    $('.' + uniqueClass + '- 
play').text(config.controlText.pause).removeClass('jshowoff-paused ' + 
uniqueClass + '-paused');
                }
            };
        };
return this;
};
})(jQuery);
1

There are 1 answers

1
TJBlackman On BEST ANSWER

The best answer here is to use a more reputable and feature-rich jQuery plugin. There are many (hundreds probably) jQuery slideshow plguins that are written very very well, are very efficient, and offer many features and hooks you can use to add your own custom functionality.

Here's 7 Great jQuery Slideshow Plugins

I'm not trying to be mean, but using these two jQuery plugins in tandem the way they are being used is very very inefficient, and the code in the plugins is already not great. It's not horrible, and it works, but there are much much better plugins available. Don't waste your own time re-inventing the wheel!

Ok - All that being said, I slapped some code into your plugins and updated your fiddle. I added this comment everywhere I added code // *added* so you can see what I did. Basically, the options for the jsshowoff plugin now has two extra settings. Just put your code there, and it will fire once before and once after each animation.

$("#features").jshowoff({
    links: true,
    speed: 5000,
    effect: 'fade',
    hoverPause: false,
    beforeSlide: () => {
        // add before stuff here
    },
    afterSlide: () => {
        // add after stuff here
    }
});

You will need to copy my javascript from the JSFiddle and update the js in your project.

JS Fiddle