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:
var el = $(elementID);
var evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, window, 0, 0,
0, 0, 0, false, false, false, false, 0, null);
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
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).