Does this have to be php or way to do this in html?

themoon · 01-10-2013, 07:24 PM

Is there a way to display random images about every 5 seconds from a specific folder in html without specifying their actual names in html?

So instead of having to type every single <src img= picture 1.jpg>
just tell it to display every image in this folder every few seconds?

Does this make sense?

Excavator · 01-10-2013, 07:31 PM

Hello themoon,
Look at this jQuery plugin - http://www.slidesjs.com/

That's just the first one google turned up. Search 'jQuery slideshow' for lots more.

themoon · 01-10-2013, 07:32 PM

oh man, thank heavens. Appreciate the reply!

Hmm... does jquery require being connected to the internet? These are stand alone html boxes on digital display tv's.

Excavator · 01-10-2013, 08:10 PM

Quote:

Originally Posted by themoon

oh man, thank heavens. Appreciate the reply!

Hmm... does jquery require being connected to the internet? These are stand alone html boxes on digital display tv's.

To be stand-alone you would need to include the .jQuery file that runs the slideshow and the jQuery library itself. Very easy.

themoon · 01-10-2013, 08:44 PM

I know this is a dumb question...

But I can't find the "file" you speak of. I am on the site. I see download.

When I click on the button for Download (production) .jQuery a bunch of code comes up that looks jumbled.
When I click on the button for Download (development) .jQuery a bunch of code comes up that looks clean.

Am I supposed to like... copy and paste this code into a txt file or something.

EDIT:

Ok, skip that, I think I figured it out. Create a .js doc, copy and paste the code. Now need to figure out how to link a jquery slideshow to it. Thank you for indulging me!

felgall · 01-10-2013, 09:56 PM

If you are going to use jQuery on the internet then you should link to one of the main shared copies so that it is more likely that your visitors will already have it downloaded instead of having it slow down the loading of your page.

The following is probably the most commonly used alternative:

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Excavator · 01-10-2013, 10:41 PM

Quote:

Originally Posted by themoon

Ok, skip that, I think I figured it out. Create a .js doc, copy and paste the code. Now need to figure out how to link a jquery slideshow to it. Thank you for indulging me!

For that slideshow I linked you to in my first reply you would need these files to be available locally to work with no internet connection:

slides.js
jquery-1.8.3.min.js

The head of your document could start out looking something like this -

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>	
	<script src="path/to/jquery-1.8.3.min.js"></script>
	<script src="path/to/slides.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true
			});
		});
	</script>
</head>
<body>
</body>
</html>

felgall · 01-10-2013, 11:04 PM

You put the script tags in the wrong place. To have the page appear to load faster any script tags should come immediately before the </body> tag.

The only time script tags should go in the head of the page is where the script might transfer to another page instead of loading the current one.

Excavator · 01-10-2013, 11:16 PM

You are definitely the .js guy felgall,

I only put it there because of this bit in the article you wrote:

Quote:

The next thing to check for is any code that you want to ensure gets executed before the page gets loaded (eg. a test for if your non-frames page is loading inside someone's frameset). This code needs to be in a script within the head section of your page below the title and any meta tags and link statements.

Actually, according to that, maybe only the preload script would belong in the head.

Some very good information there if you're interested themoon, see the article here.