1

I'm using the jquery cycle1 plugin for a slideshow with fade transitions between images, no previous or next controls. I need to layer text on top of this slider that changes color based on what slide is showing.

I'm not very fluent in jQuery so I'm having a hard time using the documentation to manipulate the available options. I've gotten this far thanks to this post and this one but the color changes slightly before or after depending on if I use before or after, obviously. How can I make the text color change at the same exact time the slide does?

Note: I have to use the cycle 1 plugin as my site uses jQuery 1.3.2 with no hope of upgrading.

here is a fiddle, and code below. Thanks in advance for any help!

here is my html:

                    <div id="text">this is some text over the slider</div>
        <div id="switch-it">
            <div id="slide1">
                <a href="link1.html">
                    <img src="hp_hero_010114_01.jpg" height="500" width="980"  border="0" />
                </a>
            </div>
            <div id="slide2">
                <a href="link2.html">
                    <img src="hp_hero_010114_02.jpg" height="500" width="980" border="0"/>
                </a>
            </div>
        </div><!--//END switch-it-->

and here is the jQuery

        $(document).ready(function(){
            $('#switch-it').after('<div id="switch" class="switch">').cycle({
            fx:     'fade',
            speed:  800,
            timeout: 500,
            cleartypeNoBg: true,
            height:'500px', 
            width:'980px',
            pager:'#switch', 
            pause:1,
            before: function (prev, current, opts) {
                   var current_id = $(current).attr('id');
                    if( current_id.match("slide1")){
                        $('#text').css('color','white');
                    }
                    else if( current_id.match("slide2")){
                        $('#text').css('color','red');
                    }       
                    else if( current_id.match("slide3")){
                        $('#text').css('color','blue');
                    }                       
                    else if( current_id.match("slide4")){
                        $('#text').css('color','green');
                    }
            },
            pagerAnchorBuilder: function(index, el) {
                return '<a href="#">&bull;</a>'; // whatever markup you want
            }
            });

        });
Community
  • 1
  • 1
surfbird0713
  • 1,209
  • 2
  • 23
  • 45

2 Answers2

0

You might want to update to Cycle2 plugin it has what you are looking for

link

Down in "misc. bits" look for the state variable named 'busy';

Matthew Booth
  • 71
  • 7
0

It's not very elegant, but adding a timeout inside the before for half of your speed makes the change exactly in the middle of your transition.

setTimeout(function () { ...change text color }, 400);

JSFiddle

EDIT OR

Add a transition to your css for the #text for the same amount of time as your speed

#text {transition: color .8s linear}

JSFiddle

baacke
  • 781
  • 9
  • 21
  • Thanks, that looks like it could work! The timing is off when the image goes from the last slide back to the first though...I'll play around with it but if you have any suggestions I'd love to hear them. – surfbird0713 Jan 17 '14 at 22:39
  • @surfbird0713 Check my edit. CSS transition is actually easier if you don't have to worry about browsers older than IE9. – baacke Jan 17 '14 at 22:40
  • @surfbird0713 or a combination of both [JSFiddle](http://jsfiddle.net/baacke/wGYfp/5/) – baacke Jan 17 '14 at 22:45