My website is Lightbox enabled for image viewing and slideshow viewing of Gallery2 contents. Although the default case is to enable these Lightbox services, many website viewers may not want this. Website visitors should have the option to configure their viewing experience to suit their preference. This introduces the idea of user specific customization or configuration of their profile on my website.
To enable customization I implemented a user options section as a new Gallery2 sidebar block. The first challenge was to create a new Gallery2 block. Fortunately there is a very simple HTML page custom plugin for Gallery2 available on the Internet, from Bharat Mediratta, that can be used to do this. I didn’t care about the intended capability to link to HTML pages but I did want the ability to establish a sidebar block. I wanted to display checkbox options in the sidebar that the user could modify. This sidebar block would be shown on all Gallery2 pages so I also needed some way to retain the settings of these checkboxes as the user traversed the gallery pages.
To do this, I had to maintain the user option state in session cookies. The cookies provide persistance to the option values across individual page changes within one session and also across different sessions. I had two Lightbox options custom configured in my Matrix theme that could be used for initial settings. One was a global Lightbox option that identified if Lightbox services were available, and the second identified if Lightbox slideshow capabilities were available. If these options were set in the theme and if cookie values did not exist then I could assume that the checkbox options should be set, otherwise the checkbox option value would be the cookie value. For persistance the cookies would be retained within the browser for five days.
The Gallery2 sidebar block contents, found in the HtmlBlock.tpl template file in the plugin blocks directory, were replaced with the following Javascript:
templates/blocks/HtmlBlock.tpl
{*
* $Revision: 1.5 $
* If you want to customize this file, do not edit it directly since future upgrades
* may overwrite it. Instead, copy it into a new directory called "local" and edit that
* version. Gallery will look for that file first and use it if it exists.
*}
{if ($theme.params.lightbox == 1)}
<script type="text/javascript">
// <![CDATA[
function set(s) {ldelim}
var x = readCookie(s) ;
if (!x) return ;
eraseCookie(s) ;
(x.charAt(0)=='1') ? x = "0" : x = "1" ;
createCookie(s,x,5) ;
{rdelim}
function createCookie(name,value,days) {ldelim}
if (days) {ldelim}
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
{rdelim}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
{rdelim}
function readCookie(name) {ldelim}
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {ldelim}
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
{rdelim}
if (name == "cb1") return {if ($theme.params.lightbox == 1)} "1" ; {else} "0" ; {/if}
if (name == "cb2") return {if ($theme.params.autoLightbox == 1)} "1" ; {else} "0" ; {/if}
return null;
{rdelim}
function eraseCookie(name) {ldelim}
createCookie(name,"",-1);
{rdelim}
document.write('<div class="{$class}">') ;
if (readCookie('cb1') == "1")
document.write('<input type="checkbox" id="cb1" checked="checked" onClick="set('+"'cb1'"+');"/><b>Photo Lightbox on</b><br />') ;
else
document.write('<input type="checkbox" id="cb1" onClick="set('+"'cb1'"+');"/><b>Photo Lightbox on</b><br />') ;
{if ($theme.params.autoLightbox == 1)}
if (readCookie('cb2') == "1")
document.write('<input type="checkbox" id="cb2" checked="checked" onClick="set('+"'cb2'"+');"/><b>Gallery Slideshow on</b>') ;
else
document.write('<input type="checkbox" id="cb2" onClick="set('+"'cb2'"+');"/><b>Gallery Slideshow on</b>') ;
{/if}
document.write('</div>') ;
// ]]>
</script>
{/if}
>
