PDA

View Full Version : is there a way to get this script to fade between images?



rosaxlouise
01-05-2012, 10:49 PM
<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/dynamicindex14/fadeinslideshow.htm

and/or:

http://www.dynamicdrive.com/dynamicindex14/swissarmy/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:


<!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:


<!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! :D