Lightbox 2.04 mod [Archive] - Dynamic Drive Forums

lovelord

11-27-2009, 05:13 PM

Hi all,

I've implemented a fullscreen image banner with lightbox 2.04, this include cookie create/read/delete as described before, and varied just few thing to work with i.e. & firefox togheter (internet explorer got some struck issues on 2nd load with a cookie on board).

This modified script load banner JUST FIRST TIME, NOT IN REFRESHED PAGES, it reloads when session ends.

Tested on Internet Explorer 8.7600.16385 and Firefox 3.5.5 on Windows 7

I don't get any credit for all the source, just for changes inside.

my banner image is called: email.png
my banner id is called: popup

PS: I'm italian, so some tagged code is in italian :p

open and edit lightbox.js

find

document.observe('dom:loaded', function () { new Lightbox(); });

replace with

// CREAZIONE - LETTURA - CANCELLAZIONE COOKIE SESSIONE BANNER POPUP

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
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);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

// FINE ELAB. COOKIE SESSIONE

// CREO IL LIGHTBOX, SE NON E' PRESENTE IL COOKIE CLICCO, ALTRIMENTI NON CLICCO

document.observe('dom:loaded', function () { if(!readCookie('firstlight')){ myLightbox = new Lightbox();
createCookie('firstlight','firstlight');
cliccoLightbox = 1;
var firstLight=document.getElementById('popup');
firstLight.onclick.apply(firstLight);
}
else
{cliccoLightBox = 0;}
; });

open now your index.html (or what's for)
into <head> tags insert



<script type="text/javascript">
var cliccoLightbox ;
</script>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript">
function LoadImage()
{if (cliccoLightbox == 1)
{document.getElementById('popup').click();}
}

if (document.createEvent )
{
HTMLElement.prototype.click = function()
{
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}
}

</script>



into your <body> tag insert

onLoad="LoadImage();"

between your <body> </body> tags insert



<a id="popup" href="images/email.png" rel="lightbox" title="<a href='http://www.google.it/'>GO ON GOOGLE!</a>"></a>



That's all,
hope it could help someone,

Thanks all !

Lovelord