Menu
Hey Guys
my problem is more javascript bugs, in IE it has an opacity bug and in firefox I have a image problem.
with IE the opacity creates the back shadow of the rel image Black instead of giving it a nice shadow over the Gallary tag image. is there a solution to this?
on firefox the rel image apears then disapears, then slides from the right to its to where its supposed to slide to. ?How would I stop it from apearing then disapearing on firefox?
<html>
<HEAD>
<title>ha</title>
<style type=”text/css”>
body{
font-family:arial
}
.clear {
clear:both
}
#gallery {
position:relative;
height:389px;
width:960px;
}
#gallery a {
float:left;
position:absolute;
right:0;
}
#gallery a img {
border:none;
}
#gallery a.show {
z-index:500
}
#gallery .caption {
z-index:600;
background-color:Transparent;
color:#ffffff;
height:116px;
width:376px;
position:absolute;
bottom:49px;
right:0;
}
#gallery .caption .content {
margin:5px
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
</style>
<script type=”text/javascript” src=”-Test/js/jquery-1.3.1.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$(‘#gallery a’).css({ opacity: 0.0 });
//Get the first image and display it (set it to full opacity)
$(‘#gallery a:first’).css({ opacity: 100 });
//Set the caption background to semi-transparent
$(‘#gallery .caption’).css({ opacity: 100 });
//Resize the width of the caption according to the image width
$(‘#gallery .caption’).css({ width: $(‘#gallery a’).find(‘img’).css(‘width’) });
//Get the caption of the first image from REL attribute and display it
$(‘#gallery .content’).html($(‘#gallery a:first’).find(‘img’).attr(‘rel’))
.animate({opacity: 1.0}, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval(‘gallery()’,7000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($(‘#gallery a.show’)? $(‘#gallery a.show’) : $(‘#gallery 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’))? $(‘#gallery a:first’) :current.next()) : $(‘#gallery a:first’));
//Get next image caption
var caption = next.find(‘img’).attr(‘rel’);
//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
$(‘#gallery .caption’).animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ width: ‘0px’ }, { queue: true, duration: 300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$(‘#gallery .caption’).animate({opacity: 100},100 ).animate({width: ‘380px’},500 );
//Display the content
$(‘#gallery .content’).html(caption);
}
</script>
</HEAD>
<BODY>
<div id=”gallery”>
<a class=”show”>
<img src=”-Test/s3SliderFull/s3Slider Full/nave_img/image_1.png” alt=”Flowing Rock” title=”” width=”960″ height=”389″ rel=”<a href=’_parent’><img src=’-Test/s3SliderFull/s3Slider Full/nave_img/text_1.png’ alt=’Personal Insurance’/></a>”/>
</a>
<a >
<img src=”-Test/s3SliderFull/s3Slider Full/nave_img/image_2.png” alt=”Grass Blades” title=”” width=”960″ height=”389″ rel=”<a href=’
</a>
<a>
<img src=”-Test/s3SliderFull/s3Slider Full/nave_img/image_3.png” alt=”Grass Blades” title=”” width=”960″ height=”389″ rel=”<span class=’right’> <a href=’_parent’><img src=’-Test/s3SliderFull/s3Slider Full/nave_img/text_3.png’ alt=’Personal Insurance’ width=’376′ height=’116’/></a> </span>”/>
</a>
<a>
<img src=”-Test/s3SliderFull/s3Slider Full/nave_img/image_4.png” alt=”Grass Blades” title=”” width=”960″ height=”389″ rel=”<span class=’right’> <a href=’
</a>
<a>
<img src=”-Test/s3SliderFull/s3Slider Full/nave_img/image_5.png” alt=”Grass Blades” title=”” width=”960″ height=”389″ rel=”<span class=’right’> <a href=’
</a>
<div class=”caption”>
<div class=”content”>
</div>
</div>
</div>
<div class=”clear”></div>
</BODY>
</html>