html for a total novice... how do I get a slide show effect with random order of pages?
June 1, 2005 10:38 AM   Subscribe

I am a total html novice. I have ten pages, "page1.html" through "page10.html" that I have already created. I want to have a link ("slide show!") on my home page "index.html" that, once clicked, creates a slide show of "page1" through "10", showing each page for 5 seconds until finished (never showing any page more than once.) I also want the order of the pages to be random (ie showing the slide show in a different order each time the link on "index" is clicked.) Is this possible? If so how in the heck can I do it!?!?
posted by izizi to Computers & Internet (11 answers total)
 
You can get the slideshow effect by placing this tag into your <head> section:

<meta http-equiv="Refresh" content="n;url">
where "n" stands for the number of seconds you want the browser to wait and "url" is the address of the next page you want it to load. It's been a while since I've used this, but I think "url" needs to be an absolute URL (like you would see in the browser's address bar) not a relative URL (just the file name).

In order to get a randomized list, you'll need to use PHP or something like it. Does your web host support PHP?
posted by Mars Saxman at 10:49 AM on June 1, 2005


What Mars said is exactly true, if the order of the pages is static. If you want the order to be dynamic, there are a few ways, but none of them can be accomplished with html alone.
  1. Since it's running off the index page, you could use an inline frame and some java script to rotate. This permits the feature for no-repetition.
  2. You could load all the info into a single page and resort to java script once again to make either DIVs or SPANs switch between visible and hidden. This also allows the no-repetition thing.
  3. You could generate a basic scripting page that is called first by a click and then again from each page via Mars's meta refresh tag. It would randomly select one of the ten pages, but does not guarantee non-duplication, and can also start an endless loop if you're not careful.
  4. You could use the method from 3, but add GET query information into the chosen refresh to tell the server page which have already been done, and that the random selection should re-iterate until it hits an unseen page then display. This also allows you an option for coding what should happen after all ten have been seen.

posted by mystyk at 11:10 AM on June 1, 2005


OK. So the basic idea I am getting is that the slide show I can do but the randomness is way beyond me. So, if I hire someone to do it, what would the very best way to habve them do it be (php, frames, other?) How many hours would I expect this to take a developer?
posted by izizi at 11:31 AM on June 1, 2005


Hmm. Try Google variations on slideshow/javascript/frame/timer.

It's a simple problem, there's almost certainly something out there very close to what you want.

On preview, adapting an existing script to fit your needs is a 30 minute job, if that.

Server-side would be guaranteed to work across all browsers, but requires support from your web host. Javascript won't work for people who don't have it (offer an alternative navigation method), but doesn't need web host support.
posted by Leon at 11:38 AM on June 1, 2005


You don't need server-side code (PHP, ASP), you can just do it in JavaScript. I'm sure there's some scripts on the web you can download.
posted by matildaben at 11:39 AM on June 1, 2005


Not tested, but off the top of my head, include this in each of your pages:

<script language="javascript">
function swapPage() {
var n = Math.round(10 * Math.random()) + 1;
window.location.href="http://foo.bar/page" + n + ".html;
}
</script>
<body onLoad="setTimeout('swapPage();',10000);">
....

and so on. For longer delays, make the setTimeout time longer; for more pages, put other numbers than 10 in the var n= line.

I'm sure there are cleaner and better ways to do it, but this should work.
posted by ook at 12:33 PM on June 1, 2005


Ah, typo. that line should be
window.location.href="http://foo.bar/page" + n + ".html";
posted by ook at 12:34 PM on June 1, 2005


I missed the bit where you wanted it to never repeat pages, and to stop after it's shown them all. Yeah, for that the easiest way to do it would be with a frameset or iframe, so the javascript can sit in a separate frame and keep track of which pages it's shown already. If it's just an image slideshow, and the only thing that differs between pages is the image, that's even easier, no frames required. In any case, PHP or any other server-side code would be overkill.

Development time for something like this should be measured in minutes, not hours. Hell, I'm not busy right now, email me your files.
posted by ook at 12:56 PM on June 1, 2005


In page00.html, which just redirects to the first random page:

var in_pages="01020304050607080910";
var i;
var pages = "";
var oo = "foo";
for (i=0; i<1 0; i++)br>
{
        var out_pages="";
        var n = Math.round((10-i) * Math.random());
        pages = "" + pages + in_pages.substring(n*2, n*2+2);
        if (n>0)
        {
                out_pages = ""+in_pages.substring(0, n*2);
        }
        if ( (n*2)+2 < in_pages.length)br>
        {
                out_pages = ""+out_pages + in_pages.substring((n*2)+2, in_pages.length);
        }
        in_pages = out_pages;
}

pages=pages.substring(2,20);
window.location.href="http://localhost/page" + in_pages + ".html?pages="+pages;


In each of page01 through page10.html:

function nextPage()
{
        var pages = location.href.substring(location.href.indexOf('=')+1, location.href.length);
        var next_page = pages.substring(0,2);
        if (pages.length==0)
                window.location.href="http://localhost/finalpage";
        else
        {
                pages = pages.substring(2, pages.length);
                window.location.href="http://localhost/page" + next_page + ".html?pages="+pages;
        }
}


remove the spurious br's it appears on preview that metafilter has added to the ends of lines...

I'm ashamed to admit that this took me more than half an hour.
posted by sfenders at 6:23 PM on June 1, 2005


index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Slideshow</title>
</head>

<frameset rows="56,*">
<frame src="slideshow.html" />
<frame src="main.html" id="slideshow" />
</frameset>
</html>



main.html:

Whatever you want to display before they click on the slideshow link.


1.html, 2.html, etc.:

The pages in the slide show.


slideshow.html:

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Slideshow</title>

<script type="text/javascript">
// <![CDATA[

// List of pages to display in the slideshow.
var pages = [
"1.html",
"2.html",
"3.html",
"4.html",
"5.html",
"6.html",
"7.html",
"8.html",
"9.html",
"10.html"
];

// Number of seconds to delay between pages.
var delay = 5;

function startSlideShow() {
var frame = top.document.getElementById("slideshow");

// Randomize the order of the pages.
for (var i = 0; i < pages.length; ++i) {
var j = Math.floor(10 * Math.random());

var pageI = pages[i];
var pageJ = pages[j];

pages[i] = pageJ;
pages[j] = pageI;
}

// Display each page in turn with a <delay>-second pause between each page.
for (var i in pages) {
(function() {
var page = pages[i];

setTimeout(
function() {
frame.src = page;
},

i * delay * 1000
);
}) ();
}

// After the last page is done, show the original page.
setTimeout(
function() {
frame.src = "main.html";
},

pages.length * delay * 1000
);
}

// ]]>
</script>
</head>

<body>
<a href="javascript:startSlideShow()">Slide Show!</a>
</body>
</html>

posted by Khalad at 7:48 PM on June 1, 2005


Darn, I forgot to paste the source in the last time before I hit Post, and screwed up the spacing. Well, you can do View Source on this page to grab the correctly formatted code out of the raw HTML page source.
posted by Khalad at 7:52 PM on June 1, 2005


« Older Graduate school: Linguistics or Publishing?   |   Wedding dress after the wedding? Newer »
This thread is closed to new comments.