Search jQuery

jQuery Forum

Using jQuery Plugins

shtrudel...

Cycle before event

in Using jQuery Plugins • 8 years ago

Hi,

I am trying to get the currently displayed item id using the Cycle before event,

Code follows -

$('#slideshow1').cycle(                             {                                 fx: 'curtainX',                                 easing: 'easeOutBack',                                 delay: -4000,                                 next: '#Button1Next',                                 prev: '#Button1Prev',                                 before: getCurrent                             });

function getCurrent(currSlideElement, nextSlideElement, options, forwardFlag) {             currSlideID = currSlideElement.id;             //alert(currSlideElement.id);         }

The getCurrent function works fine for the first item displayed, shows the id before the item is displayed, after the first item cycle, it start showing the previous item id, act like an after event.

How can I get the currently displayed item id ???

Replies(13)

jakecigar

Re: Cycle before event

8 years ago

Include some of your HTML. Do you have ids? You might want to use after instead of before like in
JQuery Cycle Plugin - 'after' Callback Demo.

If that doesn’t help, share a link to your page or a demo of it.

JΛ̊KE

shtrudel...

Re: Cycle before event

8 years ago

The html for my slideshow is generated by an ajax call which returns html that I add to slideshow1 div, the returned html follows -

<div id="slideshow1" style="position: relative;">
        <div id="1.1" style="left: 300px; top: 0px; width: 0px; height: 420px; display: none;
            position: absolute; z-index: 4; opacity: 1;">
            <img class="first" src="itemsPics/1/adi.jpg"><center>
                <span class="shortDesc">Test1</span></center>
        </div>
        <div id="3.2" style="left: 329.44px; top: 0px; width: 0px; height: 420px; overflow: hidden;
            display: block; position: absolute; z-index: 4; opacity: 1;">
            <img class="slide" src="itemsPics/3/DSCF0016 (Small).jpg"><center>
                <span class="shortDesc">Test2</span></center>
        </div>
        <div id="3.3" style="left: -29.44px; top: 0px; width: 658.89px; height: 420px; overflow: hidden;
            display: block; position: absolute; z-index: 3; opacity: 1;">
            <img class="slide" src="itemsPics/3/paris 003.jpg"><center>
                <span class="shortDesc">Test3</span></center>
        </div>
    </div>