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).

kick it on DotNetKicks.com

Published 04 August 2006 06:28 PM by simoneb
Filed under: , ,

Comments

# DotNetKicks.com said on 04 August, 2006 12:02 PM
You've been kicked (a good thing) - Trackback from DotNetKicks.com
# SimoneB's Blog said on 04 August, 2006 12:19 PM
If you don't know what LightBoxes are check out the list at blinklist. Among them two implementantions...
# SimoneB's Blog said on 09 August, 2006 11:33 PM
Yesterday I got a link on my news aggregator pointing to a new article by Sam Judson on Coding4Fun, which...
# SimoneB's Blog said on 21 March, 2007 07:29 PM

Yesterday I got a link on my news aggregator pointing to a new article by Sam Judson on Coding4Fun ,

# SimoneB's Blog said on 21 March, 2007 07:45 PM

If you don't know what LightBoxes are check out the list at blinklist . Among them two implementantions

This site

Search

Go

This Blog

News

Syndication

Sponsors

  • MaximumASP