7 Replies - 6106 Views - Last Post: 28 August 2009 - 04:04 AM

#1 dolph lundgren  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 05-March 08

Trouble with JS Fading Slideshow

Posted 05 March 2008 - 08:11 AM

Hey everyone. I was hoping someone could help me with this. I'm including a small javascript slideshow in a website, where one image fades into the next. Currently, the images fade out, but the next image in the array just suddenly appears at 100% alpha after the previous one fades out, when it is supposed to be a smooth transition (images fades out, revealing the next underneath it).

Here's my code:

function newImage(arg) {
	if (document.images) {
	rslt = new Image();
	rslt.src = arg;
	return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;

function preloadImages() {
	if (document.images) {
		 bda = newImage("images/hamilton.jpg");
		 nyc = newImage("images/ny.jpg");
		 hfx = newImage("images/halifax.jpg");
		 cmn = newImage("images/cayman.jpg");

		 preloadFlag = true;
 	}
}


var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg = new Array(
	 "images/hamilton.jpg",
	 "images/ny.jpg",
	 "images/halifax.jpg",
	 "images/cayman.jpg");
var gblPauseSeconds = 4;
var gblFadeSeconds = .85;
var gblRotations = 10;

var gblDeckSize = gblImg.length;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblStartImg;
var gblImageRotations = gblDeckSize * (gblRotations+1);

//window.onload = photoShufflerLaunch;

function photoShufflerLaunch() {
	 var theimg = document.getElementById(gblPhotoShufflerImgId);
	 gblStartImg = theimg.src; // save away to show as final image

	 document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
	 setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}

function photoShufflerFade() {
	var theimg = document.getElementById(gblPhotoShufflerImgId);

 	// determine delta based on number of fade seconds
	// the slower the fade the more increments needed
 	var fadeDelta = 100 / (45 * gblFadeSeconds);
	
 	// fade top out to reveal bottom image
 	if (gblOpacity < 2*fadeDelta ) {
 		gblOpacity = 100;
		
 	// stop the rotation if we're done
 	if (gblImageRotations < 1) return;

 	photoShufflerShuffle();
 	// pause before next fade
 	setTimeout("photoShufflerFade()",gblPauseSeconds*1000);

 	} else {

 	gblOpacity -= fadeDelta;
 	setOpacity(theimg,gblOpacity);
 	setTimeout("photoShufflerFade()",30); // 1/30th of a second

 	}
}

function photoShufflerShuffle() {
 	var thediv = document.getElementById(gblPhotoShufflerDivId);
 	var theimg = document.getElementById(gblPhotoShufflerImgId);

 	// copy div background-image to img.src
 	theimg.src = gblImg[gblOnDeck];
 	// set img opacity to 100
 	setOpacity(theimg,100);

 	// shuffle the deck
 	gblOnDeck = ++gblOnDeck % gblDeckSize;
 	// decrement rotation counter
 	if (--gblImageRotations < 1) {
 		// insert start/final image if we're done
 		gblImg[gblOnDeck] = gblStartImg;
 	}

 	// slide next image underneath
 	thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
}

function setOpacity(obj, opacity) {
	 opacity = (opacity == 100)?99.999:opacity;

 	//IE/Win
 	//obj.style.filter = "alpha(opacity:"+opacity+")";
 	obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity:"+opacity+")";

 	// Safari<1.2, Konqueror
 	obj.style.KHTMLOpacity = opacity/100;

 	// Older Mozilla and Firefox
 	obj.style.MozOpacity = opacity/100;

 	// Safari 1.2, newer Firefox and Mozilla, CSS3
	 obj.style.opacity = opacity/100;
}



And my html/css:

<div id="photodiv"> <img id="photoimg" /> </div>



#photodiv {
	background: url(images/hamilton.jpg) no-repeat;
}
#photoimg {
	background: url(images/ny.jpg) no-repeat;
	position: absolute;
	left: 325px;
	top: 30px;
	width: 674px;
	height: 250px;
}



Any ideas?

Is This A Good Question/Topic? 0
  • +

Replies To: Trouble with JS Fading Slideshow

#2 dolph lundgren  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 05-March 08

Re: Trouble with JS Fading Slideshow

Posted 06 March 2008 - 11:54 AM

Awesome.
Was This Post Helpful? 0
  • +
  • -

#3 orcasquall  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 12
  • View blog
  • Posts: 158
  • Joined: 14-September 07

Re: Trouble with JS Fading Slideshow

Posted 07 March 2008 - 06:25 AM

Have you considered using two img tags? One with image A of decreasing opacity, one with image B of increasing opacity.

The effect of the fading of foreground image, then the background image suddenly appearing is because the background image was always at 100% opacity anyway. When you did the swap by assigning the backgroundImage property, the next image just became totally visible instead of gradually becoming visible.
Was This Post Helpful? 0
  • +
  • -

#4 dolph lundgren  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 05-March 08

Re: Trouble with JS Fading Slideshow

Posted 07 March 2008 - 06:56 AM

View Postorcasquall, on 7 Mar, 2008 - 06:25 AM, said:

Have you considered using two img tags? One with image A of decreasing opacity, one with image B of increasing opacity.

The effect of the fading of foreground image, then the background image suddenly appearing is because the background image was always at 100% opacity anyway. When you did the swap by assigning the backgroundImage property, the next image just became totally visible instead of gradually becoming visible.


Yeah, I figure that's what's needed to be done. I'm a total noob with JS though. Hence me posting this. I was hoping someone could help out with the code, in turn, helping me learn.
Was This Post Helpful? 0
  • +
  • -

#5 orcasquall  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 12
  • View blog
  • Posts: 158
  • Joined: 14-September 07

Re: Trouble with JS Fading Slideshow

Posted 12 March 2008 - 06:57 AM

If you're still interested, I've got code that does the fading slideshow.
<html>
<head>
<title>Test</title>

<style type="text/css">
#photoimg1 {position:absolute;z-index:2000;}
#photoimg2 {position:absolute;z-index:1000;}
</style>

<script>
var imglist = new Array("fader1.jpg","fader2.jpg","fader3.jpg");
var imgnum = 0;
var opacity = 100;
var delta = 2.5;
var intervalID;

function LaunchShuffler()
{
   var img;
   img = document.getElementById('photoimg1');
   img.src = imglist[0];

   img = document.getElementById('photoimg2');
   img.src = imglist[1];

   // wait for 2 seconds (2000 milliseconds)
   // set ImageFader() to run every 100 milliseconds
   window.setTimeout("intervalID = window.setInterval(\"ImageFader()\", 100);", 2000);
}

function ImageFader()
{
   var img1;
   var img2;
   var nextimgindex;

   img1 = document.getElementById('photoimg1');
   img2 = document.getElementById('photoimg2');
   opacity -= delta;
   if (opacity < 0)
   {
	  opacity += 100;
	  imgnum = (imgnum + 1) % imglist.length;
	  nextimgindex = (imgnum + 1) % imglist.length;

	  img1.src = imglist[imgnum];
	  img2.src = imglist[nextimgindex];

	  window.clearInterval(intervalID);
	  window.setTimeout("intervalID = window.setInterval(\"ImageFader()\", 100);", 2000);
   }
   setOpacity(img1, opacity);
   setOpacity(img2, 100 - opacity);
}

function setOpacity(obj, opacity) {
	 opacity = (opacity == 100)?99.999:opacity;

	//IE/Win
	//obj.style.filter = "alpha(opacity:"+opacity+")";
	obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity:"+opacity+")";

	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;

	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;

	// Safari 1.2, newer Firefox and Mozilla, CSS3
	 obj.style.opacity = opacity/100;
}
</script>

</head>
<body onload="LaunchShuffler();">
<div id="photodiv"><img id="photoimg1" /><img id="photoimg2" /></div>
</body></html>



There's only one issue. I can't seem to get it to work properly in Firefox. When Firefox renders the HTML, there's a flicker when the images are swapped. IE smoothly does the transition though.

Maybe you can get more insight here:
http://www.dynamicdr...inslideshow.htm

Hope that helps. If nothing else, you can use it as a proof of concept or the basis of something better.
Was This Post Helpful? 0
  • +
  • -

#6 ladyorchid  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 21-March 08

Re: Trouble with JS Fading Slideshow

Posted 21 March 2008 - 10:31 AM

I love the code that orcasquall posted above, it works like a charm for me, except that I cannot figure out how to tweak it so that I can have three slideshows running simultaneously and side by side. Is it possible? I have been fighting with several slideshows and this is the only one I have found that blends nicely and allows me to change the blending speed, but I need two more on the same page. If this post is considered too old I will be happy to post my question as a new topic. I do not know what you guys consider appropriate or annoying. Also, if you can help, I do not speak new html concepts well and need kind of the dummies version. Sorry!
Was This Post Helpful? 0
  • +
  • -

#7 London_Images1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 28-August 09

Re: Trouble with JS Fading Slideshow

Posted 28 August 2009 - 03:56 AM

View Postorcasquall, on 12 Mar, 2008 - 05:57 AM, said:

If you're still interested, I've got code that does the fading slideshow.
<html>
<head>
<title>Test</title>

<style type="text/css">
#photoimg1 {position:absolute;z-index:2000;}
#photoimg2 {position:absolute;z-index:1000;}
</style>

<script>
var imglist = new Array("fader1.jpg","fader2.jpg","fader3.jpg");
var imgnum = 0;
var opacity = 100;
var delta = 2.5;
var intervalID;

function LaunchShuffler()
{
   var img;
   img = document.getElementById('photoimg1');
   img.src = imglist[0];

   img = document.getElementById('photoimg2');
   img.src = imglist[1];

   // wait for 2 seconds (2000 milliseconds)
   // set ImageFader() to run every 100 milliseconds
   window.setTimeout("intervalID = window.setInterval(\"ImageFader()\", 100);", 2000);
}

function ImageFader()
{
   var img1;
   var img2;
   var nextimgindex;

   img1 = document.getElementById('photoimg1');
   img2 = document.getElementById('photoimg2');
   opacity -= delta;
   if (opacity < 0)
   {
	  opacity += 100;
	  imgnum = (imgnum + 1) % imglist.length;
	  nextimgindex = (imgnum + 1) % imglist.length;

	  img1.src = imglist[imgnum];
	  img2.src = imglist[nextimgindex];

	  window.clearInterval(intervalID);
	  window.setTimeout("intervalID = window.setInterval(\"ImageFader()\", 100);", 2000);
   }
   setOpacity(img1, opacity);
   setOpacity(img2, 100 - opacity);
}

function setOpacity(obj, opacity) {
	 opacity = (opacity == 100)?99.999:opacity;

	//IE/Win
	//obj.style.filter = "alpha(opacity:"+opacity+")";
	obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity:"+opacity+")";

	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;

	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;

	// Safari 1.2, newer Firefox and Mozilla, CSS3
	 obj.style.opacity = opacity/100;
}
</script>

</head>
<body onload="LaunchShuffler();">
<div id="photodiv"><img id="photoimg1" /><img id="photoimg2" /></div>
</body></html>



There's only one issue. I can't seem to get it to work properly in Firefox. When Firefox renders the HTML, there's a flicker when the images are swapped. IE smoothly does the transition though.

Maybe you can get more insight here:
http://www.dynamicdr...inslideshow.htm

Hope that helps. If nothing else, you can use it as a proof of concept or the basis of something better.


Mis-placed post. See next one.

This post has been edited by London_Images1: 28 August 2009 - 04:06 AM

Was This Post Helpful? 0
  • +
  • -

#8 London_Images1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 28-August 09

Re: Trouble with JS Fading Slideshow

Posted 28 August 2009 - 04:04 AM

View Postorcasquall, on 12 Mar, 2008 - 05:57 AM, said:

If you're still interested, I've got code that does the fading slideshow.
<html>
<head>
<title>Test</title>

<style type="text/css">
#photoimg1 {position:absolute;z-index:2000;}
#photoimg2 {position:absolute;z-index:1000;}
</style>

<script>
var imglist = new Array("fader1.jpg","fader2.jpg","fader3.jpg");
var imgnum = 0;
var opacity = 100;
var delta = 2.5;
var intervalID;

function LaunchShuffler()
{
   var img;
   img = document.getElementById('photoimg1');
   img.src = imglist[0];

   img = document.getElementById('photoimg2');
   img.src = imglist[1];

   // wait for 2 seconds (2000 milliseconds)
   // set ImageFader() to run every 100 milliseconds
   window.setTimeout("intervalID = window.setInterval(\"ImageFader()\", 100);", 2000);
}

function ImageFader()
{
   var img1;
   var img2;
   var nextimgindex;

   img1 = document.getElementById('photoimg1');
   img2 = document.getElementById('photoimg2');
   opacity -= delta;
   if (opacity < 0)
   {
	  opacity += 100;
	  imgnum = (imgnum + 1) % imglist.length;
	  nextimgindex = (imgnum + 1) % imglist.length;

	  img1.src = imglist[imgnum];
	  img2.src = imglist[nextimgindex];

	  window.clearInterval(intervalID);
	  window.setTimeout("intervalID = window.setInterval(\"ImageFader()\", 100);", 2000);
   }
   setOpacity(img1, opacity);
   setOpacity(img2, 100 - opacity);
}

function setOpacity(obj, opacity) {
	 opacity = (opacity == 100)?99.999:opacity;

	//IE/Win
	//obj.style.filter = "alpha(opacity:"+opacity+")";
	obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity:"+opacity+")";

	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;

	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;

	// Safari 1.2, newer Firefox and Mozilla, CSS3
	 obj.style.opacity = opacity/100;
}
</script>

</head>
<body onload="LaunchShuffler();">
<div id="photodiv"><img id="photoimg1" /><img id="photoimg2" /></div>
</body></html>



There's only one issue. I can't seem to get it to work properly in Firefox. When Firefox renders the HTML, there's a flicker when the images are swapped. IE smoothly does the transition though.

Maybe you can get more insight here:
http://www.dynamicdr...inslideshow.htm

Hope that helps. If nothing else, you can use it as a proof of concept or the basis of something better.


Hello Orcasquall

I just discovered your fading slideshow, tried it with three pics, and it works like a charm. Beautiful.

I am utterly new to JS, but had a try changing and adding all the things in your code I thought would be logically required in order to show SIX IMAGES in the slideshow. But don't seem to be able to get it to work.

Can you make any suggestions or point me to what needs to change?

Jim
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1