1

I'm using the Jquery Cycle plugin for a slideshow, and I want to add an event when a certain slide is active. The Cycle plugin achieves this by adding and removing the opacity of the images in a certain div like so:

<div style="position: absolute; top: 0px; z-index: 9; display: none; opacity: 0;">

When the image is active, or is the current slide, the opacity changes to 1, and the display to "block".

Now I've tried using different approaches, from detecting the css style/attribute of the div to assigning a class to said div, and then do something:

if($("#slideshow > div:nth-child(2)").hasClass('fadeOut') == 1) {
    alert('Hello');
}

or

if($("#slideshow > div:nth-child(2)").css('opacity') == 1) {
    alert('Hello');
}

and even 

if($(".fadeOut").css('opacity') == 1) {
    alert('Hello');
}

The problem is that the JS doesn't detect the "opacity: 1" style when it's applied dynamically with the Cycle plugin. On the other hand it does work when the style is applied inline in the css file, and of course, that does not work, because the event fires the minute the page is loaded, when what I want is for the event to fire when and only when the 2nd image is the active one, in other words, when it has either "opacity" set to 1 or "display" to block, and can't seem to figure it out.

Cœur
  • 37,241
  • 25
  • 195
  • 267
antigaprime
  • 79
  • 1
  • 9

2 Answers2

0

You should be able to determine the current state of an element with all of your approaches. I guess the problem is looking them up in the right time.

Just: You can't detect when a style property or a class attribute changes. The only way to catch that is listening for DOMModification events - a rather ugly way.

So: Use another plugin. There will be slideshow plugins that do trigger [custom] events on the elements when they change the image.

Community
  • 1
  • 1
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • http://webcache.googleusercontent.com/search?q=cache:http://jquery.malsup.com/cycle – Bergi Jun 01 '12 at 01:32
  • 1
    Thanks. It seems the `before` or `after` callback would work. Options detailed here: http://webcache.googleusercontent.com/search?q=cache:ICFMJs4FYRYJ:jquery.malsup.com/cycle/options.html&hl=en&lr=lang_en%7Clang_pt&gl=br&tbs=lr:lang_1en%7Clang_1pt&prmd=imvns&strip=1 – bfavaretto Jun 01 '12 at 01:35
  • Yes, [the script](http://malsup.github.com/jquery.cycle.all.js) seems to include lots of callbacks, but no event-triggering. – Bergi Jun 01 '12 at 01:37
  • Well, the only events I can see are styles that the plugin assigns to the divs/images in the slideshow, and the alternating Opacity and Display properties. – antigaprime Jun 01 '12 at 01:38
0

would something like this work for you?

html

<p></p>
<div class="slideshow">
    <img id="1" src="http://davealger.info/i/1.jpg" />
    <img id="2" src="http://davealger.info/i/2.bmp" />
    <img id="3" src="http://davealger.info/i/3.png" />
</div>

css

.slideshow { position:relative; }
.slideshow img { position:absolute; left:0; top:0; }​

js

$(function(){
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){
        var me=$('.slideshow :first-child');

        if ( me.attr('id') === '1' )
            $("p:last").html('getting ready to load slide 2');
        else
            $("p:last").html('');

        me.fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');
    }, 4000);
});​

demo link below

http://jsfiddle.net/DaveAlger/CWkYt/

DaveAlger
  • 2,376
  • 25
  • 24
  • It is interesting, but due to the way the html is set up this won't work. Thanks anyway. – antigaprime Jun 01 '12 at 02:13
  • Actually, this does work exactly as I want it, but it needs some tweaking if I want to use it. I'll let you know if/when it works! – antigaprime Jun 01 '12 at 02:30
  • cool - i know it isn't very ideal so if you can find a better solution then please return and share it with us. thanks – DaveAlger Jun 01 '12 at 07:22
  • 1
    Please post your answer *here*, not on an external site. Use external sites for reference, or demonstration. The idea is that this way Stack Overflow should remain useful even if the external sites die (or, like JS Fiddle often does, simply falls over for a little while). – David Thomas Jun 01 '12 at 23:50
  • good advice - i'm still pretty new to stackoverflow updated the answer with code samples – DaveAlger Jun 04 '12 at 17:59