CMotion Image Gallery Script

[dmwhipp]

I love this script (http://www.dynamicdrive.com/dynamici...ongallery2.htm and http://home.comcast.net/~jscheuer1/s...auto_width.htm) and am using it here:
http://www.lucchiniphoto.com/portfolio/families.html

Occasionally though, a picture will have a weird effect where you can see little random white squares. When I open the photo in my graphics program, there appears to be no problem, but it definitely looks funky on the site. Here's an example:
http://www.lucchiniphoto.com/portfolio/families.html
In the first photo of the couple with the dog, two dots appear on the guys sweater. On the 4th picture with the child's and adult's hands, the dots are almost tan, but when you click on the picture again in the lower slideshow, they become bright white.

Any ideas on what might be causing this and how to fix it?
Thanks,
Deborah
__________________
Deborah Whipp
Web Designer
Tallahassee, FL
www.DWWebDesigns.com


dmwhipp
View Public Profile
Send a private message to dmwhipp
Send email to dmwhipp
Visit dmwhipp's homepage!
Find all posts by dmwhipp
Add dmwhipp to Your Buddy List

#28 Today, 05:30 PM
jscheuer1
Mad Professor Join Date: Mar 2005
Location: SE PA USA
Posts: 7,525



--------------------------------------------------------------------------------

Quote:
Originally Posted by dmwhipp
. . .a picture will have a weird effect where you can see little random white squares.

Any ideas on what might be causing this and how to fix it?
Thanks,
Deborah

I got a response from John after posting in the wrong place -
That has nothing to do with the Cmotion script. It has to do with the fading of the larger images, is a known issue affecting only .jpg images faded in IE that have been processed since the original image (if it is a photo) was made.

- but was wondering on how to go about fixing this.

Thanks,
Deborah

[jscheuer1]

As I said, it has nothing to do with Cmotion. This is the script on your page where the fading (and therefore the problem) occurs:

/***********************************************
* Thumbnail Viewer III modified from
* Ultimate Fade-In Slideshow (v1.5) and Thumbnail Viewer II:
* both Copyright Dynamic Drive (http://www.dynamicdrive.com)
* modified by jscheuer1 in http://www.dynamicdrive.com/forums
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

My work, at least the modifications. The fading routines are from the Ultimate Fade-In Slideshow (v1.5). However, it is IE that has the problem. If an image has the alpha filter (used by this script and almost all cross browser scripts for fading to get a fading effect in IE) on it, and if that image is a .jpg and has been processed in an image program, these types of artifacts can appear. You can take the image back to an image processing program and convert it to another web supported format or use the smudge retouching tool in an effort to obliterate this artifact.

If you go the second route, it is tricky. You cannot see the artifact in the image processing program so, you have to remember where the artifact(s) were. To make matters worse, simply smudging will not always take care of it, it may simply move it around. With patience and determination and a little skill, this can be accomplished eventually. With luck, sooner rather than later.

It would be tempting to think that there could be a way around this by using a different type of fading in IE. IE supports at least one other type of fading that could be used in this type of script but, it would be complicated to institute as the means by which this is carried out in code would have to follow an entirely separate track than that for all other browsers. At least with alpha filter fading, the math is roughly equivalent. That's not the real problem to this approach though. The real problem is that all fading in IE, however it is accomplished, exhibits these same artifacts in a given image in the same spot(s).

One other idea which occurs to me is that the filter could be removed and reapplied to the images as needed for fading purposes. This wouldn't eliminate the problem completely but, would allow the image, when fully opaque, to appear without these artifacts. While in transition, they would still be evident.

[jscheuer1]

OK, I have worked this out starting from the script on your page:

Thumbnail Viewer III

Substitute this function fadepic(obj) for the existing one (additions red):

function fadepic(obj){
if (obj.degree<100){
if (obj.tempobj.filters&&obj.tempobj.filters[0]&&typeof obj.tempobj.ofilter=='undefined')
obj.tempobj.ofilter=obj.tempobj.style.filter
obj.degree+=5
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
if (obj.tempobj.filters&&obj.tempobj.filters[0]&&typeof obj.tempobj.ofilter!=='undefined')
obj.tempobj.style.filter=null
clearInterval(fadeclear[obj.slideshowid])
obj.pausecheck=flag=1
}
}

Then for the displayarea.prototype.resetit=function() - use this one (additions/changes red):

displayarea.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters){
if (typeof crossobj.ofilter!=='undefined')
crossobj.style.filter=crossobj.ofilter
if(crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}

As I said, this will not completely eliminate the artifacts but, will remove them when the image is completely opaque or 'at rest'. What it is doing is storing the filter just before the image's first fade in, and then removing it after each time the image has faded in. It later restores the filter just before the script needs to reset the object's opacity to one tenth normal to start its fading action the next time it is needed to fade in.

[jscheuer1]

Looks like you did a good job retouching the images or did you find an easier way?

[dmwhipp]

Hi John,
Thanks so much for creating that fix - it's working wonderfully! I had touched up some of the photos in the Families section, but gave up on a few in the Corporate section. It totally eliminates the artifacts when "at rest' as you said, and that's where the photos really need to look their best.

Sorry I didn't thank you earlier, but I didn't know you had added this till someone emailed me referencing this discussion. I just implemented your code a few minutes ago and it's working like a dream.
Thanks again,
Deborah