LiteBoxAlbum: Autogenerate LightBox-like photo albums
UPDATE 10/08/06: A couple new features, read the bottom of the post for details.
Yesterday I posted about how I created a couple ASP.NET web controls to make it easy to generate a photo gallery using the
LiteBox library. Ok now I have to make a confession, that was only a step to achieve something much more useful, an automated LighBox-like image slideshow!
Some time ago I downloaded the very nice
PhotoHandler by
Bertrand Le Roy, a control/handler which is very versatile and allows you to autogenerate image galleries on the fly, so I thought I would create something similar but instead using the functionality that LiteBox already gives us.
The concept is simple. The control I created is called
LiteBoxAlbum, and when you drag it on a web form it automatically searches for images in the same folder of the page itself, and for each of them creates a
LiteBoxImageLink and renders it on the page in a hidden fashion, associating each link the same Group (so that you can navigate through them). When you run the page, it simulates a click of the mouse on the first link and starts the slideshow. Now you can navigate through all the images of the folder using the LiteBox interface. That's cool, isn't it?
I recorded a short screencast to show how to use it, even if it's very very simple. It required some black magic to start the slideshow automatically, since the Gecko DOM doesn't allow calling the click method on anchors, so I had to find a workaround which I'm reporting here in case you're interested in the trick:
function simulateClick(elementID)
{
var el = $(elementID);
if(!document.all)
{
var evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, window, 0, 0,
0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(evt);
}
else
el.click();
}
UPDATE 10/08/06: By the way, now you can also call the function which starts the album manually. A property called
ShowOnLoad lets you choose whether to show it automatically or not. To call the function manually the control exposes a property called
StartFunction which returns the Javascript statement to execute in order to start the album. This statement can be triggered, for instance, by an Html input button (the control which triggers it mustn't perform a postback or the album, of course, won't be shown).
Suppose you have placed an Html Input Button called
Button1 on your webform, set its runat="server" attribute so that you can retrieve and assign its properties on the server-side.
On The Page_Load event handler you can write the following:
protected void Page_Load(object sender, EventArgs e)
{
Button1.Attributes["onclick"] = LiteBoxAlbum1.StartFunction;
}
Now whenever the button is clicked the album is started.
The screencast can be watched
here, while sources and binaries can be downloaded along with my
Script.Aculo.Us.Net bundle (bottom of the post).