SiteShow -- Create a slideshow of web pages

18 Years Ago Troy 1 15K Views

This is a simple to use, self-contained website slideshow utility. Do you have a monitor or TV setup in your lobby where you'd like to present web content automatically? With this HTML/Javascript page, simply edit an array of pages or "slides". You define a title, duration, and URL for each slide. The pages fade out and fade in between slides. You can change the fade out color as desired.

SiteShow features a small menu that automatically appears (fades in) if you mouseover the page. The menu allows you to pause or play or directly access a specific slide.

Simply copy the code below into a new HTML page and load it in your browser to see how it works. Then change the slide URL's to whatever pages you want to load. Slides can be your own web pages, pictures, or any other web page.

Tip: Press F11 to put your browser in full-screen mode. Also, in IE, right-click the menu bar at top and select Auto-hide.

Using SiteShow in fullscreen mode can generate a very nice display for your lobby TV or a computer in a public area. Perhaps you want to create a slideshow of your company's products using your existing company website pages.

More details at http://www.troywolf.com/articles/client/siteshow/

javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--
SlideShow v1.0
Troy Wolf <troy@troywolf.com>
Simply define your "slides" in the javascript slides[] array below.
-->
<html>
<head>
<title>SiteShow 1.0</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">

<style>
/* Change body background-color to change fade out color. */
body.siteshow { margin:0; padding:0; background-color:#000000; }
#menu
{
    font-family:Arial;
    font-size:9pt;
    display:none;
    opacity:0.00;
    -mozopacity:0.00;
    filter:alpha(opacity=0);
    position:absolute;
    top:10px;
    left:10px;
    padding:5px;
    background-color:#000000;
    color:#FFFFFF;
    border:3px dotted #999999;
}
#menu a { color:#ffffff; }
#menu a:hover { text-decoration:none; }
#title { font-size:11pt; font-weight:bold; letter-spacing:2; }
#slides { font-size:9pt; line-height:16pt; }
.button { width:60px; font-size:9pt; letter-spacing:1; }
</style>

<script type="text/javascript">
var current_idx = 0;
var slides = new Array();
var menuwin;
var show_timer;
var menu_timer;
var menu;
var content;
var loaded = true;

// Define your "slides". 3 values for each are:
//      1. Duration in seconds.
//      2. Title to be used in menu.
//      3. Source URL. Can be full URI or a relative URL.
slides[1] = new Array(15, "WAMP HOWTO", "http://www.troywolf.com/articles/wamp_howto.htm");
slides[2] = new Array(15, "PHP Proxy", "http://www.troywolf.com/articles/php/class_http/proxy.phps");
slides[3] = new Array(15, "HTTP class", "http://www.troywolf.com/articles/php/class_http/");
slides[4] = new Array(15, "Session class", "http://www.troywolf.com/articles/php/class_session/");
slides[5] = new Array(15, "RSS Consumption", "http://www.troywolf.com/articles/php/class_xml/rss_example.php");
slides[6] = new Array(15, "PHP Exchange WebDAV", "http://www.troywolf.com/articles/php/exchange_webdav_examples.php");
slides[7] = new Array(15, "vCard class", "http://www.troywolf.com/articles/php/class_vcard/");

function MenuInit()
{
    var html = "";
    for(idx=1; idx<slides.length; idx++) {
        html += '<a href="javascript:Navigate('+idx+')">' +
            slides[idx][1] + "</a><br />\n";
    }
    document.getElementById("slides").innerHTML = html;
    menu.style.display = "block";
}

function MenuShow()
{
    clearTimeout(menu_timer);
    opacity('menu', 0, 90, 500);
    menu_timer = setTimeout("MenuHide()", 3500);
}

function MenuHide()
{
    opacity('menu', 90, 0, 500);
}

function Pause()
{
    clearTimeout(show_timer);
    document.getElementById('play').style.display = "block";
    document.getElementById('pause').style.display = "none";
}

function Navigate(slide_idx)
{
    clearTimeout(show_timer);
    if (current_idx == 0) {
        if (!slide_idx) { slide_idx = 1; }
        current_idx = slide_idx;
        content.src = slides[current_idx][2];
        document.getElementById('play').style.display = "none";
        document.getElementById('pause').style.display = "block";
        show_timer = setTimeout("Navigate()", slides[current_idx][0]*1000);
        return;
    }

    if (slide_idx) {
        current_idx = slide_idx;
        content.src = slides[current_idx][2];
        document.getElementById('play').style.display = "block";
        document.getElementById('pause').style.display = "none";
        return;
    }

    loaded = false;
    current_idx++;
    if ( current_idx == slides.length) { current_idx = 1; }
    opacity('content', 100, 0, 500);
    document.getElementById('play').style.display = "none";
    document.getElementById('pause').style.display = "block";
    show_timer = setTimeout("Navigate()", slides[current_idx][0]*1000);
    return;   
}

function opacity(id, opacStart, opacEnd, millisec)
{
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
        if (opacEnd == 0) { setTimeout("FadeOutTrigger('"+id+"')",((timer-1) * speed));; }
        //if (opacEnd == 0) { FadeOutTrigger(id); }
    } else if(opacStart < opacEnd) {
        if (opacStart == 0) { FadeInTrigger(id); }
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id)
{
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function FadeOutTrigger(id)
{
    //alert('FadeOut: '+id);
    switch(id) {
    case "menu":
        document.getElementById(id).style.display = "none";
        break;
    case "content":
        content.src = slides[current_idx][2];
        //setTimeout("opacity('content', 0, 100, 500)", 1000);
        break;
    default:
        break;
    }
}

function FadeInTrigger(id)
{
    //alert('FadeIn: '+id);
    switch(id) {
    case "menu":
        document.getElementById(id).style.display = "block";
        break;
    case "content":
        //opacity('content', 0, 100, 500);
        break;
    default:
        break;
    }
}

function FadeInContent()
{
    if (!loaded) {
        opacity('content', 0, 100, 500);
        loaded = true;
    }
}

function LoadTrigger()
{
    //self.resizeTo(1366,768);
    menu = document.getElementById('menu');
    content = document.getElementById('content');
    Navigate();
    MenuInit();
    MenuShow();
}

window.onload = LoadTrigger;

</script>

</head>
<body class="siteshow">
<iframe id="content" name="content" style="width:100%; height:100%;" frameborder="no" scrolling="auto" src="" onmouseover="MenuShow();" onload="FadeInContent();" ></iframe>
<div id="menu">
    <div id="title">SiteShow Menu</div>
    <div id="slides">
    </div>
    <p>
        <input id="pause" class="button" style="display:block;" type="button" value="pause" onclick="Pause()" />
        <input id="play" class="button" style="display:none;" type="button" value="play" onclick="Navigate()" />
    </p>
</div>
</body>
</html>

babyboy808 0 Newbie Poster

18 Years Ago

Very Nice...

Inny 1 Posting Whiz in Training

17 Years Ago

Could You add math random to this to display a selection of random pages from a site?

artweb 0 Newbie Poster

17 Years Ago

Please tell me how to make the siteshow stop when I click on a link on my siteshow page.

dariointernet 0 Newbie Poster

15 Years Ago

This was really beautiful.

I'm trying to have a slideshow of webpages. But unlike Troy's code I want the slideshow to appear as a module of a webpage.

An iframe is not the solution because it would just show one corner of the page.

Does anyone know of a solution where you can enter a series of links, it browses the links, takes snapshots of the webpages, resizes them, then makes a slideshow of the resized images with the images being links to the actual webpage.

Ha ha BTW I'm not a programmer. Can only write very basic stuff.

email:
mikekogel AT gmail DOT com

dayi 0 Newbie Poster

14 Years Ago

I have a problem, I have monitoring pages running with the siteshow, but after a time the pages do not actualize the data. example: the pages has the time in the horizontal part and if it's 3 o'clock you see 1 o'clock in the page, but the siteshow continues working even with that issue, can you help me? I am not a programmer :(

gpmattoo 0 Newbie Poster

12 Years Ago

The slideshow works fine but am having the issue described above that the data is n ot current and seems like the older webpage is being displayed. Would appreciate if anyone provides recommendations around the same.

neonflux 0 Newbie Poster

11 Years Ago

I'm using this slideshow for my web pages, but the css in the webpages do not take effect.
Seems like something from the slideshow index.html is overriding the css used in webpages.
How do i fix that?
Please Help !

Eyeteeorg 0 Newbie Poster

11 Years Ago

I learned a lot from reviewing your code. Thanks. :)

mc_peko 0 Newbie Poster

11 Years Ago

neonflux: Doesn't override css for me.

artweb: It will not stop as long as we are inside the iframe. target="top" for all links would solve that. But I will not add that to my entire site.

My beta here: http://flamencopeko.net/play.php

I'm trying to remove the fades. Way too much code for me. But very nice!

mc_peko 0 Newbie Poster

11 Years Ago

For now I just set the fade-times to 0, but that does not produce a seamless transition. I want to remove the fade code completely. And we need a better way of breaking out of the iframe.

mc_peko 0 Newbie Poster

11 Years Ago

You can add

and/or

and/or even

to <head> in all your pages.

Will not work in page with the iframe unfortunately.

mc_peko 0 Newbie Poster

11 Years Ago

Just batch in <base target="_top"> to all your pages. Works very well and keeps other sites from framing you. I'm about ready to make my site playable now. :)

mc_peko 0 Newbie Poster

11 Years Ago

It's live. :) Sure could need some help with removing all the fade and menu code.

mc_peko 0 Newbie Poster

11 Years Ago

Also does anyone know how to make my stop button stop on the current page, and how to make skip buttons? Make the site's pages interact with this great JavaScript that is.

mc_peko 0 Newbie Poster

11 Years Ago

Fixing the stop button was very easy. Just used <a href="#">.
I made skip buttons too, but didn't use them for various reasons.

yohdono 0 Newbie Poster

11 Years Ago

Is there any possibility to make this slider scroll the web content automatically

David Mac 0 Newbie Poster

11 Years Ago

Excellent! I've been looking for something like this for a while. I can combine my own aspx pages with external links to create the slide show my customer wants!
My only concern is the hardcoded links. Not used JS much before, is it possible to read the array values in from a database table?

pritaeas 2,194 ¯\_(ツ)_/¯

11 Years Ago

is it possible to read the array values in from a database table?

Yes, either generate the array when you prepare the output of this page with server-side scripting, or do an AJAX request to get the values you need. This question may be better suited as a new discussion.

David Mac 0 Newbie Poster

11 Years Ago

I'm not even sure what the new discussion would come under?!

I'm using this as part of an asp.net application so my array contains relative links to aspx files.

My slide show file is html now but I could convert this to an aspx file and do server side prcessing to read the links I need, but I'm not sure how that would get into the JavaScript?!

JorgeM 958 Problem Solver

11 Years Ago

Hello David Mac,

I agree that you may want to open a new thread regarding getting values from a database and the data available as an array for client side processing.

Let me give you a quick an easy example... if you need more help, start a new thread since this is no longer related to the topic in this thread.

Assuming asp.net/c#, I have a hidden control (input element, not displayed) and I am going to store a string of data in the hidden control's value property. Then client side, use javascript to get the string of data, parse the data, and store the results in an array. This example, assumes that there are no commas in the string of data.

protected void Page_Load(object sender, EventArgs e)
    {
        string[] array1 = new string[] { "1", "2", "3" };
        hd1.Value = String.Join(",", array1);
    }

aspx

<form id="form1" runat="server">
<div>
<asp:hiddenfield runat="server" ID="hd1" ClientIDMode="Static"></asp:hiddenfield>
<script>
   var inputText = document.getElementById('hd1').value;
   var arr = new Array();
   arr = inputText.split(',');

   for (var i = 0; i < arr.length; i++) {
       console.log(arr[i]);
   }
</script>
</div>
</form>

This example will simply write the data to the browser's console. Once you have the data in the array, you can access the array and its members as you see fit.

444a48b283f464280de23514f0917f76

David Mac 0 Newbie Poster

11 Years Ago

I also need to know how to remove the fade effect. It's very slow in my customers browser (not sure what that is yet, maybe even on his iPad).
Is there an easy way to disable it?

David Mac 0 Newbie Poster

11 Years Ago

Not sure why this has appeared here?! I posted it in the original thread!

Bukhari1986 -4 Newbie Poster

11 Years Ago

Wonderfull :)

Daniel_85 0 Newbie Poster

6 Years Ago

Great script, thank you. I would like to insert it into an existing page but need to move the slide to the right of the menu. Suggestions would be appreciated.

Thanks in advance, Daniel

Nathan_18 0 Newbie Poster

4 Years Ago

I am trying to figure out how to get it to display a website that requires me to login to view it.

PROSYS_1 0 Newbie Poster

7 Months Ago

wow.. its working fine... very useful for me to complete my task.. thanks

Edited 7 Months Ago by pritaeas because: Removed e-mail address

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.