Spry Gallery Demo and IE7 Z-Index Bug
Those seeking a solution to the Z-Index bug in IE7 which causes thumbnails in the Spry Gallery Widget to grow underneath subsequent thumbnails should see this thread in the Spry Forums. I happened to be working on the problem for a client site as another Spry User asked for a solution in the forums.
Spry Galleries use this structure:
<div id="thumbnails">
<div class="thumbnail">
<a href="image.jpg"><img src="image.jpg" /></a>
</div>
</div>
In short, the solution to the problem is to change the z-index of the thumbnail img’s containing ancestor. I initially tried changing the z-index of div.thumbnail on the suggestion of Adobe Developer Kin Blas, but found - as he’d found before - that when thumbnails shrink back to normal size, they return to the top left corner of the ancestor, ignoring any margins or padding applied to the img.
I eventually found success by setting position:relative on the surrounding anchor (div.thumbnail a) and setting margins and padding to the surrounding div.
Relevant code (from SpryThumbViewer.js) and CSS follow. I’ve also retained a demo.
growThumbnail:
Spry.Utils.addClassName(img, "inFocus");
+ var ancestor = Spry.Utils.getAncestor(img, "a");
+ ancestor.style.zIndex = 150;
img.style.zIndex = 150;
shrinkThumbnail:
var self = this;
+ var ancestor = Spry.Utils.getAncestor(img, "a");
Spry.Utils.addClassName(img, "inFocus");
this.sizeAndPosition(img, 0, 0, this.thumbWidth, this.thumbHeight, function(b){self.behaviorsArray[img.spryID] = null;
Spry.Utils.removeClassName(img, "inFocus"); });
img.style.zIndex = 1;
+ ancestor.style.zIndex = 1;
CSS
#thumbnails div {
margin: 12px 8px;
width: 168px;
height: 112px;
float: left;
}
#thumbnails div a {
display:inline;
float:left;
height:112px;
width:168px;
position:relative;
}
#thumbnails div a img {
border: 1px solid #999999;
height:112px;
width:168px;
position:absolute;
}