PDA

View Full Version : Image Thumbnail Viewer : White dots in popup image



caddy
11-16-2007, 09:21 PM
1) Script Title: Image Thumbnail Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem: I've been using this script for a while. However, in my latest gallery, I have a lot of areas with very deep blacks. Scattered white dots appear only in the black areas of the popup image, but only in IE6. These dots are not in the image and don't appear when viewing in FF, Safari, or Opera. I've also seen the same effect on several other computers using IE.

To see this effect, visit http://www.cliffaddy.com/proofs/weddingGalleries/schwabe-hettinger/ and click on second image of the third row, this one shows the effect worst of all.

Cliff

jscheuer1
11-16-2007, 10:03 PM
Only happens in IE. Those artifacts can be eliminated by skillful manipulation of the black level in a decent image editing program like The Gimp, Paint Shop Pro or Photoshop. I use Paint Shop Pro. In that you choose:

colors > adjust > levels

Then you can change the input level of 0 to an output level of - say 9, it varies but is usually just a few points difference. You cannot see the results of your efforts until you view the image in IE in a script (like this one) that filters it.

However, I also noticed that with this particular script on your particular page that changing the css background-color value for the thumbImage selector to black seemed to work. In thumbnailviewer.css (addition red):


#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
}

#thumbImage {
background-color: black;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}

caddy
11-16-2007, 10:11 PM
Only happens in IE. Those artifacts can be eliminated by skillful manipulation of the black level

So I presume you're saying that in IE absolute black is treated as transparent?

I batch output from Lightroom, sometimes 3-4000 images at a time, so individual level adjustment is out of the question. Changing the background color in CSS worked. Thanks.

Cliff

jscheuer1
11-16-2007, 10:36 PM
So I presume you're saying that in IE absolute black is treated as transparent?

Not exactly, but very close. I'm saying that certain black, and/or near black levels in images that are filtered or that are the children of elements that are filtered in IE can exhibit transparency. Of course, depending upon the overall layout (scripted or otherwise) of the situation, this can often be overcome via a simple background color change. I wouldn't want to say 100% with this script, but it looks as though that would be true. However, more complex scripts (or even this one, in certain cases) might require the level adjustment I mentioned earlier.

Glad it worked out with style here, the other method is a pain, especially when many images are involved.