White pixels appearing in image (IE only)

JennyChaos · #1 (**permalink**) Jul 17th, 2007, 09:04

The JavaScript image viewer that I am using is causing a strange effect in my images - you can see what I mean by looking at http://www.chloechaos.com/gallery5.html. If you click on the first thumbnail, you will see two white pixels (one in the the top left corner at about (80,80) and one on the edge of the jacket sleeve). The second image loads without a problem and if you click on the third thumbnail the same things happen - two strange white pixels appear in the bottom left corner, near the foot.

I've only tested in IE6, IE7 and Firefox and the problem only occurs in Internet Explorer. firefox displays all images correctly.

Is this only happening to me or can anyone else see this effect?

Does anyone know why this is happening?

Time to change to Lightbox?

Thanks,

Jenny

AndrewFelix · #2 (**permalink**) Jul 20th, 2007, 02:10

Hi Jenny.

Did you fix the problem? I'm not seeing it in either Firefox or IE.

JennyChaos · #3 (**permalink**) Jul 20th, 2007, 08:49

That is weird. Yes, I still have the problem.

These are two cropped screenshots showing the problem which I have highlighted:

The first image:

The third image:

I have added a fourth image, and it also has two white pixels on the left side.

Am I really the only one with this problem? I have tested both on my laptop and on the desktop PC.

If I don't find a solution I guess I will just have to use a different image viewer and see what happens.

Jenny

pa007 · #4 (**permalink**) Jul 20th, 2007, 09:09

That's very strange. It must be th JS but I don't know why. Often there can be little JS glitches and what not if there is a lot of JS on a page but image galleries tend to be quite lightweight. I'd recommend switching to another image gallery/viewer, of you don't want to then post up the JS code and I'll take a look and see if I can spot what might be causing this.

Pete.

JennyChaos · #5 (**permalink**) Jul 20th, 2007, 11:42

Thanks Pete.

I have no problem using a different image viewer, but I am the kind of person who likes to find out exactly wjy something is happening, so I'll post the code for you to have a look at (included in the <head> section of the page):

Code: Select all

<script type="text/javascript">
// -------------------------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Jan 22nd, 2007
// -------------------------------------------------------------------
var thumbnailviewer={
enableTitle: true, //Should "title" attribute of link be used as description?
enableAnimation: true, //Enable fading animation?
definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for footer interface
defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div
/////////////No need to edit beyond here/////////////////////////
scrollbarwidth: 16,
opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
targetlinks:[], //Array to hold links with rel="thumbnail"
createthumbBox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>'+this.definefooter+'</div>')
document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
this.thumbBox=document.getElementById("thumbBox")
this.thumbImage=document.getElementById("thumbImage") //Reference div that holds the shown image
this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
},
 
centerDiv:function(divobj){ //Centers a div element on the page
var ie=document.all && !window.opera
var dom=document.getElementById
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
var objwidth=divobj.offsetWidth //width of div element
var objheight=divobj.offsetHeight //height of div element
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
divobj.style.left=docwidth/2-objwidth/2+"px" //Center div element horizontally
divobj.style.top=Math.floor(parseInt(topposition))+"px"
divobj.style.visibility="visible"
},
showthumbBox:function(){ //Show ThumbBox div
this.centerDiv(this.thumbBox)
if (this.enableAnimation){ //If fading animation enabled
this.currentopacity=0.1 //Starting opacity value
this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20)
}
},
 
loadimage:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail"
if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on the page already
this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox
var imageHTML='<img src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />' //Construct HTML for shown image
if (this.enableTitle && link.getAttribute("title")) //Use title attr of the link as description?
imageHTML+='<br />'+link.getAttribute("title")
this.centerDiv(this.thumbLoading) //Center and display "loading" div while we set up the image to be shown
this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown image's HTML (while still hidden)
this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself
this.featureImage.onload=function(){ //When target image has completely loaded
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world!
}
if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
this.featureImage.src=link.getAttribute("href")
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over
}
},
setimgopacity:function(value){ //Sets the opacity of "thumbimage" div per the passed in value setting (0 to 1 and in between)
var targetobject=this.featureImage
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
else //Non of the above, stop opacity animation
this.stopanimation()
},
opacityanimation:function(){ //Gradually increase opacity function
this.setimgopacity(this.currentopacity)
this.currentopacity+=0.1
if (this.currentopacity>1)
this.stopanimation()
},
stopanimation:function(){
if (typeof this.opacitytimer!="undefined")
clearInterval(this.opacitytimer)
},
 
closeit:function(){ //Close "thumbbox" div function
this.stopanimation()
this.thumbBox.style.visibility="hidden"
this.thumbImage.innerHTML=""
this.thumbBox.style.left="-2000px"
this.thumbBox.style.top="-2000px"
},
cleanup:function(){ //Clean up routine on page unload
this.thumbLoading=null
if (this.featureImage) this.featureImage.onload=null
this.featureImage=null
this.thumbImage=null
for (var i=0; i<this.targetlinks.length; i++)
this.targetlinks[i].onclick=null
this.thumbBox=null
},
dotask:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},
init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail"
if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if statement
pagelinks[i].onclick=function(){
thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image
return false
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP
//Reposition "thumbbox" div when page is resized
this.dotask(window, function(){if (thumbnailviewer.thumbBox.style.visibility=="visible") thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")
 
} //END init() function
}
thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer
thumbnailviewer.dotask(window, function(){thumbnailviewer.init()}, "load") //Initialize script on page load
thumbnailviewer.dotask(window, function(){thumbnailviewer.cleanup()}, "unload")
</script>

As I am not a JavaScript programmer, the code doesn't tell me a lot, but you are right, it does seem to be quite lightweight and I have no idea where any bug could have crept in.

Thanks for checking, but as I said, if you can't find anything and I have to use a different viewer it isn't ra problem.

Cheers,

Jenny

pa007 · #6 (**permalink**) Jul 20th, 2007, 11:53

I'll have a good look in a minute but where did you get this code from. Did someone write it for you or is it from a site somewhere?

Pete.

JennyChaos · #7 (**permalink**) Jul 20th, 2007, 12:06

No, the script is from dynamicdrive.com - and I've actually just found the solution on http://www.alexjudd.com/?p=5 - the problem is that under certain cirumstances (such as when this script is executed) IE treats true black pixels as transparent. I have slightly adjusted the levels in Photoshop by moving the true black slider slightly to the right (changing the pixels from #000000 to #010101 or something similar) and tested locally - voilà, the problem has disappeared. Now I will have to edit all the images and upload them again.

Glad to have found a solution but it's still weird that no-one else has noticed the effect...

Thanks anyway for the help,

Jenny

pa007 · #8 (**permalink**) Jul 20th, 2007, 12:12

Well I didn't help you in the end but am glad you found a solution. Its a very strange bug though. That ie for you i guess.

Pete.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
mystery non-appearing image	jessixcate	Graphics and 3D	1	Apr 14th, 2007 02:48
rollover effect. origional image not appearing	WeirdClayJisKOOL	Web Page Design	4	Mar 3rd, 2007 13:59
Removing the White Box around an image in Dreamweaver...	kidflavor	Graphics and 3D	3	Feb 6th, 2007 22:38
em vs pixels	daygon	Web Page Design	3	Nov 17th, 2006 07:43
Resizing (in pixels)	danburzo	Graphics and 3D	2	Jun 19th, 2005 11:06

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
White pixels appearing in image (IE only)