Problem with slideshow and transparent pngs
Permalink 1 user found helpful
Hi
I have set up a slideshow which uses transparent PNGs. It displays fine in all browsers except Internet Explorer (even 8 doesn't display properly). The problem is the image has a thick black border where a nice drop shadow should be. I'm guess it must be something to do with the slideshow block as the exact same images are used elsewhere but just as single images using the image block and they display fine. Anyone come across this problem before and is it fixable??
Thanks in advance.
I have set up a slideshow which uses transparent PNGs. It displays fine in all browsers except Internet Explorer (even 8 doesn't display properly). The problem is the image has a thick black border where a nice drop shadow should be. I'm guess it must be something to do with the slideshow block as the exact same images are used elsewhere but just as single images using the image block and they display fine. Anyone come across this problem before and is it fixable??
Thanks in advance.
I have the same problem, thinking it will need a browser specific check for if internet exploder then show a static image, yuck, thank you microsoft
I believe incorporating this filter might do it.
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
Added this to the file in its addImg function
concrete/blocks/slideshow/view.php
if (navigator.appName=="Microsoft Internet Explorer") {
el.innerHTML='<div style="height:'+this.imgInfos[num].imgHeight+'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+escape(imgURL)+'\', sizingMethod=\'scale\') center no-repeat"> </div>';
}
else {
el.innerHTML='<div style="height:'+this.imgInfos[num].imgHeight+'px; background:url(\''+escape(imgURL)+'\') center no-repeat"> </div>';
}
concrete/blocks/slideshow/view.php
if (navigator.appName=="Microsoft Internet Explorer") {
el.innerHTML='<div style="height:'+this.imgInfos[num].imgHeight+'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+escape(imgURL)+'\', sizingMethod=\'scale\') center no-repeat"> </div>';
}
else {
el.innerHTML='<div style="height:'+this.imgInfos[num].imgHeight+'px; background:url(\''+escape(imgURL)+'\') center no-repeat"> </div>';
}
