Im sure you already know but the onmouseover events to vary the reflections opacity does not work in IE, is there any way around this?

 Did the refloectomatic for http://www.appliedwebhost.com/temp.gif and the image doesn’t appear right in the reflection.

http://www.ImageShack.us” />

Reflection.js was very easy to integrate.  

Thank you,

Paul 

I have applied the Reflections 1.6 and my Lightbox mod and for some strange reason it isn’t working in IE. Firefox is fine. I did notice however it doesn’t seem to matter what version of Reflections it is. I have pin pointed it down to the Lightbox.js. It seems to be doubling the size of the background needed. Any help would be greatly appreciated. Here’s the link http://www.comfypad.com/test.php

Thanks

Jon 

It is the reflections file, 1.5 is fine 1.6 seems to double the size of the image in the lightbox.

Just thought I should let you know

Kudos! 

why shouldn’t be less than 4 Kb

// getElementsByClassName with JSL [http://www.devpro.it/JSL/]document.getElementsByClassName = function(className) {	var 	result = [], re = new RegExp("\\b".concat(className, "\\b"));	for(var i = 0, list = document.getElementsByTagName("*") || document.all, j = list.length; i < j; i++)		result.push(list[i]);	return result.filter(function(){return re.test(arguments[0].className)});};

var Reflection = {	defaultHeight : 0.5,	defaultOpacity: 0.5,	add:	function(image, options) {		var	reflectionHeight = 0,			div = document.createElement("div"),			reflection = {}, context = {}, gradient, doptions = {"height":this.defaultHeight, "opacity":this.defaultOpacity};		this.remove(image);		if(options) {			if(!options.height)				options.height = doptions.height;			if(!options.opacity)				options.opacity = doptions.opacity;		}		else			options = doptions;		reflectionHeight = Math.floor(image.height * options.height);		div.className = image.className.replace(/\breflect\b/, "");		image.className = "reflected";		div.style.cssText = image.style.cssText;		image.style.cssText = "vertical-align: bottom";		if(document.all && !window.opera) {			reflection = document.createElement("img");			reflection.src = image.src;			reflection.style.width = image.width + "px";			reflection.style.marginBottom = "-".concat(image.height - reflectionHeight, "px");			reflection.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=".concat(options.opacity*100, ",style=1,finishOpacity=0,startx=0,starty=0,finishx=0,finishy=", options.height*100, ")");		}		else {			reflection = document.createElement("canvas");			reflection.style.height = reflectionHeight + "px";			reflection.style.width = image.width + "px";			reflection.height = reflectionHeight;			reflection.width = image.width;			context = reflection.getContext("2d");			context.save();			context.translate(0,image.height-1);			context.scale(1,-1);			context.drawImage(image, 0, 0, image.width, image.height);			context.restore();			context.globalCompositeOperation = "destination-out";			gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);			gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");			gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options.opacity)+")");			context.fillStyle = gradient;			if (navigator.appVersion.indexOf("WebKit") !== -1)				context.fill();			else				context.fillRect(0, 0, image.width, reflectionHeight*2);		};		div.style.width = image.width + "px";		div.style.height = Math.floor(image.height*(1+options.height)) + "px";		image.parentNode.replaceChild(div, image);		div.appendChild(image);		div.appendChild(reflection);	},	remove:	function(image) {		if (image.className == "reflected") {			image.className = image.parentNode.className;			image.parentNode.parentNode.replaceChild(image, image.parentNode);		}	}};

function addReflections() {	for(var i = 0, rimages = document.getElementsByClassName("reflect"); i < rimages.length; i++) {		var rheight = null, ropacity = null, classes = rimages[i].className.split(' ');		for (var j = 0; j < classes.length; j++) {			if (classes[j].indexOf("rheight") == 0)				rheight = classes[j].substring(7)/100;			else if (classes[j].indexOf("ropacity") == 0)				ropacity = classes[j].substring(8)/100;		};		Reflection.add(rimages[i], { height: rheight, opacity : ropacity});	}

};

var previousOnload = window.onload;window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }