...

View Full Version : jQuery fading slide show images?



resinpot
01-15-2011, 10:05 AM
I have a slide show type feature on my webpage, and I need each 'thumbnail' to fade into and out from an alternate image when hovered, as well as each 'main pic' to fade in and out when its respective thumbnail is hovered.. Any ideas?

http://resin.webs.com/testss.html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing music</title>

<script type='text/javascript' src='jquery-1.4.4.min.js'></script>

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>

<script type="text/javascript">
var images = ["test","test2","test3"];

captions = ["<img src=test5.jpg width=60>", "<img src=test4.jpg width=60>", "<img src=test3.jpg width=60>"];

var curPic = 0;
function movePix(moveBy)
{
curPic = (curPic + moveBy + images.length) % images.length;
document.getElementById("caption").innerHTML = captions[curPic];
}
function bigpic( )
{
document.getElementById("MAINPIX").src =
"http://kingjjrich.webs.com/" + images[curPic] + ".jpg";
document.getElementById("MAINPIX").style.visibility = "visible";
}
function SETUP( )
{
movePix(0);
}
</script>

<style type="text/css">

body
{
}

#wrap
{
width: 900px;
margin: 0 auto;
}

#mainpic
{
width: 300px;
height: 300px;
vertical-align: middle;
margin: 0 auto;
}

#leftarrow
{
float: left;
width: 420px;
height: 100px;
}

#caption
{
float: left;
width: 60px;
height: 60px;
padding: 20px 0px;
}

#rightarrow
{
float: left;
width: 420px;
height: 100px;
}

#preloader
{
visibility: hidden;
width: 900px;
margin: 0 auto;
}

</style>

<style>

div.fadehover {
position: relative;
}

img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

img.b {
position: absolute;
left: 0;
top: 0;
}

</style>

</head>

<body onload="SETUP();">

<div id="wrap">
<div id="mainpic">
<img id="MAINPIX" style="width: 300px; height: 300px; visibility: hidden;" />
</div>
<div id="leftarrow" class="fadehover">
<img src="testleftarrow.gif" width="100" height="100" class="a" onclick="movePix(-1);" style="left: 320px" />
<img src="testrightarrow.gif" width="100" height="100" class="b" style="left: 320px" />
</div>
<div id="caption" onmouseover="bigpic()">
</div>
<div id="rightarrow" class="fadehover">
<img src="testrightarrow.gif" width="100" height="100" class="a" onclick="movePix(1);" />
<img src="testleftarrow.gif" width="100" height="100" class="b" />
</div>
</div>

<div id="preloader">
<img src="test.jpg" width="1px" height="1px">
<img src="test2.jpg" width="1px" height="1px">
<img src="test3.jpg" width="1px" height="1px">
<img src="test4.jpg" width="1px" height="1px">
<img src="test5.jpg" width="1px" height="1px">
</div>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum