• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1264
  • Last Modified:

adding a fade effect to javascript image slideshow

Hey folks,

I have a script another member was gracious enough to help me build that's essentially a glorified timed image slideshow. Everything works well, and it does what I want it to, but now that I've extended it a bit to add some additional images, urls and so forth I'd like to add a fadeout/fade in effect between slides. What's the best way to go about this?

A bit new to javascript; primarily a php/mysql guy; I do have jquery available as well.

Thanks!
///////////////////////////////////////////JAVASCRIPT///////////////////////////////////////
<script language="javascript">
 
<!--
numSeconds = 3000;
numCurrentImg = 0;
numPhotos = 3;
timer = null;
var imgPhoto1 = new Image();
imgPhoto1.src = "images/1.jpg";
var imgPhoto2 = new Image();
imgPhoto2.src = "images/2.jpg";
var imgPhoto3 = new Image();
imgPhoto3.src = "images/3.jpg";
 
var link1 = "images/1.html";
var link2 = "images/2.html";
var link3 = "images/3.html";
 
var urls = new Array(
        "images/1.htm",
        "images/2.htm",
        "images/3.htm"
);
 
 
 
function swapImg( numNewImg ) {
	
	var url = document.getElementById("imagelink");
	eval("document.imgMain.src = imgPhoto" + numNewImg + ".src");
	url.setAttribute("href", urls[numNewImg-1]);
	if (document.getElementById('imgLabel'))
		document.getElementById('imgLabel').innerHTML = numNewImg;
	numCurrentImg = numNewImg;
	
}
 
function startShow() {
	if (timer == null)
	    swapTimeout();
}
 
function stopShow() {
	if (timer != null){
		window.clearTimeout(timer);
		timer = null;				
	}
}
function toggleShow() {
	if (timer == null) {
	    startShow();
	} else {
		stopShow();				
	}
}
 
function nextImg() {
	stopShow();
	$("rotateImage").fadeOut("slow");
	var url = document.getElementById("imagelink");
	numNewImg = numCurrentImg+1;	   
	if (numNewImg > numPhotos)
		numNewImg = 1
	eval("document.imgMain.src = imgPhoto" + numNewImg + ".src");
 
	url.setAttribute("href", urls[numNewImg-1]);
	if (document.getElementById('imgLabel'))
		document.getElementById('imgLabel').innerHTML = numNewImg;
	numCurrentImg = numNewImg;
}
 
function prevImg() {
	
	stopShow();
	var url = document.getElementById("imagelink");
	numNewImg = numCurrentImg-1;
	if (numNewImg < 1)
		numNewImg = numPhotos
	eval("document.imgMain.src = imgPhoto" + numNewImg + ".src");
	
 
	var url = document.getElementById("imagelink");
	url.setAttribute("href", urls[numNewImg-1]);
	if (document.getElementById('imgLabel'))
		document.getElementById('imgLabel').innerHTML = numNewImg;
	numCurrentImg = numNewImg;
}
 
function swapTimeout() {
 
	if ( numCurrentImg == numPhotos ) { // We've just displayed the last img.
		numCurrentImg = 1;
	} else {
		numCurrentImg++;
	}
 
	swapImg(numCurrentImg);
	timer = window.setTimeout(swapTimeout, numSeconds);
}
//-->
 
function swapImage2(imageid) {
 
switch (imageid) {
 case 1:
   stopShow();
   rotateImage.src = imgPhoto1.src;
   imagelink.href=urls[0];
   return(false);
case 2:
   stopShow();
   rotateImage.src = imgPhoto2.src;
   imagelink.href=urls[1];
   return(false);
case 3:
   stopShow();
   rotateImage.src = imgPhoto3.src;
   imagelink.href=urls[2];
   return(false);
 
 }
}
 
 
 
window.onload = startShow;
 
</script>
////////////////////////////////////////////////////////////CSS///////////////////////////////
<style>
 
.float_text {
        font-family:"Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Arial, sans-serif;
        font-size:16px;
        background-color:red;
        z-index:55;
        position:absolute;
        top:-1px;
        left:5px;
}
.float_text h1 {
        
        font-size:22px;
        letter-spacing:-1px;
        margin:5px; padding:5px;
        top: 5px;
}
 
.float_box {
        width:300px;
        height:30px;
        position:absolute;
        top:420px;
        
        background-color:white;
        /*top:550px;
        left:15;*/
        z-index:35;
 
}
 
 
#rotateDiv { position:absolute; top:0; left:0; z-index:15; }
 </style>
 
/////////////////////////////////////////////////////////HTML//////////////////////////////////
<body>
 
 
 
 
                        <div class="float_box" id="floatbox">
                              
                                <!--<div class="float_text" id="navbox" onclick="" > -->
                                
                                <span onclick="swapImage2(1);" id="swap1">swap1</span>
                                <span onclick="swapImage2(2);" id="swap2">swap2</span>
                                <span onclick="swapImage2(3);" id="swap3">swap3</span>
                                <span onclick="prevImg();" id="Previous">Previous</span>
                                <span onclick="nextImg();" id="Next">Next</span>
                                
                               
                        </div>
                           
                           
                                <div id="rotateDiv">
                                <a href="1.htm" name="imagelink" id="imagelink"><img src="images/1.jpg" id="rotateImage" name="imgMain" border="0" title="" alt=""></a>
                        </div>
                
 
</body>
 
---------------------------------------------------------------------
and to make it easy for you, everything in one file:
----------------------------------------------------------------------
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Swap Image</title>
	<script type="text/javascript" src="jquery.js"></script>
 
 
 
<script language="javascript">
 
<!--
numSeconds = 3000;
numCurrentImg = 0;
numPhotos = 3;
timer = null;
var imgPhoto1 = new Image();
imgPhoto1.src = "images/1.jpg";
var imgPhoto2 = new Image();
imgPhoto2.src = "images/2.jpg";
var imgPhoto3 = new Image();
imgPhoto3.src = "images/3.jpg";
 
var link1 = "images/1.html";
var link2 = "images/2.html";
var link3 = "images/3.html";
 
var urls = new Array(
        "images/1.htm",
        "images/2.htm",
        "images/3.htm"
);
 
 
 
function swapImg( numNewImg ) {
	
	var url = document.getElementById("imagelink");
	eval("document.imgMain.src = imgPhoto" + numNewImg + ".src");
	url.setAttribute("href", urls[numNewImg-1]);
	if (document.getElementById('imgLabel'))
		document.getElementById('imgLabel').innerHTML = numNewImg;
	numCurrentImg = numNewImg;
	
}
 
function startShow() {
	if (timer == null)
	    swapTimeout();
}
 
function stopShow() {
	if (timer != null){
		window.clearTimeout(timer);
		timer = null;				
	}
}
function toggleShow() {
	if (timer == null) {
	    startShow();
	} else {
		stopShow();				
	}
}
 
function nextImg() {
	stopShow();
	$("rotateImage").fadeOut("slow");
	var url = document.getElementById("imagelink");
	numNewImg = numCurrentImg+1;	   
	if (numNewImg > numPhotos)
		numNewImg = 1
	eval("document.imgMain.src = imgPhoto" + numNewImg + ".src");
 
	url.setAttribute("href", urls[numNewImg-1]);
	if (document.getElementById('imgLabel'))
		document.getElementById('imgLabel').innerHTML = numNewImg;
	numCurrentImg = numNewImg;
}
 
function prevImg() {
	
	stopShow();
	var url = document.getElementById("imagelink");
	numNewImg = numCurrentImg-1;
	if (numNewImg < 1)
		numNewImg = numPhotos
	eval("document.imgMain.src = imgPhoto" + numNewImg + ".src");
	
 
	var url = document.getElementById("imagelink");
	url.setAttribute("href", urls[numNewImg-1]);
	if (document.getElementById('imgLabel'))
		document.getElementById('imgLabel').innerHTML = numNewImg;
	numCurrentImg = numNewImg;
}
 
function swapTimeout() {
 
	if ( numCurrentImg == numPhotos ) { // We've just displayed the last img.
		numCurrentImg = 1;
	} else {
		numCurrentImg++;
	}
 
	swapImg(numCurrentImg);
	timer = window.setTimeout(swapTimeout, numSeconds);
}
//-->
 
function swapImage2(imageid) {
 
switch (imageid) {
 case 1:
   stopShow();
   rotateImage.src = imgPhoto1.src;
   imagelink.href=urls[0];
   return(false);
case 2:
   stopShow();
   rotateImage.src = imgPhoto2.src;
   imagelink.href=urls[1];
   return(false);
case 3:
   stopShow();
   rotateImage.src = imgPhoto3.src;
   imagelink.href=urls[2];
   return(false);
 
 }
}
 
 
 
window.onload = startShow;
 
</script>
 
 
</head>
 
<style>
 
.float_text {
        font-family:"Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Arial, sans-serif;
        font-size:16px;
        background-color:red;
        z-index:55;
        position:absolute;
        top:-1px;
        left:5px;
}
.float_text h1 {
        
        font-size:22px;
        letter-spacing:-1px;
        margin:5px; padding:5px;
        top: 5px;
}
 
.float_box {
        width:300px;
        height:30px;
        position:absolute;
        top:420px;
        
        background-color:white;
        /*top:550px;
        left:15;*/
        z-index:35;
 
}
 
 
#rotateDiv { position:absolute; top:0; left:0; z-index:15; }
 </style>
 
<body>
 
 
 
 
                        <div class="float_box" id="floatbox">
                              
                                <!--<div class="float_text" id="navbox" onclick="" > -->
                                
                                <span onclick="swapImage2(1);" id="swap1">swap1</span>
                                <span onclick="swapImage2(2);" id="swap2">swap2</span>
                                <span onclick="swapImage2(3);" id="swap3">swap3</span>
                                <span onclick="prevImg();" id="Previous">Previous</span>
                                <span onclick="nextImg();" id="Next">Next</span>
                                
                               
                        </div>
                           
                           
                                <div id="rotateDiv">
                                <a href="1.htm" name="imagelink" id="imagelink"><img src="images/1.jpg" id="rotateImage" name="imgMain" border="0" title="" alt=""></a>
                        </div>
                
 
</body>
 
</html>

Open in new window

0
jmoriarty
Asked:
jmoriarty
2 Solutions
 
mstrelanCommented:
easiest is to use a jquery plugin
http://www.serie3.info/s3slider/ is very good
0
 
jmoriartyAuthor Commented:
Hey folks,

Thanks, that should be enough information to get me off the ground.

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now