Solved

adding a fade effect to javascript image slideshow

Posted on 2009-05-10
3
1,237 Views
Last Modified: 2012-06-27
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
Comment
Question by:jmoriarty
3 Comments
 
LVL 10

Accepted Solution

by:
mstrelan earned 250 total points
ID: 24351796
easiest is to use a jquery plugin
http://www.serie3.info/s3slider/ is very good
0
 
LVL 8

Assisted Solution

by:Haris V
Haris V earned 250 total points
ID: 24351813
0
 

Author Comment

by:jmoriarty
ID: 24372038
Hey folks,

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

0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now