18
An AJAX Photo Gallery with Lightbox
0 Comments | Posted by Will Wright in AJAX, ASP.NET, Frameworks
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).
<head runat="server"> <script type="text/javascript" language="javascript" src="js/mootools-1.2-core-yc.js"></script> <script type="text/javascript" src="js/mootools-1.2-more.js"></script> <script type="text/javascript" src="js/clientcide-trunk-705.compressed.js"></script> </head>
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.
