Blog (my web musings)

Building on my previous Fullscreen 'SiteShow' with Controls (from a list of URLs) blog post, this article shows you how to adapt the scripts to schedule in additional slides for certain times, or specific dates, using PHP.

The PHP

To start off, using the full-screen demo page as a base, we'll set a few PHP variables at the top of the page to set our local timezone and identify the time, date and weekday;

<?php 

date_default_timezone_set('Europe/London'); // default timezone to account for British Summer Time or Daylight Savings changes
$time = mktime();  
$date = strtotime(date('d-m-Y')); // 30-09-2016 = 30th September 2016
$day = date('D'); // Mon, Tue, Wed, Thu, Fri, Sat, Sun

?>

With those in place, its now very easy to insert slides that only displays at a certain time of day - here we can see a lunch menu that displays between 12:00pm and 1:00pm;

<ul> 
   <li data-sec="120" data-src="daily-news.htm">Daily News</li> 
   <?php if ( $time >= strtotime('12:00pm') && $time <= strtotime('1:00pm') ) {
       echo '<li data-sec="30" data-src="lunch-menu.htm" >Lunch Menu</li>'."\n";
       } 
   ?>
   <li data-sec="30" data-src="contact-us.htm" >Contact Us</li> 
   <li data-sec="30" data-src="opening-hours.htm" >Opening Hours</li>
</ul>

... And here's a slide that is only displayed for a specific week - Halloween costume sale, anyone?;

<ul> 
   <li data-sec="120" data-src="daily-news.htm">Daily News</li> 
   <li data-sec="30" data-src="contact-us.htm" >Contact Us</li> 
   <li data-sec="30" data-src="opening-hours.htm" >Opening Hours</li> 
   <?php if ( $date >= strtotime('24-10-2016') && $date <= strtotime('31-10-2016') ) { 
       echo '<li data-sec="30" data-src="halloween-sale.htm" >Halloween Sale</li>'."\n"; 
       } 
   ?>
</ul>

... You can also target specific days of the week - the weekend, for example;

<ul> 
   <?php if ( in_array($day, array('Sat', 'Sun')) ) { 
       echo '<li data-sec="30" data-src="weekend-offers.htm" >Weekend Offers</li>'."\n"; 
       } 
   ?> 
   <li data-sec="120" data-src="daily-news.htm">Daily News</li> 
   <li data-sec="30" data-src="contact-us.htm" >Contact Us</li> 
   <li data-sec="30" data-src="opening-hours.htm" >Opening Hours</li>
</ul>

... Or, one single day for a special event - Happy Valentines Day!;

<ul> 
   <li data-sec="120" data-src="daily-news.htm">Daily News</li> 
   <li data-sec="30" data-src="contact-us.htm" >Contact Us</li> 
   <?php if ( $date == strtotime('14-02-2017') ) { 
       echo '<li data-sec="30" data-src="valentines-day.htm" >Valentines Day</li>'."\n"; 
       } 
   ?> 
   <li data-sec="30" data-src="opening-hours.htm" >Opening Hours</li>
</ul>

JavaScript changes

Now, the PHP time variables set at the top of the page will only be correct at the point when the slideshow page first loads, so its never going to recognise a change in hour or day (as the slideshow plays over time) in order to load in special scheduled slides. That is, unless the page refreshes regularly. Fortunately we can adapt the existing JavaScript to make that happen quite easily - head for the show() function and add the extra code hightlighted below;

function show(num){ 
   clearInterval(int); 
   mask.className = 'mask'; 
   if (item.length == i+1){ // refresh main page after last menu item, to allow PHP timed items to load 
       setTimeout(function(){ location.reload(true); }, 1000); // 1 sec - same time as '#mask { transition:background 1s }' 
       }
   i = (num + item.length) % item.length; 
   time = item[i].getAttribute('data-sec') * 1000; 
   int = setInterval(next, time); 
   setTimeout(function(){ content.contentWindow.location.replace(item[i].getAttribute('data-src')); }, 1000); // 1 sec - same time as '#mask { transition:background 1s }' 
   setTimeout(function(){ mask.className = ''; }, 2000); // 2 secs - double time of '#mask { transition:background 1s }' 
   }

That's about it. A simple modification, but very useful when scheduling content ahead of time.