I've just finished creating an ASP.NET assembly for enabling Lightbox functionality on ASP.NET 2.0 based web image gallery. The idea for the control was born out a similar control - Lightbox.NET. However this control does not seem to be under development currently and the latest version gives a bunch of problems when running under medium trust websites. This control implements the functionality in a completely different way than Lightbox.NET. Also this control has a highly modified version of Lightbox scripts that allow better keyboard navigation, ability to download high-res version of displayed image and other small fixes.
The assembly contains two custom controls - LightBoxScriptManager and LightBoxHyperlink.
The LightBoxScriptManager control embeds the CSS and JavaScript files that make up the Lightbox functionality into the page that needs to use it as HTML markup. You can customize the location of the CSS, JavaScript and images for Lightbox using the properties of this control. The LightBoxHyperlink control needs to be used for each image on which you want the popup effect. You can set the name of the album, the caption, the thumbnail image as well as the full web sized image. Upon clicking the thumbnail, the Lightbox effect will run and you can then navigate within the popup.
The complete source as well as samples for this is available for free from here. This has been released under a fully permissive license, so feel free to use it wherever you wish and make whatever modifications you want. It would be nice if you can mention us, though.
To use the assembly, simply follow the instructions below:
- Copy the EITLightbox.dll from the Sample website's Bin/ folder to your website's Bin/ folder
- Also copy the entire "Lightboxnet" folder from the sample site to your website
- Open the ASPX page in which you wish to add the functionality. Switch to Source mode.
- At the top of the page, just below the @Page directive, add the following line:
<%@ Register Assembly="EITLightbox" Namespace="EIT.ASPNET.Controls.LightBox" TagPrefix="eit" %>
- Just below the <form> start on the page, add the following control markup. Make sure that the paths in the CSSPath, ImagesPath and ScriptsPath properties are correct
<eit:LightBoxScriptManager ID="lbsm" runat="server"
CSSPath="lightboxnet/css"
ImagesPath="lightboxnet/images"
ScriptsPath="lightboxnet/js" />
- In the place where you wish to add the image gallery add the following control markup for each image:
<eit:LightBoxHyperlink ID="lb1" runat="server"
Album="My Album Name"
Caption="Picture Caption #1"
FullImageUrl="Images/WebSized/img1.jpg"
ThumbnailUrl="Images/Thumbnail/img1.jpg" />
- Save and run the form.
Here are some sample screenshots of it running
Two galleries and usage tips
The "popup" window. Note the caption, the album image count and the navigation links.
You can navigate using the keyboard or mouse and exit the popup at any time.
Let me know what you think. BTW, this component is what powers my image gallery over at www.vinodunny.com.
Tags:
lightbox,
asp.net,
downloads
Categories: