Sometimes, my previous article on RedDot CMS, SmartEdit and Javascript is just not enough - for example, integrating Lightbox (in this case, version 1). Now, there is probably not any really good reason to have Lightbox working within SmartEdit - but that is not the point of this post. No. The point of this post is to explore “why” Lightbox doesn’t work in SmartEdit, because, chances are, the Javascript library you *do* want to have work in SmartEdit is probably suffering the same issue. And any way - its an easy problem to solve
The symptoms of note here (apart from it not working) is that we also do not have any Javascript errors. Which generally means some clever Javascript is failing safe, or, more likely, the Javascript isn’t being run at all. Either way, we need to find where the Javascript begins running, and in this case, we happen upon the issue straight away at the bottom of the Javascipt file - extract below:
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
// Function found at Simon Willison's weblog - http://simon.incutio.com/
//
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(initLightbox); // run initLightbox onLoad
As you hopefully can see, the call to addLoadEvent on line 17 (above) is supposed to start the initialisation of Lightbox. The addLoadEvent function (lines 5 through 15 above) takes a copy of the old onload function and replaces it with one that calls the old unload function followed by the supplied function. All would seem well - but it suffers one minor but important flaw - it relies on everything else playing just as nice with the onload event.
Now, when you are dealing with your own web sites or web applications, you are in control of playing nice and, well, it serves you right if you don’t. But when you deal with other peoples web sites or web applications, well, unless you want to start modifying them (assuming that you can *and* you wish to deal with whatever can of worms that opens) your other options are to *hope* that they play nice (not very effective) or work around it. Guess what we will be doing…
With respect to SmartEdit and the onload event - RedDot CMS does not play nice. In the previous article, we saw how in SmartEdit mode, RedDot CMS would happily add a HTML body tag to our page if it was missing one - whether it needed one or not. This time we are more interested in what it does to an existing HTML body tag - bludgeoning the onload attribute with its own code. And by doing so, it effectively overwrites what Lightbox had previously set up.
Thankfully, the solution is easy - we simply repeat the addLoadEvent call *after* RedDot CMS has output the HTML body tag:
<!IoRangeRedDotMode>
<script type="text/javascript">
/* <![CDATA[ */
if ((typeof addLoadEvent == 'function') && (typeof initLightbox == 'function')) { addLoadEvent(initLightbox); } // Overide SmartEdit!
/* ]]> */
</script>
<!/IoRangeRedDotMode>
As the code is only necessary in SmartEdit mode, we use SmartEdit mode only block marks to remove the added code from preview and publish. I place the code at the end of the HTML output, between the closing HTML body and html tags, and also do some checks to confirm the existence of the functions - in case I have pages that do not include the Lightbox code.