changing multiple z-indexes

**ctoz** · 10-01-2012 06:36 AM

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.

**007Julien** · 10-01-2012 07:53 AM

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

**ctoz** · 10-01-2012 07:34 PM

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.

**007Julien** · 10-02-2012 04:16 AM

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);

**coothead** · 10-02-2012 05:21 AM

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

**ctoz** · 10-08-2012 06:05 AM

Hi, and thankyou: two economical and elegant solutions.

The more you know, the easier it gets?

Cheers, and thanks again.

**coothead** · 10-08-2012 06:42 AM

No problem, you're very welcome.

coothead

**ctoz** · 10-08-2012 07:05 AM

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: changing multiple z-indexes

Thread Tools

Display

changing multiple z-indexes

many thanks

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions