is there a way to get this script to fade between images?

**rosaxlouise** · 01-05-2012, 10:49 PM

Code:

<script language="JavaScript">
<!-- hide from other browsers    

//Pictures to switch inbetween

var Rollpic1 = "imge1";
var Rollpic2 = "image2";
var Rollpic3 = "image3";
//Start at the what pic:
var PicNumber=1;
//Number of pics:
var NumberOfPictures=3;
//Time between pics switching in secs
var HowLongBetweenPic=1;

//SwitchPic Function
function SwitchPic(counter){

	if(counter < HowLongBetweenPic){
	
		counter++;
		
		//DEBUG in the status bar at the bottom of the screen
		window.status="Switch picture at 5 : "+counter+" PicNumber: "+PicNumber+" ";
		
		//Display pic in what <IMG> tag roll is what I called the image
		document.roll.src = eval("Rollpic" + PicNumber);
		
		//function calls itself
		CallSwitchPic=window.setTimeout("SwitchPic("+counter+")",1500); 
		
		}
		
		else{
			//if its not the last picture goto the next picture
			if(PicNumber < NumberOfPictures){
				PicNumber++;
				SwitchPic(0);
			}
			//its the last picture go to the first one
			else{
				PicNumber=1;
				SwitchPic(0);
				}
	
		}

}
// Stop hiding from old browsers -->
</script>

i have this script and its working perfectly, i just want to know its there anyway i could get it to fade in and out between images instead of it suddenly changing?

**regicidedelferoz** · 01-06-2012, 08:18 AM

use jquery fadein and fadeout,.

**rosaxlouise** · 01-06-2012, 03:52 PM

is there a code for this?

**regicidedelferoz** · 01-07-2012, 12:53 AM

google it

**rosaxlouise** · 01-07-2012, 04:06 PM

i've tried google and nothing worked, can you please be specific or refer me to a code for this. i need to get this done..

**rosaxlouise** · 01-11-2012, 03:40 PM

anyone?

**jscheuer1** · 01-11-2012, 03:52 PM

That's an old and limited script. It would be pointless to try to inject an advanced technique like fading into it. I know it's tempting because the code seems so lightweight and simple, but trust me, you're better off using a script that perhaps involves much more code, but that has the business of cross browser fading worked out.

See:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

and/or:

http://www.dynamicdrive.com/dynamici...army/index.htm

There are also many other fading slideshow scripts around the web, which you probably can find using Google. Search on:

fading slideshow javascript

Some may be as good as or better than the two I linked to above, others may not be.

If you want a real bare bones fading slideshow to play around with, here's one but I'm not recommending it, it does require that all the images are the same size:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var transitionspeed = 2000; // Set speed for fade in effect
	var displaytime = 3000; // Set duration of image once faded in
/// No need to Edit Script below here ///
	function fadeThem(){$('#images img').eq(0).hide().appendTo('#images').fadeIn(transitionspeed, function(){setTimeout(fadeThem, displaytime);});}
	var count = $('#images img').hide().each(function(){
		$(new Image()).bind('load error', function(){
			if(!--count){fadeThem();}
		}).attr('src', this.src);
	}).size();
});
</script>
<style type="text/css">
#images {
	width: 140px; /* Set to Image Width */
	height: 225px; /* Set to Image Height */
	position: relative; /* Required */
}
/* Below all Required */
#images img {
	position: absolute;
	top: 0;
	left: 0;
}
#loading, #loading td {
	width: 100%;
	height: 100%;
	vertical-align: middle;
	text-align: center;
}
/* End all Required */
</style>
</head>
<body>
<div id="images">
<table id="loading">
<tr>
<td>Loading . . .</td>
</tr>
</table>
<img src="http://home.comcast.net/~jscheuer1/side/files/photo1.jpg" alt="original image" title="">
<img src="http://home.comcast.net/~jscheuer1/side/files/photo2.jpg" alt="original image" title="">
<img src="http://home.comcast.net/~jscheuer1/side/files/photo3.jpg" alt="original image" title="">
</div>
</body>
</html>

**rosaxlouise** · 01-12-2012, 04:22 PM

thank you so much!

i have another question...heres what im working on (this is just the tester) http://janetglobaltester.tumblr.com/

umm is there anyway i can get rid of the loading text that comes up before the slideshow plays? and also because am i editing this on a tumblr theme and i'm using this as the header, is there a way for me to center the slideshow and finally is there a way to fix the padding? as you can see there's a white gap on the header.

**jscheuer1** · 01-12-2012, 06:33 PM

Sure. I also discovered some problems with the preloading, so I've changed things around to only preload the first image. Presumably the time it takes to display it, will be enough for the next image to load normally. Here it is with that modification, and without the loading message:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var transitionspeed = 2000; // Set speed for fade in effect
	var displaytime = 3000; // Set duration of image once faded in
	var preload = true; // Should script load first image before starting? (recommended)
/// No need to Edit Script below here ///
	function callback(){
		callback = function(){setTimeout(fadeThem, displaytime);};
		$('#images img').css({visibility: 'visible'});
		setTimeout(fadeThem, displaytime);
	}
	function fadeThem(){$('#images img').eq(0).hide().appendTo('#images').fadeIn(transitionspeed, callback);}
	if(preload){
		var pim = $('#images img').css({visibility: 'hidden'}).get(0);
		$(new Image()).bind('load error', function(){
			pim.style.visibility = 'visible';
			fadeThem();
		}).attr('src', pim.src);
	} else {$('#images img:gt(0)').css({visibility: 'hidden'}); fadeThem();}
});
</script>
<style type="text/css">
#images {
	width: 140px; /* Set to Image Width */
	height: 225px; /* Set to Image Height */
	position: relative; /* Required */
}
/* Below all Required */
#images img {
	position: absolute;
	top: 0;
	left: 0;
}
/* End all Required */
</style>
</head>
<body>
<div id="images">
<img src="http://home.comcast.net/~jscheuer1/side/files/photo1.jpg" alt="original image" title="">
<img src="http://home.comcast.net/~jscheuer1/side/files/photo2.jpg" alt="original image" title="">
<img src="http://home.comcast.net/~jscheuer1/side/files/photo3.jpg" alt="original image" title="">
</div>
</body>
</html>

**rosaxlouise** · 01-13-2012, 12:38 AM

ahhhh! thank you sooo much!

it works perfectly!

Thread: is there a way to get this script to fade between images?

Thread Tools

Search Thread

is there a way to get this script to fade between images?

Bookmarks

Bookmarks

Posting Permissions