• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1272
  • 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

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