0

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/

<!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>
15
Contributors
23
Replies
191
Views
11 Years
Discussion Span
Last Post by Bukhari1986
0

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

0

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

0

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

0

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 :(

0

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.

0

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 !

0

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!

0

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.

0

You can add

<META HTTP-EQUIV="Window-target" CONTENT="_top">

and/or

<base target="_top">

and/or even

<SCRIPT TYPE="text/javascript" LANGUAGE=JAVASCRIPT>
<!--
if (top.frames.length!=0)
top.location=self.document.location;
// -->
</SCRIPT>

to <head> in all your pages.

Will not work in page with the iframe unfortunately.

0

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. :)

0

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

0

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.

0

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

0

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

0

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?

0

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.

0

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?!

0

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.

c#

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

0

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?

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.