www.webdeveloper.com
Results 1 to 8 of 8

Thread: changing multiple z-indexes

  1. #1
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    218

    Lightbulb changing multiple z-indexes

    The problem, in brief:

    30+ small images, layered on top of eachother... old photos, in chronological order, starting from the earliest:earliest photo has highest z-index.

    With jQuery, 2 functions are bound to each image: click, the image enlarges and is draggable; doubleclick, it fades out.

    Watching people try it, they like keeping the screen full of images-- 5-6 take up most of the screen space, and they like the way images slide around under eachother.

    But: what's really wanted is a way to make the latest enlarged image the topmost layer, rather than the bottom-most... apart from individually assigning z-indexes in 30+ individual functions.

    Suggestions very welcome: my vocab is pretty limited, this looks like an opportunity, as they say.

    Cheers.

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    I am not sure to understand the question. With 30 z-indexes, one function is enough to determine the z-index min or max and to attribute its value (more or less one) to the latest enlarged image...

  3. #3
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    218
    Hi,

    just to clarify:

    Photo1 is z-index:50;
    photo2 starts as z:49, and needs to be z:51 when enlarged;
    photo3 starts as z:48 and needs to be z:52 when enlarged;
    photo4 starts as z:47 and need to go to z:53 ...etc.
    The increase in z-index needs to be incremental.

    I'm not sure how to make this happen in one function.

    I did think of starting with the z-indexes going from 0 to -1, -2,-3 etc, and finding a way to change them to positive: but haven't tried it yet.

    Can you suggest a different way?

    cheers.

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    It is not even necessary to recalculate the zMax !
    Define one variables zMax with the initial max value and increment its value before affecting it to the enlarged images

    Code:
    var zMax=50;
    //...
    // Then in the function to enlarge the image
    Object.style.zIndex=++zMax; 
    // Or with jQuery something like
    $(... ).css('z-index',++zMax);

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    Hi there ctoz,

    instead of "zIndex" you could just change the src of the top image in the stack...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <style type="text/css">
    #images {
        position:relative;
     }
    #images img {
        position:absolute;
        cursor:pointer;
     }
    </style>
    
    <script type="text/javascript">
    
    function init(){
    
      ims=document.getElementById('images').getElementsByTagName('img');
      ary=[];
    
    for(c=0;c<ims.length;c++) {
      ary.push(ims[c].src);
      ims[c].number=c-1
     }
    
    ims[ims.length-1].onclick=function(){
    
    if(this.number==-1){
       this.number=ims.length-1;
     }
       this.src=ary[this.number--]; 
      }
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    
    </script>
    
    </head>
    <body>
    
    <div id="images">
     <img src="anim.gif" alt="">
     <img src="anim1.gif" alt="">
     <img src="anim2.gif" alt="">
     <img src="anim3.gif" alt="">
     <img src="anim4.gif" alt="">
     <img src="anim5.gif" alt="">
    </div>
    
    </body>
    </html>
    
    coothead

  6. #6
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    218

    resolved many thanks

    Hi, and thankyou: two economical and elegant solutions.

    The more you know, the easier it gets?

    Cheers, and thanks again.

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    No problem, you're very welcome.


    coothead

  8. #8
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    218
    Been playing with 007Julien's solution, and can bind the function to a mousdown to go with the enlarging, and with a click to bring the image to the top, from wherever.

    But I'm going to suss out your way of doubledealing with the img tag, I think it's got possibilities.

    cheers.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles