Results 1 to 2 of 2

Thread: Setting z-order of image slideshow in "Carousel II" script

  1. #1
    Join Date
    Dec 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Setting z-order of image slideshow in "Carousel II" script

    1) Script Title: Carousel Slideshow II

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici.../carousel2.htm

    3) Describe problem: While I have successfully integrated the Carousel II image slideshow script into a web site, I have been unable to make, what I thought, would be a minor change/enhancement. Let me explain...

    Surrounding the script with imagery I designed, I have attempted to turn the
    slideshow into a literal "carousel". For my wife's horse-related web site, I have surrounded both the top and bottom of the slideshow with graphics depicting a carnival carousel. That part works quite well but in order to make it look even more realistic, I want to set the zIndex (or z-index) in the Carousel II script to the background (e.g. '1') so that I might superimpose fillagreed ornamentation hanging from the top of the structure over the top edge of the displayed images. Unfortunately, all attempts on my part to modify the JavaScript code to do this seem to do nothing.

    Question:
    Is it possible to have the animated carousel imagery rotate behind overlapping
    elements such as a div or img?

    Thanks in advance for any-and-all assistance.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Yes, but you need to understand how z-index stacking works in conjunction with position.

    Various browsers will make exceptions under some circumstances. However, the general rule is that the item you are stacking and the item you are stacking over must both have either relative or absolute position. You can mix and match, but each must have at least one of these.

    Now everything in the slideshow that you can see already has position absolute, and the default z-index, which is 0. So all you need to stack on top of it is another element or elements with either absolute or relative positioning and a z-index greater than 0. Just to be safe, I always suggest starting with a z-index of 10000 for the top element. This can usually be lowered to 1 later, as long as whatever it is covering has z-index 0.

    One other thing to remember is that z-index is inherited for positioned elements. So, if you have a parent element with either absolute or relative position, none of its children, no matter how they are z-indexed can have an effective z-index (in relation to neighbors - siblings or higher - of the parent) higher than that of the parent.
    Last edited by jscheuer1; 12-29-2007 at 06:57 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •