An AJAX Photo Gallery with Lightbox

Will Wright — Fri, 19 Dec 2008 06:59:14 +0000

The Problem

Recently I updated WillWrightPhotography.com to use Microsoft’s AJAX framework. That part worked out swimmingly. The part that didn’t work out so well was that it broke my implementation of Slimbox.

The Solution

Enter Lightbox from Clientcide. Navigate to the download page, scroll your way down to the “3rdParty” section. Check “Lightbox”, hit download and you’re almost done!

Add a refernce to the JS file you just downloaded in your head tag (huh huh).

Now for the hard part! Register a script block that runs after each asynchronous postback. In my case I added it to the Page_Load method of the usercontrol that’s wrapped in the UpdatePanel.

protected void Page_Load(object sender, EventArgs e)
{
  string script = @"window.addEvent('domready', function() {
  new Lightbox();
  });";
  ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), System.Guid.NewGuid().ToString(), script, true);
}

You’re all done! Hit F5 and bask in the washed out glow from your monitor.

The Particulars

I’m using the MooTools JS framework, which is why I had choosen Slimbox in the first place. If you’re NOT already using MooTools; maybe you’re using jQuery or prototype, than this solution might not work for you.

The Clientcide libraries are an extension of the MooTools libraries, thus for some things they’re required.

SpinOneSolutions » ASP.NET

An AJAX Photo Gallery with Lightbox

The Problem

The Solution

The Particulars