Loop Pictures

L

Leah

I have a set of pictures that I would like to loop on my homepage. They are
small files, but is there a way to do this without using Macromedia Flash? I
hate to buy the program for such a small task.
 
S

Steve Easton

Google for "javascript slideshow" with the quotes.


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed..................
...............................with a computer
 
E

E. T. Culling

Here are a set of instructions that I sent to someone else yesterday. I hope
they work for you!
Eleanor
It's really a matter of doing what they say ... but, as you have figured
out, that's not as easy as it sounds.
1. Copy all of what is in the Step 1 box into Notepad and then into your
page within the <head> section. That will tell the three images what to do.
You parbably need to size your three images exactly the same.
In this line you specify the three images:
var slideimages=new Array("image1.gif","image2.gif","image3.gif")
Change these to something like "house.gif", "car.gif" and "boat.gif"

2. Copy all the information in Step 2 into Notepad and then into the section
of the <body> where you want the 'blended' images to be. Where it says
"image1.gif" put in the name of the 1st image ("house.gif").

//specify interval between slide (in mili seconds)
var slidespeed=3000 means they change every 3 seconds. You can change
that.

If you can and think you will understand it, look at the code for the page
you are using for the scripts. Get back to me to let me know if that worked
or not.
Eleanor
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
S

sechlc

I was able to set up one loop using three pictures, but how do I add where I
have four loops going all at the same time? I tried copying the script one
after another and could only get the last revision to work.
 
T

Trevor L.

sechlc,
I have not seen the script referred to, but my intuition tells me to do this
:

Where you have
var slideimages=new Array("image1.gif","image2.gif","image3.gif")
change it to
var slideimages=new
Array("image1.gif","image2.gif","image3.gif","image4.gif")
And so on. If you want five
var slideimages=new
Array("image1.gif","image2.gif","image3.gif","image4.gif","image5.gif")

where "image4.gif" ,"image5.gif" are the names of the extra images you want
to add
 
T

Trevor L.

Yes,
I found the code and I am sure I got it wrong. You want four separate loops
at the same time.

You can't do it by just duplicating the code, because all of them will refer
to the name "slide".

The sledeghammer approach would be to replicate it 3 times, making 4 in all
and in each of 2 to 4, change "slide" to "slide2" "slide3", "slide4". It
would be tidier to set up a function which did all of the 4 (or however many
you want), but try the heavier way first and see if it works.
 
S

sechlc

Thanks - I understand what you explained but I should have worded my question
"how do I add where I have four pictures each with different loops going all
at the same time?"
 
S

sechlc

Sorry for the last reply, I didn't read your other comments. I think I
understand your approach but where in the code do I place the slide" to
"slide2" "slide3", "slide4"? I tried var slideimages2=new
Array("image.gif","image1.gif","image2.gif") but I am still having trouble
getting both pictures to loop on it's own. I end up with 2 pictures but the
second picture is looping with the first code.
 
S

Steve Easton

You are going to have to modify the script for each loop and use different variable names,
or you will have conflicting variables.


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer
 
S

sechlc

Okay, how do I do accomplish that? As for an understanding of FP, you have
your PhD and I am in PreSchool - could you explain how I modify the script.
Thank you.
 
T

Trevor L.

sechlc

I understand the feeling of being out of your depth.

I will try to set aside some time to look at the code (I have to retrieve it
first) and then see how to modify it. As a retired person, time usualyy
isn't much of a problem. except I have a visitor at the moment

IWGBTY (I will get back to you)
 
T

Trevor L.

sech;c,

Here is code which works.
image1.jpg, image2,jpg, etc should be in the same folder as this code.
All need to be the same dimensions .e.g. 600*400 as this proportion is used
in the code

<!-- Start of Code -->
<html>
<head>
<script language="JavaScript1.1">
<!--
//*****************************************
// Blending Image Slide Show Script-
// © Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
// Modified by Trevor L. 20 October 2005
//*****************************************

//specify interval between slide (in milli seconds)
var slidespeed=3000

//specify images
var slideimages1=new Array("image1.jpg","image2.jpg","image3.jpg")
var slideimages2=new Array("image4.jpg","image5.jpg","image6.jpg")
var slideimages3=new Array("image7.jpg","image8.jpg")

var imageholder1=new Array()
for (i=0;i<slideimages1.length;i++)
{ imageholder1=new Image()
imageholder1.src=slideimages1 }

var imageholder2=new Array()
for (i=0;i<slideimages2.length;i++)
{ imageholder2=new Image()
imageholder2.src=slideimages2 }

var imageholder3=new Array()
for (i=0;i<slideimages3.length;i++)
{ imageholder3=new Image()
imageholder3.src=slideimages3 }

var whichimage1=0, whichimage2=0, whichimage3=0

function slideit()
{
if (!document.images) return

if (document.all)
{ document.images.slide1.filters[0].apply()
document.images.slide2.filters[0].apply()
document.images.slide3.filters[0].apply()}

document.images.slide1.src=imageholder1[whichimage1].src
document.images.slide2.src=imageholder2[whichimage2].src
document.images.slide3.src=imageholder3[whichimage3].src

if (document.all)
{ document.images.slide1.filters[0].play()
document.images.slide2.filters[0].play()
document.images.slide3.filters[0].play() }

whichimage1=(whichimage1<slideimages1.length-1)? whichimage1+1 : 0
whichimage2=(whichimage2<slideimages2.length-1)? whichimage2+1 : 0
whichimage3=(whichimage3<slideimages3.length-1)? whichimage3+1 : 0

var blenddelay1=(document.all) ?
document.images.slide1.filters[0].duration*1000 : 0
setTimeout("slideit()",slidespeed+blenddelay1)
}
//-->
</script>
</head>

<body onload="slideit()">

<img src="" name="slide1" width="60px" height="40px" border=0
style="filter:blendTrans(duration=3)" >
<img src="" name="slide2" width="60px" height="40px" border=0
style="filter:blendTrans(duration=3)" >
<img src="" name="slide3" width="60px" height="40px" border=0
style="filter:blendTrans(duration=3)" >

</body>
</html>
<!-- End of Code -->
 
Top