SiteShow -- Create a slideshow of web pages

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Troy Troy is offline Offline May 23rd, 2006, 5:50 pm |
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/
Show Printable Version Show Printable Version
Quick reply to this message  
Code Snippet
•
•
•
•
JavaScript / DHTML / AJAX Syntax
Toggle Plain Text
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <!--
  3. SlideShow v1.0
  4. Troy Wolf <troy@troywolf.com>
  5. Simply define your "slides" in the javascript slides[] array below.
  6. -->
  7. <html>
  8. <head>
  9. <title>SiteShow 1.0</title>
  10. <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  11.  
  12. <style>
  13. /* Change body background-color to change fade out color. */
  14. body.siteshow { margin:0; padding:0; background-color:#000000; }
  15. #menu
  16. {
  17.     font-family:Arial;
  18.     font-size:9pt;
  19.     display:none;
  20.     opacity:0.00;
  21.     -mozopacity:0.00;
  22.     filter:alpha(opacity=0);
  23.     position:absolute;
  24.     top:10px;
  25.     left:10px;
  26.     padding:5px;
  27.     background-color:#000000;
  28.     color:#FFFFFF;
  29.     border:3px dotted #999999;
  30. }
  31. #menu a { color:#ffffff; }
  32. #menu a:hover { text-decoration:none; }
  33. #title { font-size:11pt; font-weight:bold; letter-spacing:2; }
  34. #slides { font-size:9pt; line-height:16pt; }
  35. .button { width:60px; font-size:9pt; letter-spacing:1; }
  36. </style>
  37.  
  38. <script type="text/javascript">
  39. var current_idx = 0;
  40. var slides = new Array();
  41. var menuwin;
  42. var show_timer;
  43. var menu_timer;
  44. var menu;
  45. var content;
  46. var loaded = true;
  47.  
  48. // Define your "slides". 3 values for each are:
  49. //      1. Duration in seconds.
  50. //      2. Title to be used in menu.
  51. //      3. Source URL. Can be full URI or a relative URL.
  52. slides[1] = new Array(15, "WAMP HOWTO", "http://www.troywolf.com/articles/wamp_howto.htm");
  53. slides[2] = new Array(15, "PHP Proxy", "http://www.troywolf.com/articles/php/class_http/proxy.phps");
  54. slides[3] = new Array(15, "HTTP class", "http://www.troywolf.com/articles/php/class_http/");
  55. slides[4] = new Array(15, "Session class", "http://www.troywolf.com/articles/php/class_session/");
  56. slides[5] = new Array(15, "RSS Consumption", "http://www.troywolf.com/articles/php/class_xml/rss_example.php");
  57. slides[6] = new Array(15, "PHP Exchange WebDAV", "http://www.troywolf.com/articles/php/exchange_webdav_examples.php");
  58. slides[7] = new Array(15, "vCard class", "http://www.troywolf.com/articles/php/class_vcard/");
  59.  
  60. function MenuInit()
  61. {
  62.     var html = "";
  63.     for(idx=1; idx<slides.length; idx++) {
  64.         html += '<a href="javascript:Navigate('+idx+')">' +
  65.             slides[idx][1] + "</a><br />\n";
  66.     }
  67.     document.getElementById("slides").innerHTML = html;
  68.     menu.style.display = "block";
  69. }
  70.  
  71. function MenuShow()
  72. {
  73.     clearTimeout(menu_timer);
  74.     opacity('menu', 0, 90, 500);
  75.     menu_timer = setTimeout("MenuHide()", 3500);
  76. }
  77.  
  78. function MenuHide()
  79. {
  80.     opacity('menu', 90, 0, 500);
  81. }
  82.  
  83. function Pause()
  84. {
  85.     clearTimeout(show_timer);
  86.     document.getElementById('play').style.display = "block";
  87.     document.getElementById('pause').style.display = "none";
  88. }
  89.  
  90. function Navigate(slide_idx)
  91. {
  92.     clearTimeout(show_timer);
  93.     if (current_idx == 0) {
  94.         if (!slide_idx) { slide_idx = 1; }
  95.         current_idx = slide_idx;
  96.         content.src = slides[current_idx][2];
  97.         document.getElementById('play').style.display = "none";
  98.         document.getElementById('pause').style.display = "block";
  99.         show_timer = setTimeout("Navigate()", slides[current_idx][0]*1000);
  100.         return;
  101.     }
  102.  
  103.     if (slide_idx) {
  104.         current_idx = slide_idx;
  105.         content.src = slides[current_idx][2];
  106.         document.getElementById('play').style.display = "block";
  107.         document.getElementById('pause').style.display = "none";
  108.         return;
  109.     }
  110.  
  111.     loaded = false;
  112.     current_idx++;
  113.     if ( current_idx == slides.length) { current_idx = 1; }
  114.     opacity('content', 100, 0, 500);
  115.     document.getElementById('play').style.display = "none";
  116.     document.getElementById('pause').style.display = "block";
  117.     show_timer = setTimeout("Navigate()", slides[current_idx][0]*1000);
  118.     return;   
  119. }
  120.  
  121. function opacity(id, opacStart, opacEnd, millisec)
  122. {
  123.     //speed for each frame
  124.     var speed = Math.round(millisec / 100);
  125.     var timer = 0;
  126.  
  127.     //determine the direction for the blending, if start and end are the same nothing happens
  128.     if(opacStart > opacEnd) {
  129.         for(i = opacStart; i >= opacEnd; i--) {
  130.             setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
  131.             timer++;
  132.         }
  133.         if (opacEnd == 0) { setTimeout("FadeOutTrigger('"+id+"')",((timer-1) * speed));; }
  134.         //if (opacEnd == 0) { FadeOutTrigger(id); }
  135.     } else if(opacStart < opacEnd) {
  136.         if (opacStart == 0) { FadeInTrigger(id); }
  137.         for(i = opacStart; i <= opacEnd; i++)
  138.             {
  139.             setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
  140.             timer++;
  141.         }
  142.     }
  143. }
  144.  
  145. //change the opacity for different browsers
  146. function changeOpac(opacity, id)
  147. {
  148.     var object = document.getElementById(id).style;
  149.     object.opacity = (opacity / 100);
  150.     object.MozOpacity = (opacity / 100);
  151.     object.KhtmlOpacity = (opacity / 100);
  152.     object.filter = "alpha(opacity=" + opacity + ")";
  153. }
  154.  
  155. function FadeOutTrigger(id)
  156. {
  157.     //alert('FadeOut: '+id);
  158.     switch(id) {
  159.     case "menu":
  160.         document.getElementById(id).style.display = "none";
  161.         break;
  162.     case "content":
  163.         content.src = slides[current_idx][2];
  164.         //setTimeout("opacity('content', 0, 100, 500)", 1000);
  165.         break;
  166.     default:
  167.         break;
  168.     }
  169. }
  170.  
  171. function FadeInTrigger(id)
  172. {
  173.     //alert('FadeIn: '+id);
  174.     switch(id) {
  175.     case "menu":
  176.         document.getElementById(id).style.display = "block";
  177.         break;
  178.     case "content":
  179.         //opacity('content', 0, 100, 500);
  180.         break;
  181.     default:
  182.         break;
  183.     }
  184. }
  185.  
  186. function FadeInContent()
  187. {
  188.     if (!loaded) {
  189.         opacity('content', 0, 100, 500);
  190.         loaded = true;
  191.     }
  192. }
  193.  
  194. function LoadTrigger()
  195. {
  196.     //self.resizeTo(1366,768);
  197.     menu = document.getElementById('menu');
  198.     content = document.getElementById('content');
  199.     Navigate();
  200.     MenuInit();
  201.     MenuShow();
  202. }
  203.  
  204. window.onload = LoadTrigger;
  205.  
  206. </script>
  207.  
  208. </head>
  209. <body class="siteshow">
  210. <iframe id="content" name="content" style="width:100%; height:100%;" frameborder="no" scrolling="auto" src="" onmouseover="MenuShow();" onload="FadeInContent();" ></iframe>
  211. <div id="menu">
  212.     <div id="title">SiteShow Menu</div>
  213.     <div id="slides">
  214.     </div>
  215.     <p>
  216.         <input id="pause" class="button" style="display:block;" type="button" value="pause" onclick="Pause()" />
  217.         <input id="play" class="button" style="display:none;" type="button" value="play" onclick="Navigate()" />
  218.     </p>
  219. </div>
  220. </body>
  221. </html>
Code Snippet Comments
0
babyboy808 babyboy808 is offline Offline | Jul 30th, 2006
•
•
•
•
Very Nice...
 
0
Inny Inny is offline Offline | Feb 22nd, 2007
•
•
•
•
Could You add math random to this to display a selection of random pages from a site?
 
0
artweb artweb is offline Offline | Oct 25th, 2007
•
•
•
•
Please tell me how to make the siteshow stop when I click on a link on my siteshow page.
 
0
dariointernet dariointernet is offline Offline | May 3rd, 2009
•
•
•
•
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
 
 

Quick Comment
•
•
•
•
•
•
•
•
Message:
•
•
•
•


Similar Threads
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxcode ajaxhelp animate array automatically autoplay beta boarder box bug calendar captcha card cart codes column cookies createrange() css cursor date debugger decimal design developer dom download dropdown element enter error events firefox firehose flash focus form frameworks getselection google gwt html htmlform iframe image() images index java javascript javascripts jawascriptruntimeerror jquery jsp listbox maps marquee masterpage menu microsoft mimic mp3 mp4 offline onmouseover parameters php player post problem programming progressbar prototype rating redirect regex safari scale scriptlets search select size sources sql starrating text textarea toggle twitter validation variables w3c web website window windowofwords windowsxp xml xspf
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC