jQuery Image Slideshow: captions not transparent in IE

Question

I have created a slideshow of images using jQuery. The images fade between each other. There are captions for each image, each inside its own div. As the image is faded in the related caption slides up. The caption is meant to be transparent and this works in all browsers (that i have tested it with) except IE.

The website can be found at http://mtsoc.enfotext.com

The javascript (for one of the slideshows) is:

function slideShow() {

//Set the opacity of all images to 0
$('#mainfeature a').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('#mainfeature a:first').css({opacity: 1.0});

//Set the caption background to semi-transparent
$('#mainfeature .caption').css({opacity: 0.7});

//Call the gallery function to run the slideshow
setInterval('main_gallery()',8000); }


function main_gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('#mainfeature a.show')?  $('#mainfeature a.show') : $('#mainfeature a:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#mainfeature a:first') :current.next()) : $('#mainfeature a:first'));  

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');

//Set the opacity to 0 and height to 1px
$('#mainfeature .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); 

//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#mainfeature .caption').animate({opacity: 0.7},100 ).animate({height: '50px'},500 ); }

The css is:

#mainfeature .feature {
color: #fff;
display: block;
position: absolute;
overflow: hidden;
z-index: 1; }

#mainfeature .caption {
background: #333;
padding: 10px;
position: absolute;
left: 0;
bottom: 0;
z-index: 600;
height: 50px;
opacity: 0.7;
filter: alpha(opacity = 70);
width: 575px; }

The HTML is:

<div id="mainfeature">
<a href="#" class="show feature">
<img src="<?php bloginfo('template_directory'); ?>/images/12.jpg" />
<div class="caption">
  <span class="tag">Spring Show</span>
  <span class="title">A Funny Thing Happened on the Way to the Forum</span>
  <span class="detail">Through June 15</span>
</div></a>
... more slides...
</div>

Anyway, long question, lots of information. Does anyone have any idea why the captions are not transparent in IE?

Thanks

Answer 1

IE doesn't implement the filter CSS property. You will need to use something like filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); for transparency in IE. Alternatively you can use a PNG background image and use JS to apply transparency. Lots of options out there.

Answer 2

Seems the problem is the nested opacity settings.

If you browse the dom with the Dev Toolbar, you can achieve the proper look by removing the

filter:alpha(opacity=100)

from the a.feature tag (must be done while the anchor is visible).

There's a couple things you could do. If you have to have the entire anchor fade in and out than you can add a line at the bottom which removes the opacity style

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000, null, function(){ next.removeAttr("style"); });

Also, you may wish to consider using the fadeIn/fadeOut functions as these are designed to properly apply opacities over a range.

Answer 3

A decent cross browser method of setting opacity in jQuery is to use the .fadeIn/.fadeOut/.fadeTo.

I realize that these are meant for animated opacity setting, but you can change the timing to suit your requirements. The other answers set forth are more robust, but require a little more maintenance.

Hope that helps.

Answer 4

I found that if I hid an element that had a class with transparency css rules, I had (for IE only of course) to re-establish the filter css rule when I showed the element again.

This worked for me:

$(".selected").find(".overlay").css("filter", "alpha(opacity=80)").fadeIn(500);