2008-10-31

ASP.NET LightBox Image Control

If you've never been to Dynamic Drive, please take a moment and browse this wonderful site. There are a lot of phenomenal JavaScript samples, some of which are actually useful! While Microsoft's done a pretty good job with AJAX.NET there are still some things you need to actually write JavaScript for. One of my personal favorite tools is the LightBox image viewer--if you are unfamiliar with it, go take a look at http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm.



Of course, there are other great resources for learning more about LightBox, but I've created a Web User Control based on LightBox 2.03 from Dynamic Drive. Here's my code!



LightBoxImage.ascx



<%@ Control Language="C#" AutoEventWireup="true" CodeFile="LightboxImage.ascx.cs" Inherits="Controls_Html_LightboxImage" %>


Truth be told, this isn't the prettiest user control to look at in design view. Maybe I'll fix that later.



LightBoxImage.ascx.cs




using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Text;



///

/// http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm for more details on this implementation

///


public partial class Controls_Html_LightboxImage : System.Web.UI.UserControl

{

const string template = "<a{0}>{1}</a>";

protected void Page_Load(object sender, EventArgs e)

{

try

{

if (!this.Page.ClientScript.IsClientScriptBlockRegistered("LightBox"))

{

StringBuilder sb = new StringBuilder();

sb.Append("<script type=\"text/javascript\" src=\"");

sb.Append(Page.ResolveClientUrl("~/Script/prototype.js"));

sb.Append("\"></script>");

sb.Append("\n");

sb.Append("<script type=\"text/javascript\" src=\"");

sb.Append(Page.ResolveClientUrl("~/Script/scriptaculous.js?load=effects"));

sb.Append("\"></script>");

sb.Append("\n");

sb.Append("<script type=\"text/javascript\" src=\"");

sb.Append(Page.ResolveClientUrl("~/Script/lightbox.js"));

sb.Append("\"></script>");

sb.Append("\n");



this.Page.RegisterClientScriptBlock("LightBox", sb.ToString());

}



}

catch (Exception ex)

{

// TODO: Handle this Exception
}

}



protected override void Render(HtmlTextWriter writer)

{

try

{

// Render an Html Tag that looks something like this:

// <a href="images/image-1.jpg" rel="lightbox" title="my caption" rev="http://www.dynamicdrive.com">image #1</a>

string replace0 = "";

if (_imageUrl.Length > 0)

{

replace0 = replace0 + " href=\"" + Page.ResolveClientUrl(_imageUrl) + "\"";

}

if (_title.Length > 0)

{

replace0 = replace0 + " title=\"" + (_title) + "\"";

}

if (_titleNavigateUrl.Length > 0)

{

replace0 = replace0 + " rev=\"" + (_titleNavigateUrl) + "\"";

}

if (_imageGroup.Length > 0)

{

replace0 = replace0 + " rel=\"lightbox[" + (_imageGroup) + "]\"";

}

else

{

replace0 = replace0 + " rel=\"lightbox\"";

}

// Replace 1

string replace1 = "";

if (_thumbnailImageUrl.Length > 0)

{

replace1 = replace1 + "<img src=\"" + Page.ResolveClientUrl(_thumbnailImageUrl) + "\" alt=\"" + _text + "\" />";

}

else

{

replace1 = _text;

}

writer.Write(Environment.NewLine);

writer.Write(string.Format(template, replace0, replace1));

writer.Write(Environment.NewLine);

}

catch (Exception ex)

{

string s = ex.Message;

}

}



private string _imageUrl = string.Empty;

public string ImageUrl

{

get { return _imageUrl; }

set { _imageUrl = value; }

}

private string _thumbnailImageUrl = string.Empty;

public string ThumbnailImageUrl

{

get { return _thumbnailImageUrl; }

set { _thumbnailImageUrl = value; }

}

private string _title = string.Empty;

public string Title

{

get { return _title; }

set { _title = value; }

}

private string _titleNavigateUrl = string.Empty;

public string TitleNavigateUrl // Lightbox Rev

{

get { return _titleNavigateUrl; }

set { _titleNavigateUrl = value; }

}

private string _text = string.Empty;

public string Text // Text inbetween rendered ... tags.

{

get { return _text; }

set { _text = value; }

}

private string _imageGroup = string.Empty;

public string ImageGroup // LightBox Rel

{

get { return _imageGroup; }

set { _imageGroup = value; }

}

}




Thar she be. You'll have to go download the LightBox sample from Dynamic Drive, and you'll have to make sure that you grab the JS and CSS files--and make any reference updates, but you shouldn't be far from being able to drag this control on to whichever ASPX page you'd like! Consequently, I suppose you could add other properties--you know, true Alternate Text Support... CssClass... Image.Height... Image.Width... etc. Well! I hope this helps you guys!


Jamal Khan