Results 1 to 6 of 6

Thread: Ultimate Fade Slideshow Z-index Question

  1. #1
    Join Date
    Aug 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade Slideshow Z-index Question

    1) Script Title: Ultimate Fade Slideshow

    2) Describe problem:

    Hopefully this makes sense as I am quite new to this type of development. I have set up the slideshow to appear in a particular div on the right side of my web page. This div is supposed to sit behind the div that is next to it on the left. The end result is that the text in the left div is supposed to overlay a portion of the pictures on the right.

    To do this, I had set up the z-index on the right side to be a higher value than the right. When I use a "static" picture, this works for me as expected. However, when I run the slideshow, it seems to override the z-index value of my right div and overlays the text from the left.

    Does anyone have any ideas about what I can do about this? Hopefully, I made some degree of sense.....

    Any insights would be appreciated.

    Thanks!
    Moez

  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

    As the z-index property of the images is set by the script and varies in order to get the desired overlay fading effect, if you want other content to be over the images, set its z-index high - say, 1000 at least.

    Also, make its position relative or absolute.
    - John
    ________________________

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

  3. #3
    Join Date
    Aug 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John,
    Thank you for getting back with me. Your suggestion did the trick. I set the position of the left cell to relative, with its z-index higher than the right and I obtained the result that I wanted.

    Thanks again!
    Moez

  4. #4
    Join Date
    Aug 2006
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I am not very proficient in these scripts. Please see www.cynsheas.com/galleries/pg_cakes. I have a fadeslideshow script running at the top. As you will see, I have a Visual Light Box photo galleries running just below that. I do not want the fadeslideshow to overlay the photo gallery. Thank you in advance for your help.
    Last edited by jscheuer1; 01-10-2014 at 04:09 PM. Reason: Format

  5. #5
    Join Date
    Aug 2006
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I have tried playing with the z-index settings in fadeslideshow.js, setting them to 0 and then to 3000. Nothing seems to make a difference.

  6. #6
    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

    Don't mess with the slideshow script. In fact, best to put it back the way it was. What you can do is (using a text only editor like NotePad) increase the z-index in the cynsheas.com/galleries/pg_cakes/engine/css/visuallightbox.css file, starting from the top, changes red:

    Code:
    #overlay{
    	position:absolute;
    	top:0;
    	left:0;
    	z-index:1900;
    	width:100%;
    	height:auto;
    	background-color:#151410;
    }
    
    #lightbox{
    	position:absolute;
    	top:20px;
    	left:0;
    	width:100%;
    	z-index:2000;
    	text-align:center;
    	color:#151410;
    	line-height:0;
    }
    
    #lightbox a, #lightb . . .
    Save and use that version of the file.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - 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
  •