Possibilities Lightbox

The Possibilities Lightbox is so named because its use has many possibilities.

The lightbox can be used on WordPress and non-WordPress sites. And it's easy to implement.

Things the Lightbox Can Be Used For

The lightbox can be used to present anything a web page can publish. Lots of possibilities.

What follows isn't a definitive list, of course. You'll think of additional ways to use it.

1. Present a subscription form for your newsletter, blog update notifications, or a special autoresponder series.

2. Present a video control with invitation to watch an introduction to something. The video can play within the lightbox or clicking the control can take the browser to a special page where the video can be played.

3. Publish a quote or image of the day.

4. A calendar may be appropriate for travel or event planning websites.

5. A time/temperature display may be appropriate for weather-related websites or pages.

6. Publish an invitation to an event.

7. Present an image of a special event that occurred at your company or in your personal life. Perhaps with caption explaining what the image represents.

8. An ad for a limited-time special can be published.

9. Publish a slide show of your product line, of testimonials, or of things your product can solve or fix.

Overview of Implementation

There are 9 preferences to specify in a PHP script, preferences such as size, color, and cookie behavior. Also a place to paste in the content of the lightbox.

When the customization is done, upload the PHP script file to your server.

To use the lightbox, whether WordPress or non-WordPress, put one line of JavaScript into your page, post, or template.

That's all :)

Preparing Content for the Lightbox

Preparing the content for the lightbox is like preparing content for a div on a web page. The div can have borders, colors, content, whatever a normal div on a web page can have.

Perhaps you have copy and paste code provided by a vendor. Like a subscription form from Feedburner, for example. Or ad code from an ad-serving website.

Or perhaps you'll be creating the div yourself.

Here is a simple example div:

The source code for the above example is:

<div style="width:270px; 
            height:100px;
            border:1px solid #666;
            border-radius:12px;
            padding:10px;
            background-color:#9cf;">
<h1 style="margin:0;">Testing</h1>
</div>

One additional thing:

There is one thing you most likely will want to include in the lightbox that isn't normally included in a div on a web page. And that's a way to close the lightbox.

The preferences in the source code of the lightbox (see "Implementation Instructions" further below) have an option to close the lightbox when anywhere outside the lightbox is clicked or tapped. However, it's still prudent to include an [X] or [close] image or text link within the lightbox itself.

The image or text link calls the ClosePossibilitiesLightbox() JavaScript function.

Here are two ways to do it.

• With a regular link. Example:

  <a 
     href="javascript:ClosePossibilitiesLightbox()">
  [CLOSE]
  </a>
  
  

• With a span link. Example:

  <span 
     style="cursor:pointer;" 
     onclick="ClosePossibilitiesLightbox()">
  [CLOSE]
  </span>
  
  

Whichever you use, put the code for the lightbox closing link into the div where the link is to be published.

Implementation Instructions

First, copy this source code and save it as PossibilitiesLightbox.php or other .php file name that makes sense to you. The implementation steps follow.

<?php
$PossibilitiesLightboxCode = <<<LIGHTBOXCODE
// Leave software identification and rights section as is.
<!--
   Possibilities Lightbox
   Version 1.1
   January 17, 2015
   
   Version 1.0 published May 22, 2013
   Version 1.0 added delayed lightbox functionality.

   Will Bontrager Software, LLC
   https://www.willmaster.com/
   Copyright 2013,2015 Will Bontrager Software, LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software, LLC grants 
   you a royalty free license to use this 
   software provided this notice appears 
   on all copies. 

   First appeared in Possibilities ezine.
   https://www.willmaster.com/possibilities/
-->


<!-- Leave next line as is. -->
<script type="text/javascript">



// PREFERENCES SECTION //
// (See the article in the Willmaster Library for implementation instructions.)

var WidthOfLightbox = 400;

var HeightOfLightbox = 400;

var ColorOfLayer = "#000033";

var OpacityOfLayer = 45;

var OutsideClickClose = "y";

var CookieName = "LightboxCookie";

var HoursCookieExists = 5;

var DisplayControl = 0;

var SecondsToDelay = 7; // Decimal number is OK.

// End of preferences section. //

// Leave next line as is.
</script><div id="lightbox-to-display" style="display:none; position:absolute; left:0px; top:0px; z-index:199;">




<!-- LIGHTBOX CONTENT SECTION -->
<!-- Replace this entire comment tag with your lightbox code. -->


<!-- End of lightbox content section. -->

<!-- Leave the rest of this file as is. -->
<!-- ---------------------------------- -->
</div>
<script type="text/javascript">
OpacityOfLayer = Math.abs(parseInt(OpacityOfLayer));
if( OpacityOfLayer > 100 ) { OpacityOfLayer = 100; }
document.writeln('<div id="PossibilitiesLightboxShadowDiv" style="display:none; background-color:' + ColorOfLayer + '; z-index:198; position:fixed; left:0px; top:0px; opacity:' + parseFloat(OpacityOfLayer/100) + '; filter:alpha(opacity=' + OpacityOfLayer + ');"' + (OutsideClickClose == "y" ? ' onclick="ClosePossibilitiesLightbox()"' : "") + '></div>');
OutsideClickClose = OutsideClickClose.replace(/\s/g,"");
OutsideClickClose = OutsideClickClose.substr(0,1);
OutsideClickClose = OutsideClickClose.toLowerCase();
DisplayControl = Math.abs(parseInt(DisplayControl));
if( DisplayControl > 2 ) { DisplayControl = 0; }
HoursCookieExists = Math.abs(parseFloat(HoursCookieExists));
WidthOfLightbox = Math.abs(parseInt(WidthOfLightbox));
HeightOfLightbox = Math.abs(parseInt(HeightOfLightbox));
var IE = (navigator.userAgent.indexOf('MSIE') < 0) ? false : true;

function GetViewportDimensions()
{
   var viewX = 0;
   var viewY = 0;
   if(self.innerWidth) {
      viewX=self.innerWidth;
      viewY=self.innerHeight;
      }
   else if(document.documentElement&&document.documentElement.clientWidth) {
      viewX=document.documentElement.clientWidth;
      viewY=document.documentElement.clientHeight;
      }
   else if(document.body) {
      viewX=document.body.clientWidth;
      viewY=document.body.clientHeight;
      }
   return Array(viewX,viewY);
} // function GetViewportDimensions()

function GetPageDimensions()
{
   var pageX = 0;
   var pageY = 0;
   if(window.innerHeight && window.scrollMaxY) {
      pageX = window.innerWidth + window.scrollMaxX;
      pageY = window.innerHeight + window.scrollMaxY;
      }
   else if(document.body.scrollHeight) {
      pageX = document.body.scrollWidth;
      pageY = document.body.scrollHeight;
   }
   else {
      pageX = document.body.offsetWidth;
      pageY = document.body.offsetHeight;
         }
   return Array(pageX,pageY);
} // function GetPageDimensions()

function ShadeTheWindow(width,height)
{
   var ShadowDiv = document.getElementById("PossibilitiesLightboxShadowDiv");
   ShadowDiv.style.display = "block";
   ShadowDiv.style.width = width + "px";
   ShadowDiv.style.height = height + "px";
} // function ShadeTheWindow();

function PutLightboxOverShade(left,top)
{
   var Lightbox = document.getElementById("lightbox-to-display");
   Lightbox.style.left = left + "px";
   Lightbox.style.top = top + "px";
   Lightbox.style.display = "block";
} // function ShadeTheWindow();

function PublishPossibilitiesLightbox()
{
   var pageDimensions = GetPageDimensions();
   var viewDimensions = GetViewportDimensions();
   if(pageDimensions[0] < viewDimensions[0]) { pageDimensions[0] = viewDimensions[0]; }
   if(pageDimensions[1] < viewDimensions[1]) { pageDimensions[1] = viewDimensions[1]; }
   else if(IE) { pageDimensions[1] += 25; }
   ShadeTheWindow(pageDimensions[0],pageDimensions[1]);
   var inFromLeft = parseInt( (viewDimensions[0] - WidthOfLightbox) / 2 );
   var downFromTop = parseInt( (viewDimensions[1] - HeightOfLightbox) / 2 );
   if( inFromLeft < 0 ) { inFromLeft = 0; }
   if( downFromTop < 0 ) { downFromTop = 0; }
   var Xoffset = window.pageXOffset ? window.pageXOffset : (document.body.scrollLeft ? document.body.scrollLeft : 0);
   var Yoffset = window.pageYOffset ? window.pageYOffset : (document.body.scrollTop ? document.body.scrollTop : 0);
   PutLightboxOverShade(parseInt(inFromLeft+Xoffset),parseInt(downFromTop+Yoffset));
} // function PublishPossibilitiesLightbox()

function GetPossibilitiesLightboxCookieValue()
{
   var cookiecontent = '';
   if(document.cookie.length > 0)
   {
      var cookiename = CookieName + '=';
      var cookiebegin = document.cookie.indexOf(cookiename);
      if(cookiebegin > -1)
      {
         var cookieend = 0;
         cookiebegin += cookiename.length;
         cookieend = document.cookie.indexOf(";",cookiebegin);
         if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
         cookiecontent = unescape(document.cookie.substring(cookiebegin,cookieend));
      }
   }
   return cookiecontent;
} // function GetPossibilitiesLightboxCookieValue()

function SetPossibilitiesLightboxCookie(value)
{
   var exp = '';
   if(HoursCookieExists > 0)
   {
      var now = new Date();
      now.setTime(now.getTime() + parseInt(HoursCookieExists * 60 * 60 * 1000));
      exp = '; expires=' + now.toGMTString();
   }
   document.cookie = CookieName + "=" + escape(value) + '; path=/' + exp;
} // function SetPossibilitiesLightboxCookie()

function DisplayPossibilitiesLightboxWhenAppropriate()
{
   if( SecondsToDelay > 0 ) { setTimeout(DisplayPossibilitiesLightboxIfAppropriate,parseInt(SecondsToDelay*1000)); }
   else { DisplayPossibilitiesLightboxIfAppropriate(); }
} // function DisplayPossibilitiesLightboxWhenAppropriate()

function DisplayPossibilitiesLightboxIfAppropriate()
{
   if( DisplayControl == 0 )
   {
      PublishPossibilitiesLightbox();
      return;
   }
   var cookieValue = GetPossibilitiesLightboxCookieValue();
   if( DisplayControl == 1 || DisplayControl == 2 )
   {
      if( ! cookieValue.length )
      {
         PublishPossibilitiesLightbox();
         SetPossibilitiesLightboxCookie(document.URL);
         return;
      }
      if( DisplayControl == 2 ) { return; }
   }
   var URLlist = cookieValue.split("\t");
   for( var i=0; i<URLlist.length; i++ )
   {
      if( URLlist[i] == document.URL ) { return; }
   }
   PublishPossibilitiesLightbox();
   SetPossibilitiesLightboxCookie( cookieValue + "\t" + document.URL );
} // function DisplayPossibilitiesLightboxIfAppropriate()

function ClosePossibilitiesLightbox()
{
   document.getElementById("lightbox-to-display").style.display = "none";
   document.getElementById("PossibilitiesLightboxShadowDiv").style.display = "none";
} // function ClosePossibilitiesLightbox()

function AddOnloadEvent(f)
{
   var cache = window.onload;
   if(typeof window.onload != 'function') { window.onload = f; }
   else { window.onload = function() { if(cache) { cache(); } f(); }; }
} // function AddOnloadEvent()

AddOnloadEvent(DisplayPossibilitiesLightboxWhenAppropriate);
</script>
LIGHTBOXCODE;
header('Content-type: text/javascript');
foreach( preg_split('/[\r\n]+/',$PossibilitiesLightboxCode) as $js )
{
   $js = str_replace("\\","\\\\",$js);
   $js = str_replace("'","\\'",$js);
   $js = str_replace("<!--","<'+'!--",$js);
   $js = str_replace("-->","--'+'>",$js);
   $js = preg_replace('/(scr)(ipt)/i','$1\'+\'$2',$js);
   $js = preg_replace('/(win)(dow)/i','$1\'+\'$2',$js);
   $js = preg_replace('/(doc)(ument)/i','$1\'+\'$2',$js);
   echo "document.writeln('$js');\n";
}
exit;
?>

Implementation Step 1 —

PossibilitiesLightbox.php is customized in two places, in the preferences section and in the lightbox content section. Both are near the top of the file. The places are marked with comments.

At lines 38 through 54 are nine JavaScript variables to customize with your preference.

1. The width of the lightbox – WidthOfLightbox

   Specify the width of the lightbox as number of pixels. Example:

   var WidthOfLightbox = 400;
   
   

2. The height of the lightbox – HeightOfLightbox

   Specify the height of the lightbox as number of pixels. Example:

   var HeightOfLightbox = 400;
   
   

3. The color of the layer between page and lightbox – ColorOfLayer

   There is a shadow layer placed between the web page and the lightbox when the lightbox is published. Specify any valid color. Example:

   var ColorOfLayer = "#000033";
   
   

4. The opacity of the shadow layer – OpacityOfLayer

   The layer of color between the web page and the lightbox can be opaque, transparante, or a percentage between the two (100=100% opaque, 50=50% opaque, 0=completely transparent).

   Specify the number representing a percentage of opacity for the shadow layer color. Example:

   var OpacityOfLayer = 45;
   
   

5. Close lightbox with outside clicked – OutsideClickClose

   Optionally, the lightbox may be closed when the area outside the lightbox is clicked or tapped.

   Specify "y" if lightbox shall disappear when the area outside the lightbox is clicked or tapped. Otherwise, specify "n" or leave blank. Example:

   var OutsideClickClose = "y";
   
   

6. The name of the lightbox cookie – CookieName

   A cookie is used to control when the lightbox is displayed. Here, specify the name of that cookie. Example:

   var CookieName = "LightboxCookie";
   
   

7. The number of hours cookie shall exist – HoursCookieExists

   Specify the number of hours the lightbox cookie shall exist before it is deleted by the browser. This controls how often the lightbox is seen by the same person (when DisplayControl is larger than 0, see next preference).

   For a volatile cookie, one that is deleted when the browser is closed, specify the digit 0.

   Otherwise, specify the number of hours the cookie shall exist. 1 day = 24 hours. 10 days = 240 hours.

   Example:

   var HoursCookieExists = 5;
   
   

8. Controlling the lightbox display – DisplayControl

   Specify a number for controlling the lightbox display.

   Use this #	For this control
   0	No control. The lightbox is displayed every time an enabled page loads.
   1	Display once at every enabled page URL so long as the cookie lasts.
   2	Display only once at the entire site while the cookie lasts.

   Example:

   var DisplayControl = 0;
   
   

9. How long to delay opening the lightbox – SecondsToDelay

   A delay for opening the lightbox after the web page has loaded can be specified. For no delay, specify 0 (digit zero). Otherwise, specify the number of seconds to delay. A decimal number may be used for specifying the number of seconds. Example:

   var SecondsToDelay = 2.5;
   
   

At line 65, you'll see a comment tag to replace with the lightbox code. See the "Preparing Content for the Lightbox" section for the lightbox code.

Implementation Step 2 —

Save the edited version of PossibilitiesLightbox.php and upload it to your server. Make a note of its URL (for the next step).

Implementation Step 3 —

Publish Possibilities Lightbox for your page or post, or in a site-wide template with this JavaScript:

<script type="text/javascript" src="URL/to/PossibilitiesLightbox.php"></script>

Replace URL/to/PossibilitiesLightbox.php with the URL to PossibilitiesLightbox.php uploaded to your server in the previous step.

Use the same JavaScript for both WordPress and non-WordPress sites.

As you can see, implementation is fairly simple.

Once implemented, you and your site visitors may benefit for months or perhaps years to come.

Will Bontrager