Allebrum – Business Solutions

Resolved: jQuery Cycler not Working with IE PNGs

22 Aug 2010 Leave a Comment

by senica in Javascript, jQuery Tags: cycle, fading, ie, Internet Explorer, png, transparency

For those of you who have read my stuff before, either here or elsewhere, know that I despise Internet Explorer with a passion.  Nevertheless, until the powers that be (Google) stop supporting it so everyone else can follow suit, us burdened developers must still make our clients happy.

To fuel my anger against IE, I spent hours trying to get the jQuery Cycle plugin working with some PNGs that were laid on top of some other PNGs.  I’m not sure if them being laid on other PNGs had anything to do with it…really didn’t care….should just work…..but it didn’t.

I tried revising the jQuery plugin with no luck.  So I decided to write a custom solution.  I haven’t made this all pretty for you guys to use, so sorry about that.  This is just a case study and I’ll be happy to help you through your problem later.  The issue was explained quite well here: http://stackoverflow.com/questions/1156985/jquery-cycle-ie7-transparent-png-problem; which basically says the problem is that IE can’t handle multiple filters at one time.  So when you are fading your image, an alpha filter is applied to the image and it disregards any other filter you have…which if you have toiled through documents you probably have the Microsoft filter I’m about to mention already applied to your images, scratching your head, and cussing at an inanimate computer screen.

To fix this, we “simply” need to wrap our images in a div and fade the div.

Let’s look at our slideshow html:

<div id="prev"><a href="#"></a></div>
<div id="slides" style="visibility:hidden">
<div style="position:absolute;"><img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image1.png'); margin-top:'.$tmargin.'px" src="image1.png" alt="Thumbnail Image" title="Thumbnail Image" /></div>
<div style="position:absolute;"><img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image2.png'); margin-top:'.$tmargin.'px" src="image2.png" alt="Thumbnail Image" title="Thumbnail Image" /></div>
<div style="position:absolute;"><img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image3.png'); margin-top:'.$tmargin.'px" src="image3.png" alt="Thumbnail Image" title="Thumbnail Image" /></div>
</div>
<div id="next""><a href="#"></a></div>
</div>

To start off with, we make our slides div invisible. We do this so we have time to hide out image after the page loads. If we don’t, there’s a good change that you’ll see all your images dumped down the screen.
Then we wrap out list of images in a div that is absolutely positioned.
Then we apply the ridiculously stupid Microsoft filter to the images.
Now we add a little magic:

<script>
jQuery(document).ready( function(){
	var set = 0;
	var ci = -1;
	var timer;
	function createLoop(dir){
		var id = 'slides';
		var el = 'div';
		var time = 5000;
		var lp = document.getElementById(id).getElementsByTagName(el);
		if(set == 0){
			jQuery("#showcase #next").click( function(){ clearTimeout(timer); createLoop(); } );
			jQuery("#showcase #prev").click( function(){ clearTimeout(timer); createLoop("reverse"); } );
		}
		set = 1;
		if(dir == "reverse"){
			ci = ci-1;
			if(ci < 0){ ci = lp.length-1; }
		}else{
			ci = ci+1;
			if(ci > lp.length-1){ ci = 0; }
		}
		for(var y=0; y<lp.length; y++){
			if(y != ci){ jQuery(lp[y]).fadeOut('slow'); }
		}
		jQuery(lp[ci]).fadeIn('slow');
		timer = setTimeout(function(){ createLoop(); }, time);
	}
	var lp = document.getElementById('slides').getElementsByTagName('div');
	for(var i=1; i<lp.length; i++){
		lp[i].style.display = 'none';
		if(i == lp.length-1){ document.getElementById('slides').style.visibility = 'visible'; setTimeout(function(){ createLoop(); }, 5000); }
	}
});
</script>

var id = 'slides';
var el = 'div';
var time = 5000;
id is the id of the wrapper that is around the img and img div wrapper.
el is the img wrapper. In our case it's a div.
time is the milliseconds until next fade.
We are using a little jquery in there, so you'll need to include jQuery in your file.
Take a look at that and chew it over...it works.  I know that.