How to make use of a free Javascript?

  Revi 16:27 23 Sep 05
Locked

I have found this free one. The question is where to make changes. Any ideas any one?

!-- THREE STEPS TO INSTALL FADING SLIDE SHOW:

1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->

!-- STEP 1: Paste this code into the HEAD of your HTML document -->

HEAD>

SCRIPT LANGUAGE="JavaScript">
!-- Original: CodeLifter.com ([email protected]) -->
!-- Web Site: click here -->

!-- This script and many more are available free online at -->
!-- The JavaScript Source!! click here -->

!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.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[i] = new Image();
preLoad[i].src = Pic[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.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);
}
// End -->
/script>

/HEAD>

!-- STEP 2: Insert the onLoad event handler into your BODY tag -->

BODY onLoad="runSlideShow()">

!-- STEP 3: Copy this code into the BODY of your HTML document -->

table border="0" cellpadding="0" cellspacing="0">
tr>
td id="VU" height=150 width=150>
img src="1.jpg" name='SlideShow' width=150 height=150>
/td>
/tr>
/table>

p> center>
font face="arial, helvetica" size"-2">Free JavaScripts provided br>
by a href="click here">The JavaScript Source /a> /font>
/center> p>

!-- Script Size: 2.13 KB -->

  PurplePenny 17:12 23 Sep 05

As far as I can see the only things that you might need to alter are the speed of the slideshow (how long each slide remains onscreen), how long the pictures take to fade in and out, and how many images there are.

You will have to number all your photos 1.jpg, 2.jpg etc. then to add more pics to the slide show you just add their numbers to the array

Pic[0] = '1.jpg' Pic[1] = '2.jpg' Pic[2] = '3.jpg' Pic[3] = '4.jpg' Pic[4] = '5.jpg'

so the next photo you add will be called 6.jpg and you will add a space then Pic[5] = '6.jpg' at the end of that line.

To vary the length of time each slide remains on screen change the "5000" (milliseconds) in this variable

var slideShowSpeed = 5000;

but try both this and the next variable at the speed that is already set before you start changing things.

The "3" (seconds) at the end of this is what you change to alter the speed of the fade in and out.

var crossFadeDuration = 3;

A question to our JavaScript experts: is there any reason for one variable to be in milliseconds and the other in seconds?

Penny

  Revi 17:19 23 Sep 05

Penny,
Thanks for your reply. I have my photos in photo file, don't you think that I have to change the image source also. I ask this because I tried out the above code and it did not work. So I thought maybe the code is not finding my photos.

  PurplePenny 17:32 23 Sep 05

Looking at this bit of the HTML: img src="1.jpg" it is assumiing that your photos are not in a separate folder so that is, indeed, why they are not being found. However it is much neater to keep them in the folder, as you already have them, so you will need to add the path to the photo folder in the HTML e.g. img src="images/1.jpg. (The exact path depends where your images are in relation to the HTML page and what the folder containing them is called.)

  Revi 17:45 23 Sep 05

Thanks again. Will try to fix the path and see if it works. Will revert thereafter, though it may take a while.

  PurplePenny 17:57 23 Sep 05

You'll need to add the path in the array too.

You may also need to change the height and width to match your photos:

td id="VU" height=150 width=150

  Revi 18:08 23 Sep 05

Yes, you are right on both the points. I will make these changes too. Thanks for following up.

  PurplePenny 18:25 23 Sep 05

Sorry, quoted the wrong code for altering the image size to match your photos: img src="1.jpg" name='SlideShow' width=150 height=150

I've just tried this slideshow out and it works in Firefox and IE but not Opera8; the fade only works in IE.

  Revi 18:48 23 Sep 05

Thanks for trying it out. Do you think I could make it work from a page lying within Frontpage 2003?

  PurplePenny 19:25 23 Sep 05

I'm afraid I don't know the answer to that. I've never used Frontpage.

  Revi 07:10 24 Sep 05

What I would like to know is that if one has to try out this Javascript of automatic & fading slideshow can it be done from within the local site or must one upload to the remote site to try it out?

This thread is now locked and can not be replied to.

What is Amazon Go and will it come to the UK? The store without checkouts or queues

1995-2015: How technology has changed the world in 20 years

Why ecommerce hasn't taken off on social media

New MacBook Pro 2016 review | MacBook Pro with Touch Bar review: Apple's expensive and powerful…