Most simple HTML slideshow

FatRakoon · 13 Feb 2008 at 18:26

Im trying to get the most basic and simple slideshow I can.

I dont want any thrills, and I am trying to keep code to an absolute minimum.

<META HTTP-EQUIV="refresh" CONTENT="2;url=case1b.htm">

At the moment, I have it like this :-

HTML file, displays an IMG ( All images are same size ) for 2 seconds then it loads up a second page.

What I have done, is simply made multiple copies of the one HTML file, but each one loads up a different picture then refreshes to the next html file

Now, I deally I would like to have only the one htm file, that loads up the pictures from a given directory or list of pictures.

I have been given links to various sites for this or that slideshow source, and its been great and I have robbed code left and right and I have done some nic eand clean gallery slideshows with my own and stolen code, and guess what? All thats needed is one picture that changes into a second and then a third and then a fourth and so on and then goes back to the start, and one link, to return to the homepage... Nothign more!

What I have done, is exactly what is wanted, but of course, having each HTML file for each picture is a bit pooey I know you will agree.

Anyone care to offer some help?

Conrad11 · 13 Feb 2008 at 18:35

Do it with php rather than manually is what i suggest...

As in, do what you are doing with the meta tags, but maybe have it in an inline frame, and call the pictures via php so you only have one gallery page (gallery.php?image=foo.jpg).

....but I still think finding a well supported script would be a better option, but its up to you.

Lightnix · 13 Feb 2008 at 23:04

If I understand you correctly, you want to load images into an HTML page in a seemless as possible way using one HTML file?

Not sure what people's opinions on JavaScript are on this forum, but it seems extremely well suited to this task, setTimeout being an easy way to load the images to a certain timer, and changing the image being loaded is as easy as:

Code:

document.getElementById('imgid').src = 'newsrc.png';

So you could use a recursive loop to load the images from an array (well, one of your suggestions was a list so...):

Code:

<head><script type="text/javascript">
var imgs = new Array("pic1.png","pic2.png","pic3.png"); //etc.
var b;

function imgsChanger(a)
{ 
      document.getElementById('imgid').src = imgs[a];
      //if (a<whatever){ //if you feel so inclined.
      b = a+1;
      setTimeout("imgsChanger(b)", 2000); 
     // }
}

</script></head>

<body onload="imgsChanger(0);">
<img id="imgid" />

</body>

This way, if you felt so inclined, you could trivially easily add user interaction to the slideshow such as allowing them to change the picture upon clicking it.

blade007 · 13 Feb 2008 at 23:58

i would have a look at Dynamic Drive there's always some good scripts in there.

FatRakoon · 14 Feb 2008 at 00:06

Conrad11 :
Incapable of using PHP sorry.

Lightnix:
I will have a look at the code thanks... Looks acceptable, but Im not sure that I like the ONLOAD bit, but then it Im calling myself with the Metatags... It might work?
Im using a link in the page to go to the homepage, so, the BACK button ( If im loading myself a few times ) might not work? - Oh I dont know... I will have a play with the code later on ok?

Many thanks.

Blade007
Dynamic Drive? - yes, possibly... Didnt think of that.

Ok, thanks you lot... I will have a play and see if I can or cannot sort things out.

Eriedor · 14 Feb 2008 at 00:08

FatRakoon said:
but Im not sure that I like the ONLOAD bit,

Err what is there not to like?

FatRakoon · 14 Feb 2008 at 01:33

No, I mean, that ( Without looking at, and testing, the code ) that it at first, looks as if it loads in a picture for each time the page loads...

Now, if thats what it does, then sure, I am not after that.

However, if thats all it does, but then using a REFRESH in the META TAGS, brings up the next picture in a kind of Hack-way to do it, then thats great.

I dont know? - I have not tried it yet...

---

La la la...

Ah, right ok, thats simple enough...

Ok, this is EXACTLY what Im after... Absolutely spot on.

1 additions to the original question however...

1:-
Is there a limit on the array filename lengths?
The images are held in the images folder so they are being celled as "images/picy001.jpg" and so on...
Can I add an "images/" string and just have the images called as folderstring+"picy001.jpg"
If so, where can I use this?

2:-
Once it has displayed them all, it stops... How can I get it ro recycle through?

Im kind of going to just slap a HREF in the page to reload itself and this will work, but Id much prefer it to be not in there really.

Many many thanks.

RobH · 14 Feb 2008 at 02:54

FatRakoon said:
2:-
Once it has displayed them all, it stops... How can I get it ro recycle through?

Just update the function, when all of the images have been cycled, it will start again at the first one.

Code:

function imgsChanger(a)
{ 
      document.getElementById('imgid').src = imgs[a];
      //if (a<whatever){ //if you feel so inclined.
      b = a+1;
	  } else {
	  b = 0
	  }
      setTimeout("imgsChanger(b)", 2000); 
}

Lightnix · 14 Feb 2008 at 18:07

Is there a limit on the array filename lengths?

I was doing some reading, some people seem to think it's 2^53, others 2^26 bytes, some just think it's not limited by software but by the amount of memory free (which is true of the first case anyway). I doubt you're going to run into trouble with file name lengths in this case. If anyone knows I'd appreciate the answer as it's been on my mind all day...

Can I add an "images/" string and just have the images called as folderstring+"picy001.jpg"
If so, where can I use this?

Like this:

Code:

var folderstring = 'images/';
document.getElementById('imgid').src = folderstring+imgs[a];

Works fine for me.

FatRakoon · 14 Feb 2008 at 21:50

RobH said:
Just...

Ok, looks straight forward. Thanks mate.

Actually I have never managed to get to grips with C / Java type languages... Won awards for Pascal programing in the 80's and in HBasic in the 90s but never could get into C and this looks the same to me.

So, when I say it looks straight forward, I mean that I can see where it needs to go, but other than that, it looks like garbage LOL

Lightnix said:
some people seem to think it's 2^53, others 2^26 bytes

Damn it! - Talk about limiting your work eh? :eek:

Lightnix said:
it's been on my mind all day...

What? If a question like that has been on your mind, then I am really really sorry for you.

Lightnix said:
Like this:

Code:

var folderstring = 'images/'; document.getElementById('imgid').src = folderstring+imgs[a];

Works fine for me.

Yes, thats exactly how I was thinking of doing it :rolleyes:

Honestly guv!!

Ok, cheers for that... I will chuck these bits into the page later and see how it looks... Many thanks guys.

Oh, in the mean time, here is the bit Im talking about...

http://northwales-cases.co.uk/gal_a.htm

When I view with IE, the fade-ins etc are all lovely and smooth, but when browsing them they flicker, which is a bugger... Firefox is my preferred browser but it does not do the stupid eye candy stuff... Not that I care, but my brother seems to be going for the stupid eye candy over functionality.

Let me know what you think? - the site is as basic as I can get it.

FatRakoon · 16 Feb 2008 at 02:00

RobH said:
Just update the function, when all of the images have been cycled, it will start again at the first one.

Hmm...

Somehow, no matter what I do, if I change the code to what you gaveme, I get script errors and the code wont work?

I cannot see how?

RobH · 16 Feb 2008 at 09:11

I've just tested it and it works, I've changed it so that you no longer need to tell the script how many images you have in the array, it will figure it out from the array size now. Try this:

Code:

<html>
<head>
<script type="text/javascript">
var imgs = new Array("img01.jpg","img02.jpg","img03.jpg","img04.jpg","img05.jpg","img06.jpg","img07.jpg"); //etc.
var b;

function imgsChanger(a)
{ 
	document.getElementById('imgid').src = imgs[a];
	if (a < imgs.length-1) {
		b = a + 1;
	} else {
		b = 0;
	}
	setTimeout("imgsChanger(b)", 2000); 
}
</script>
</head>

<body onload="imgsChanger(0);">
<img id="imgid" />

</body>
</html>

It's actually JavaScript which is often confused with Java but both are completely different languages, JavaScript is a browser scripting language that is used on most websites these days. The above script might look confusing because it is a recursive function which can be a hard concept to pickup (It took me a while to get the hang of it). A recursive function is basically a function that calls itself from within itself.

Can anyone answer this: Due to this being a recursive function, will it eventually generate a stack overflow because it is esentially never ends?

FatRakoon · 16 Feb 2008 at 13:21

Java / Javascript. I have not looked at the code at all for any of them, so obviously I cannot comment on any. I am aware of programming techniques and how code works, or at least how code is supposed to work, I used to program myself, but some years ago, I lost a large portion of my brain when it spilled onto the road and I have lost the ability to learn bugger all these days, however, I have a few games released over the years, and some pro-audio apps are also or rather were also available, so I know the basics, but to be honest, more recent languages have simply gone over my head... Well, thats not strictly true.. The syntax has, but a lot of code, can be understood if you go through it slow enough... I just cannot write half the junk myself.

I got to grips with the very basics of C, but thats all. I much preferred pure assembly if I needed speed, but Pascal or even a good Basic was more than capable of anything I needed to do.

So, yes, I know what a recursive fuinction / subroutine is/does

Recusive Function causing a stack overflow?
Yes, I suppose it would, its clearly calling itself from inside itself - programming paradox!

RobH · 16 Feb 2008 at 15:38

Java is my main programming language at the moment, I'm looking to get into C# soon though because it has a very similar syntax and works a lot like Java. I've looked at C and used it briefly but I couldn't write a C program.

The reason I asked about the stack overflow is because the JavaScript could possible be running forever, recursing lower and lower down the stack until it hits the bottom. I don't know how big the stack is and I assume it differs between browsers as well, I could see it being a problem though if you had a large amount of images in the array. I've caused a stack overflow in Java accidently from a typo in a recursive function but the JavaScript above could possibly encounter one in normal running. The simple solution would be to make the function return when it hits the end of the array and then call it again.