How can i sync current slide with another image when it changes?

76 views Asked by At

EDITED:

I want to retrieve the current sliding image scr on cycle2 JQuery plug-in placing a snip code in a specific part of the cycle2 code. By placing it where i intend to, it will synchronize every event from auto-slide to forward.

The thing i need is a way to retrieve the url of the slide that is appearing in the div content and is cycling in this section.

I was thinking of something like this:

document.getElementById('mysepareteimage').src = Slide.src; //or something similar

and use it in the the section of the code showed below.

doTransition: function( slideOpts, currEl, nextEl, fwd, callback) {
        var opts = slideOpts;
        var curr = $(currEl), next = $(nextEl);
        var fn = function() {
            // make sure animIn has something so that callback doesn't trigger immediately
            next.animate(opts.animIn || { opacity: 1}, opts.speed, opts.easeIn || opts.easing, callback);
        };

        next.css(opts.cssBefore || {});
        curr.animate(opts.animOut || {}, opts.speed, 
        opts.easeOut || opts.easing, function() {

This is where i place the snipe code

            curr.css(opts.cssAfter || {});
            if (!opts.sync) {
                fn();
            }
        });
        if (opts.sync) {
            fn();
        }
    },

 queueTransition: function( slideOpts, specificTimeout ) {
    var opts = this.opts();
    var timeout = specificTimeout !== undefined ? specificTimeout : slideOpts.timeout;
    if (opts.nextSlide === 0 && --opts.loop === 0) {
        opts.API.log('terminating; loop=0');
        opts.timeout = 0;
        if ( timeout ) {
            setTimeout(function() {
                opts.API.trigger('cycle-finished', [ opts ]);
            }, timeout);
        }
        else {
            opts.API.trigger('cycle-finished', [ opts ]);
        }
        // reset nextSlide
        opts.nextSlide = opts.currSlide;
        return;
    }
    if ( opts.continueAuto !== undefined ) {
        if ( opts.continueAuto === false || 
            ($.isFunction(opts.continueAuto) && opts.continueAuto() === false )) {
            opts.API.log('terminating automatic transitions');
            opts.timeout = 0;
            if ( opts.timeoutId )
                clearTimeout(opts.timeoutId);
            return;
        }
    }
    if ( timeout ) {
        opts._lastQueue = $.now();
        if ( specificTimeout === undefined )
            opts._remainingTimeout = slideOpts.timeout;

        if ( !opts.paused && ! opts.hoverPaused ) {
            opts.timeoutId = setTimeout(function() { 
                opts.API.prepareTx( false, !opts.reverse ); 
            }, timeout );
        }
    }
},

Here is a link to the library: http://malsup.github.io/jquery.cycle2.js

Here is a link to the library API: http://jquery.malsup.com/cycle2/api/

can it be done? Can you help?

Thank you.

0

There are 0 answers