Question

I’m using the following jquery plugin news rotator for displaying several different news headlines:
http://landofcoder.com/index.php?option=com_jdownloads&Itemid=372&task=view.download&cid=9

Quite a nice headliner, but it doesn’t seem to modify z-index when you jump to different layers / stories and consequently the video that is embedded on layer 1 always activates, even if I click news stories or vides in other layers. So, for example, if I move to another story and click the play button, the video on the 1st (top most) story activates vs the one I’m on.

I was hoping for an example of how to modify the script to facilitate also changing z-index on layer / story change.

I am guessing that the modification could be made in the fxStart function below the opacity shift within the script.js file, but I’m just not up to snuff on js yet.

Answer 1

Ok the way I get around the white screen behind is to only animate the current layer. So when you want to fade to the next layer, you:
1. Set the z-index of the current layer to a high number (say 3)
2. Set the z-index of the next layer to a lower number (say 2) and set the opacity to 1
3. Fade out the current layer only and that will reveal the next layer below.
4. Set a callback function on the current layer animation to reset z-indexes to their correct values so as to not mess up the next transition.

so adapting my last suggestion, I would recommend:

// accomodate your other issue
var $nextObj = $(this.slides).eq(index).css({zIndex:900, opacity:1});
$(currentObj).css({zIndex:1000}).stop().animate( {opacity:0}, {duration: this.settings.duration, easing:this.settings.easing}, function(){ $(this).css({zIndex: 1}); $nextObj.css({zIndex: 2}); );

Does that make sense?