Hello,
I have an image gallery that fades images in once you click a link, however, I would like it to display my first image when the page loads.
Here is my JS
$(document).ready(function() {
$('a.title1').click(function(){
// get the ID of the image to fade in
var targetID = $(this).attr("id").replace("title1_", "movtitle1_");
// if there are any active images in the container
if ($('#imageContainer1 img.active').length > 0){
// fade them out (and remove the flag)
$('#imageContainer1 img.active').fadeOut(100, function(){
// when the fade out is done, fade in the new image and flag it
$('#'+targetID).fadeIn('normal').addClass('active');
}).removeClass('active');
// if there aren't any active images
}else{
$('#'+targetID).fadeIn('normal').addClass('active');
}
});
});
Here is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>babbabab</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-personalized-1.5.3.packed.js" type="text/javascript"></script>
<script src="js/rotate_main.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapImage">
<div id="imageContainer1">
<img id="movtitle1_1" src="images/rotating_banners/corp_banner_a.jpg" width="580" height="370" alt="Black Pedestal Crystal" />
<img id="movtitle1_2" src="images/rotating_banners/corp_banner_b.jpg" width="580" height="370" alt="Gift Items" />
<img id="movtitle1_3" src="images/rotating_banners/corp_banner_c.jpg" width="580" height="370" alt="Awards" />
</div>
<div class="menuWrap">
<a href="#" id="title1_1" class="title1">Image 3</a>
<a href="#" id="title1_2" class="title1">Image 2</a>
<a href="#" id="title1_3" class="title1">Image 1</a>
</div>
</div>
</div>
</body>
</html>
any help would be appreciate, as I am a novice when it comes to javascript/jquery.
Thanks,
J