Alternative Lightbox

In the past I’ve mentioned the Lightbox script that I use on the BMTG website and on this blog. This uses the Scriptaculous JavaScript library.

Last night I stumbled across an alternative to Scriptaculous, named mootools. This is a lot more compact and they even allow you to compile your own version at the point of download, allowing you to limit its content. It even compresses the code for you. Anyway, this is no good to me without a matching Lightbox script and, lo-and-behold, I found one named Slimbox – in fact it’s almost identical, but quicker and various improvements made.

I’ve now embedded both of these in a new version of the BMTG site that I’m working on, and it works like a dream with no modifications to my existing code (other than calling different scripts and stylesheets) required. Nice. It’s more compact and a lot quicker too.

One down side is that I was using Scriptaculous for one of the changes I was making to the site – namely hiding various page contents unless a button is pressed to reveal it. mootools has an equivalent function, but it’s not so easy to use (the downside of a more compact system I guess). Instead, I’ve done anyway with the flashy effects and used a simple bit of JavaScript instead.

By default the section that I want to hide has the following DIV surrounding it…

<div id="cast_div" style="position:relative; display:none">
Content here

This will hide the content until a button (displayed above the content) is pressed.

So, to reveal the content you add the following..


To hide the content again…


Posted by David Artiss

Enterprise Happiness Engineer for the WordPress VIP team at Automattic. Gamer, film lover and general fan of all things Marvel, Star Trek and Star Wars. Failed comedian. Writer for The Big Tech Question. World's Greatest Grandma.

Talk to me!

This site uses Akismet to reduce spam. Learn how your comment data is processed.