Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Fading multiple images 2

Status
Not open for further replies.
SteveHigh

SteveHigh

Technical User
Jan 17, 2007
158
GB
Hello

I have some JavaScript which allows site visitors to see an image fade. It is then replaced by another image. Then another.

What I would like to do is to have, say, three images on the same Web page, and for these to fade, only to be replaced by another three images, then another three.

I could probably do this if I used frames and split the one Web page into three and then using the script I am now using. If I then put the three frames together and remove the borders, it would look as if I had three fading images on the same page.

Is this the only way of doing it, or is there a script/link which will allow me to have three fading images at the same time without resorting to frames?

Thanks in anticipation.

SteveHigh
 
Sort by date Sort by votes
No, you don't have to do this in frames. Without you showing your code, though, it's impossible to help you beyond that.

Lee
 
Upvote 0 Downvote
Hello Lee

Thanks for getting back to me.

Here is the code:

<HTML><HEAD>

<script>

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'MVC-021S.jpg'
Pic[1] = 'MVC-022S.jpg'
Pic[2] = 'MVC-023S.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad = new Image()
preLoad.src = Pic
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>

</head>

<body onload="runSlideShow()">

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=240 width=320>
<img src="MVC-021S.jpg" name='SlideShow' width=320 height=240></td>
</tr>
</table>

</body>
</html>

I hope it makes sense to you! I got it from a 'free' site on the WWW.

Cheers again.

Steve
 
Upvote 0 Downvote
This is a quick and dirty version, should work for you, though. I would have written the slideshow to be a lot more flexible, but this is for free, huh? :)#

Code: 
<script>

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic1 = new Array() // don't touch this

// to add more images, just continue
// the pattern, adding to the array below

Pic1[0] = 'MVC-021S.jpg'
Pic1[1] = 'MVC-022S.jpg'
Pic1[2] = 'MVC-023S.jpg'
Pic1[3] = '4.jpg'
Pic1[4] = '5.jpg'

var Pic2 = new Array();
Pic2[0] = 'MVC-221S.jpg'
Pic2[1] = 'MVC-222S.jpg'
Pic2[2] = 'MVC-223S.jpg'
Pic2[3] = '24.jpg'
Pic2[4] = '25.jpg'

var Pic3 = new Array();
Pic3[0] = 'MVC-321S.jpg'
Pic3[1] = 'MVC-322S.jpg'
Pic3[2] = 'MVC-323S.jpg'
Pic3[3] = '34.jpg'
Pic3[4] = '35.jpg'


// =======================================
// do not edit anything below this line
// =======================================

var t;
var j1 = 0, j2=0, j3=0;

var preLoad1 = new Array();
var preLoad2 = new Array();
var preLoad3 = new Array();

for (i = 0; i < Pic1.length; i++)
  {
  preLoad1[i] = new Image();
  preLoad1[i].src = Pic1[i];
  }

for (i = 0; i < Pic2.length; i++)
  {
  preLoad2[i] = new Image();
  preLoad2[i].src = Pic2[i];
  }

for (i = 0; i < Pic3.length; i++)
  {
  preLoad3[i] = new Image();
  preLoad3[i].src = Pic3[i];
  }

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply() 
}

document.images['SlideShow1']src = preLoad1[j1].src
document.images['SlideShow2']src = preLoad2[j2].src
document.images['SlideShow3']src = preLoad3[j3].src

if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}

j1++;
j1 %= Pic1.length;

j2++;
j2 %= Pic2.length;

j3++;
j3 %= Pic3.length;

t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>

and your images

Code: 
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=240 width=320>
<img src="MVC-021S.jpg" name='SlideShow1' width=320 height=240></td>
<img src="MVC-221S.jpg" name='SlideShow2' width=320 height=240></td>
<img src="MVC-321S.jpg" name='SlideShow3' width=320 height=240></td>
</tr>
</table>

Lee
 
Upvote 0 Downvote
Hello Lee

Wow! That's great. Many thanks for your help.

I'll try it and post tomorrow about how it worked out.

Much appreciated!

Cheers

Steve
 
Upvote 0 Downvote
Hello Lee

Thanks for all your help yesterday.

I have tried the code - which produces three images on my Web page - but none of them fades. I get an error message (but I'm not sure how accurate it is), saying that on line 75 the browser was expecting a semi-colon: ;

Have you any advice, please?

Thanks again.

Steve


<html>
<head>

<script>

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic1 = new Array() // don't touch this

// to add more images, just continue
// the pattern, adding to the array below

Pic1[0] = 'MVC-021S.jpg'
Pic1[1] = 'MVC-022S.jpg'
Pic1[2] = 'MVC-023S.jpg'
Pic1[3] = '4.jpg'
Pic1[4] = '5.jpg'

var Pic2 = new Array();
Pic2[0] = 'MVC-021S.jpg'
Pic2[1] = 'MVC-022S.jpg'
Pic2[2] = 'MVC-023S.jpg'
Pic2[3] = '24.jpg'
Pic2[4] = '25.jpg'

var Pic3 = new Array();
Pic3[0] = 'MVC-021S.jpg'
Pic3[1] = 'MVC-022S.jpg'
Pic3[2] = 'MVC-023S.jpg'
Pic3[3] = '34.jpg'
Pic3[4] = '35.jpg'


// =======================================
// do not edit anything below this line
// =======================================

var t;
var j1 = 0, j2=0, j3=0;

var preLoad1 = new Array();
var preLoad2 = new Array();
var preLoad3 = new Array();

for (i = 0; i < Pic1.length; i++)
{
preLoad1 = new Image();
preLoad1.src = Pic1;
}

for (i = 0; i < Pic2.length; i++)
{
preLoad2 = new Image();
preLoad2.src = Pic2;
}

for (i = 0; i < Pic3.length; i++)
{
preLoad3 = new Image();
preLoad3.src = Pic3;
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}

document.images['SlideShow1']src = preLoad1[j1].src
document.images['SlideShow2']src = preLoad2[j2].src
document.images['SlideShow3']src = preLoad3[j3].src

if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}

j1++;
j1 %= Pic1.length;

j2++;
j2 %= Pic2.length;

j3++;
j3 %= Pic3.length;

t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=240 width=320>
<img src="MVC-021S.jpg" name='SlideShow1' width=320 height=240></td>
<img src="MVC-022S.jpg" name='SlideShow2' width=320 height=240></td>
<img src="MVC-023S.jpg" name='SlideShow3' width=320 height=240></td>
</tr>
</table>

</body>
</html>
 
Upvote 0 Downvote
Here is a syntax error:

Code: 
document.images['SlideShow1']src = preLoad1[j1].src
document.images['SlideShow2']src = preLoad2[j2].src
document.images['SlideShow3']src = preLoad3[j3].src


Need to be
Code: 
document.images['SlideShow1'][!].[/!]src = preLoad1[j1].src
document.images['SlideShow2'][!].[/!]src = preLoad2[j2].src
document.images['SlideShow3'][!].[/!]src = preLoad3[j3].src


<.

 
Upvote 0 Downvote
Ack!! I found other things I missed doing the example I provided, so changed my approach a little bit.
Code: 
function runSlideShow()
{
if (document.all)
  {
  for (var i = 1; i <= 3; i++)
    {
    document.images['SlideShow' + i].style.filter="blendTrans(duration=2)";
    document.images['SlideShow' + i].style.filter="blendTrans(duration=crossFadeDuration)";
    document.images['SlideShow' + i].filters.blendTrans.Apply(); 
    }
  }

document.images['SlideShow1'].src = preLoad1[j1].src;
document.images['SlideShow2'].src = preLoad2[j2].src;
document.images['SlideShow3'].src = preLoad3[j3].src;

if (document.all)
  {
  for (var i = 1 i <= 3; i++)
    {
    document.images['SlideShow' + i].filters.blendTrans.Play();
    }
  }

j1++;
j1 %= Pic1.length;

j2++;
j2 %= Pic2.length;

j3++;
j3 %= Pic3.length;

t = setTimeout('runSlideShow()', slideShowSpeed);
}

Lee
 
Upvote 0 Downvote
Hello Lee and Monksnake

Sorry to bother you both again, but thanks for all your help so far.

Unfortunately, my images are still not fading: I am getting a Line 86, Char 18, Expected ';' error message.

Below is the code I have so far:

<html>
<head>

<script>

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic1 = new Array() // don't touch this

// to add more images, just continue
// the pattern, adding to the array below

Pic1[0] = 'MVC-021S.jpg'
Pic1[1] = 'MVC-022S.jpg'
Pic1[2] = 'MVC-023S.jpg'
Pic1[3] = '4.jpg'
Pic1[4] = '5.jpg'

var Pic2 = new Array();
Pic2[0] = 'MVC-021S.jpg'
Pic2[1] = 'MVC-022S.jpg'
Pic2[2] = 'MVC-023S.jpg'
Pic2[3] = '24.jpg'
Pic2[4] = '25.jpg'

var Pic3 = new Array();
Pic3[0] = 'MVC-021S.jpg'
Pic3[1] = 'MVC-022S.jpg'
Pic3[2] = 'MVC-023S.jpg'
Pic3[3] = '34.jpg'
Pic3[4] = '35.jpg'


// =======================================
// do not edit anything below this line
// =======================================

var t;
var j1 = 0, j2=0, j3=0;

var preLoad1 = new Array();
var preLoad2 = new Array();
var preLoad3 = new Array();

for (i = 0; i < Pic1.length; i++)
{
preLoad1 = new Image();
preLoad1.src = Pic1;
}

for (i = 0; i < Pic2.length; i++)
{
preLoad2 = new Image();
preLoad2.src = Pic2;
}

for (i = 0; i < Pic3.length; i++)
{
preLoad3 = new Image();
preLoad3.src = Pic3;
}

function runSlideShow()
{
if (document.all)
{
for (var i = 1; i <= 3; i++)
{
document.images['SlideShow' + i].style.filter="blendTrans(duration=2)";
document.images['SlideShow' + i].style.filter="blendTrans(duration=crossFadeDuration)";
document.images['SlideShow' + i].filters.blendTrans.Apply();
}
}

document.images['SlideShow1'].src = preLoad1[j1].src;
document.images['SlideShow2'].src = preLoad2[j2].src;
document.images['SlideShow3'].src = preLoad3[j3].src;

if (document.all)
{
for (var i = 1 i <= 3; i++)
{
document.images['SlideShow' + i].filters.blendTrans.Play();
}
}

j1++;
j1 %= Pic1.length;

j2++;
j2 %= Pic2.length;

j3++;
j3 %= Pic3.length;

t = setTimeout('runSlideShow()', slideShowSpeed);
}

</script>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=240 width=320>
<img src="MVC-021S.jpg" name='SlideShow1' width=320 height=240></td>
<img src="MVC-022S.jpg" name='SlideShow2' width=320 height=240></td>
<img src="MVC-023S.jpg" name='SlideShow3' width=320 height=240></td>
</tr>
</table>

</body>
</html>

I do not wish to take up all your time, but if there is anything obviously wrong in the above code, please advise so I may correct it.

Many thanks again for all your help.

Cheers

Steve
 
Upvote 0 Downvote
You need to learn to read the code and not just copy and paste, and you need to learn to format your code to make it easier to read.

I checked in Firefox (which I also suggest you use to find where errors are) and the error was
Code: 
if (document.all)
  {
  for (var i = 1/*missing semicolon here ->*/[b][red];[/red][/b] i <= 3; i++)
    {
    document.images['SlideShow' + i].filters.blendTrans.Play();
    }
  }
 
Upvote 0 Downvote
Hello Lee

Thanks again for your post.

I should learn Javascript, I know, but I am only just coming to terms with ASP and that's difficult enough! It is not completely alien to me - I find I can usually customise it - but writing it from scratch would take a gladiatorial effort and I would need to drop eveything
else. But I am grateful for your help.

Your ';' removed the error message I was getting, but the images still do not fade in and out. I have created nine images (all exactly the same size) and placed them in your 'new array' function like this:

Pic1[0] = 'greenkey.jpg'
Pic1[1] = 'land.jpg'
Pic1[2] = 'mist.jpg'
Pic1[3] = '4.jpg'
Pic1[4] = '5.jpg'

var Pic2 = new Array();
Pic2[0] = 'fishTest.jpg'
Pic2[1] = 'purpleTest.jpg'
Pic2[2] = 'test.jpg'
Pic2[3] = '24.jpg'
Pic2[4] = '25.jpg'

var Pic3 = new Array();
Pic3[0] = 'undp.jpg'
Pic3[1] = 'agua.jpg'
Pic3[2] = 'map.jpg'
Pic3[3] = '34.jpg'
Pic3[4] = '35.jpg'

For some reason they are not moving. Basically, the browser is only seeing this:

<img src="greenkey.jpg" name='SlideShow1' height=240 width=320></td>
<img src="land.jpg" name='SlideShow2' height=240 width=320></td>
<img src="mist.jpg" name='SlideShow3' height=240 width=320></td>

I don't wish to bother you again, but thought I would let you know the outcome. You have given me an invaluable insight as to how JavaScript works and for that I am grateful.

Cheers again.

Steve

 
Upvote 0 Downvote
You have some close </td>s without opening <td>s, too.

Try setting the <body> up like this:
Code: 
<body onload="runSlideShow();">


You had that to begin with, but lost it with all the modifications you've done.

Lee
 
Upvote 0 Downvote
Hello Lee

That's it! It works on my desk top: I have three images which all fade into another image.

I have saved your code to my hard drive and copied it so I can play about with it. I might try to use only two images (instead of three), or use a cycle of only two rotating images (instead of three) just to get the 'hang' of the code and the logic behind it.

You have been most helpful and patient and, once again, I am grateful.

Best regards

Steve

 
Upvote 0 Downvote
If I'd been doing this for myself, I'd have rewritten the code so the entire set would be an array of arrays or of objects containing the counter as one property and the array of graphics as another property. But for what you want, what you have now will work fine and should be pretty easy for you to understand and modify.

Lee
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
172
Samthyr
Samthyr
lupidol
  • Locked
  • Question
Alternate images not working
Replies
2
Views
98
lupidol
lupidol
southbeach
  • Locked
  • Question
Using multiple jquery .dialog() with custom themes each
Replies
2
Views
127
southbeach
southbeach
audiopro
  • Locked
  • Question
Multiple Draggable Markers on Google Maps
Replies
0
Views
88
audiopro
audiopro
c0deM0nK424
  • Locked
  • Question
auto detect viewport or screen size and load different images for flexslider carosel ?
Replies
0
Views
119
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top