LightBox with ASP.NET

If you don't know what LightBoxes are check out the list at blinklist. Among them two implementantions caught my attention, the original LightBox JS 2.0 by Lokesh Dhakar and the lighter LiteBox by Tyler Mulligan.

The final result is exactly the same, they are able to show images in a really nice fashion, as well as create a slideshow out of them. They differ in some aspects by the way:

LightBox JS is based on script.aculo.us and prototype while LiteBox is based on moo.fx and prototype.lite, which are pratically a subset of the original libraries.
LightBox JS is heavy since its weight is about 100k, while LiteBox is much lighter, about 30k.

You might be wondering why the effect is exacly the same; well, script.aculo.us and prototype espose a great amount of functionality which LightBox JS doesn't exploit, so there's no need for such heavy libraries. That's why I chose LiteBox for my own port to ASP.NET.

Ok, so we want to get that effect with our images. In order to set LiteBox up you need to:

include the scripts into your page
import a stylesheet
make LiteBox images available in some folder of your website in order for it to be able to retrieve them (I mean the images which show up in the LiteBox to perform navigation and close the box)
place your anchors pointing to your images on the page
set the rel attribute of your anchor elements to "lightbox"
[optional] or set the rel attribute to "lightbox[group]" in order to group together a set of images so that you can surf through them
[optional] set the title attribute of the anchors to show a caption for the image.

Ok, too much to do in my opinion. Not very reusable. Let alone that if you want to show thumbnails of the images you have to wrap your anchors around img tags! (ASP.NET HyperLink controls instead expose a property called ImageUrl which does just the same, and it's what I've used for my implementation).

So here comes my wrapper. Nothing to read here the control LiteBoxExtender is obsolete, read on. I created a webcontrol called LiteBoxExtender which includes the scripts and the stylesheet for you, and which will come even more useful later. This control is a non visual control, and works together with another control called LiteBoxImageLink which is wired up automatically to the LiteBoxExtender once dragged on the webform and which represents a link to an image.
The LiteBoxImageLink is derived from HyperLink and behaves the same it does. It only exposes one more property called Group.
So in order to set it up all you have to do is:

Drag on the page as many LiteBoxImageLinks as you want. Each one will represent an image which will show up in the LiteBox.
Set the properties of the LiteBoxImageLink controls:

NavigateUrl: the url of the image which will show up in the LiteBox

[optional] Text: the text to show in the link to the image

[optional] ImageUrl: the url of the preview image (to be used instead of Text)

[optional] Group: a group name, in order to group images together and be able to surf through them.

It's that easy, no more scripts and styles to deal with, no images to copy in your website folders, and no manual editing of your anchors to wire up the LiteBox, the controls will do that by themselves. Of course it will work with normal HyperLink controls too as well as with anything that renders on the page as an html anchor tag, but in that case you'll have to follow the manual procedure and set the rel attributes yourself.

The control is available inside my Script.Aculo.Us.Net library.

UPDATE: sources are now only available via the SVN repository. Read here for details. If you download the library you'll find another control called LiteBoxAlbum. I'm not talking about it here since it deserves another post, but it is much cooler than the controls I've described in this post, so you may want to check it out. One advice only, create a blank webform, drag a LiteBox album control in it and place some images (.jpg or .gif) in the same directory as the webform. Then just browse to the page and enjoy!
UPDATE: The follow-up has been posted and is available here.

Published 04 August 2006 09:06 AM by simoneb

Filed under: ASP.NET, Tools, Web Design

Comments

# DotNetKicks.com said on 04 August, 2006 12:03 PM

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# Javier Lozano said on 05 August, 2006 07:11 PM

Nice to see we're on the same boat...

http://lozanotek.com/archive/2006/05/04/lightboxnet.aspx

# simoneb said on 05 August, 2006 07:24 PM

Javier, I'd like to see what you have coded but I get no response from your server.

# SimoneB's Blog said on 05 August, 2006 10:07 PM

Yesterday I posted about how I created a couple ASP.NET web controls to make it easy to generate a photo...

# Javier G. Lozano said on 08 August, 2006 06:37 PM

# entr0py said on 11 August, 2006 07:26 PM

Is there anyway to change the stylesheet at design time?

# simoneb said on 12 August, 2006 05:49 AM

The original LiteBox (and LightBox too) ships with a single stylesheet, which I embedded in the LiteBoxImageLink, thus you cannot change its appearance at the moment, but it's good point of improvement.
One solution could be embedding a few other stylesheets and letting the developer choose among them at design time, but it's not the best one in terms of customization. Another alternative can be exposing style properties like BackgroundColor, ImageBorder and so on and generate a stylesheet on the fly based on these properties, but it's a bit more work ;)

Feel free to download the sources from the SVN repository, change them and submit a patch, I'll be glad to include your changes in the project.

# Rashed said on 13 August, 2006 11:30 PM

how can we use this control with web forms not only with images ?
thanks

# simoneb said on 14 August, 2006 06:07 AM

Hi Rashed, I'm not sure I understand you question, but I think you mean that you want to display other content in the box, not only images.
LiteBox only allows to show images, but there's another implementation, called ThickBox, which allows you to show any content inside it. You can find it here.

# thaya said on 05 September, 2006 03:41 PM

Hello, I wanted to display a image on asp.net page like a banner...does anybody how to do that? i mean how to setup the propery for that image1. thank you,

# simoneb said on 05 September, 2006 06:46 PM

ASP.NET comes with a webcontrol called AdRotator which should do if I understand what you mean

# ipiscean said on 16 September, 2006 05:47 PM

I liked your LiteBox.NET control. I have a question though, have you had any luck using ThickBox 2 with ASP.NET 2.0.

I am trying to use the thickbox functionality in my "atlas" enabled pages but because of some conflicting Javascript, it does not work.

Because you have used Lightbox, which is similar to thickbox, could you please suggest me how should go about resolving that issue?

# simoneb said on 21 September, 2006 05:38 PM

ipiscean, the problems with Atlas and other javascript libraries working together concern the duplication of function names, such as the dollar function. I found successful the injection of the script.aculo.us scripts after the atlas scripts, and since I have been doing that programmatically I injected them during the Page's PreRenderComplete event. If you are doing it by hand I guess you'll have to place them somewhere inside the <form> tag, since the Atlas scripts are rendered there too.

# Frenchy said on 28 December, 2006 11:42 AM

I've tried your .NET version of the LightBox. The problem I had with the JS version is the same here :(. I'm using ajax (update panel), and all It does is opening the image in a new page... On a simple page It works fine, but on my exisiting website I always have a problem when I go in "Source" mode then in "Design" mode. Visual Studio gives me that error when trying to rerender the control on the design; Error Rendering Control (name of my panel) The control collection cannot be modified during Databind, Init, Load, PreRender or Unload phases Ok so I finally try to put the control out of any panel...to see If It can works with my website. It compiles fine, no problem with source<->design view. I click my thumbnail, I have the black fadding effect...but nothing displays :(((((( So a lot of errors with my website, I'm not telling It's your fault ;) But maybe you had the same problem, and you have an idea where the problem could be ? Thanks.

# simoneb said on 28 December, 2006 12:19 PM

Well the control doesn't have to be put inside of an UpdatePanel, there's not need for that. If you get Javascript errors when you use the original JS library or my control maybe you are using an old version of ATLAS, which used the $ function. With the latest release it should be working fine. The latst version of the control, built under the RC1 of ASP.NET Ajax is on my svn repository at http://sourceforge.net/projects/busybox.

# bhavin said on 07 February, 2007 12:13 AM

I have asp.net page and i am using update panel in that page, in that update panel i am calling user control where i am using your light box but it dosen't work but i turn off update panel it works.. can you suggest work around with update panel on.. Thanks

# simoneb said on 07 February, 2007 11:18 AM

The control is made to work in an full ASP.NET page, and not in sections of pages like user controls or UpdatePanels. However at the moment I can't try it out but I will eventually come to you whenever I'll be able to do it.

# Fencer04 said on 01 March, 2007 06:43 PM

I get the following error before the page loads when using the control in a .aspx page using MasterPages. ASP.NET 2.0 Environment. There is a script manager on the page. The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

# simoneb said on 01 March, 2007 07:24 PM

I cannot replicate the issue, can you post the code you wrote?

# Benor said on 14 March, 2007 11:41 AM

Hi, I am having the same issue as Frenchy and bhaven. I am using lightbox within an update panel, but it only loads the image to a new page - no errors. Does anyone have any updates on this, or how to use lightbox within an update panel? Thanks, Benor.

# simoneb said on 14 March, 2007 06:23 PM

Benor, as I said the control is not made to work withing an UpdatePanel, and I can't think of a reason why someone should want to place it there.

# Adrian said on 21 March, 2007 09:32 AM

Hi, I'm having the same problem as Fencer04. I can't get the control to work using MasterPages with script manager in ASP.NET 2.0. In my case, I always get an aspx Server Error with the message "Object reference not set to an instance of an object. An unhandled exception was generated during the execution of the current web request". Without MasterPages it works fine.

# simoneb said on 21 March, 2007 07:21 PM

Adrian, the control works fine for me inside a MasterPage. Try downloading the source and compiling it from the svn repository located here: http://sourceforge.net/projects/busybox

It's possible that I've made some changes after the release of the binaries.

# simoneb said on 21 March, 2007 07:59 PM

Adrian, you were right, it didn't work inside a MasterPage. I fixed it and uploaded the new code to the svn repository.

# tony said on 27 April, 2007 06:29 PM

to simoneb: i load images within an updatepanel2 in case of changes in updatepanel1...so i won't get an postback. and thats maybe the reason some people need to use support for using the lightbox on images inside an update panel. greetings tony

# simoneb said on 28 April, 2007 02:48 PM

Thanks for reporting Tony, I will take a look into it.

# mike said on 05 May, 2007 05:07 PM

Hey Simon, I have the same issue with the light box not opening correctly when inside an update panel (and for my application, it does need to be in an update panel). Anyways, here's a clue that might help. If I click on the image after I have done a reqeust back to the server (sort of a postback but done within the update panel so there is no 'real' post back), then I click on the thumb image, the image opens in a new page. Now if I hit the back button going back to the page with the light box on it, and press it again, now it opens up properly (on the same page with the greyed out border.) Also, if when I initially open the page and press a thumb image, it works, but once I have called back to the server within hte update panel, then it start showing hte image on a new page. Hope that helps. Mike

# simoneb said on 06 May, 2007 04:57 AM

Thanks for describing the issue. At the moment I have no chance to put my hands on it, but I will consider it whenever I do.

# Jon said on 14 May, 2007 03:28 PM

Hi Guys, I am having the same issue trying to install the original Litebox scripts, it actually works before you do a callback, but after that it just opens the image in a new page. If you click the back button it starts working again, very strange. unfortunately I can't un-ajax, the application just to get this working so I think I'll have to forget about it for now.

# Jon said on 14 May, 2007 04:25 PM

Actually, Somebody seems to have written some code for the original "fat" lightbox which seems to fix this issue here .... http://www.codeplex.com/lbnet/WorkItem/View.aspx?WorkItemId=10099 I wonder if anything similar could be applied to Litebox ?

# simoneb said on 14 May, 2007 06:11 PM

I changed some of the code and as far as I've tested now it's working inside UpdatePanels. Please get the source from the svn repository and let me know if it's working for you too.

# Jon said on 15 May, 2007 11:26 AM

Sorry to be a pain, I have no idea how to use SVN , I followed your instructions but the TortoiseSVN page wouldn't open. I also read your comments and tried downloading this - http://sourceforge.net/projects/busybox but it didn't seem to contain the litebox code, unless I'm missing something. Where can I download the modified code from ? (Oh, and thanks for your patience!)

# simoneb said on 15 May, 2007 05:50 PM

I didn't release a binary form of the code, it's not completely reliable so I won't be releasing it for a while. SVN is very easy to use, download TortoiseSVN and follow my instructions to checkout the code.

# Sandip said on 16 May, 2007 06:04 AM

http://www.codeplex.com/lbnet/WorkItem/View.aspx?WorkItemId=10099 did you use that url code. If you change code how can i download it. i need it urgent.

# simoneb said on 16 May, 2007 04:35 PM

Sandip, it's on the svn repository. Check here http://dotnetslackers.com/community/blogs/simoneb/archive/2006/08/05/293.aspx.

# Jon said on 28 May, 2007 12:45 PM

Hi, I have downloaded Tortoise SVN and managed to check out the code. However I really don't know where to start as there are lots of folders. I found a folder called Lightbox but have no idea what to do with the contents. I am fairly new to ASP.NET so I have no idea which files I need to compile or how to compile them without visual studio (i use visual web developer) Has anyone managed to compile the new DLL and check it works after a callback ? If so, is there any chance of sending me a copy ? jon.hobbs.smith@gmail.com Thanks, Jon

# simoneb said on 29 May, 2007 05:22 AM

Jon, you need Visual C# in order to build the projects in the solution. Other wise you can use the BuildConsole you can find here.

As for what to do with the files, you need to gather some ASP.NET knowledge if you want to work with them. It's nothing difficult, I swear. However using the BuildConsole you should be able to build all the stuff.

# Jon said on 29 May, 2007 08:43 AM

Thanks, I'll Give it a go.

# James said on 01 July, 2007 09:33 PM

Hi Simoneb Great work. Thanks for making public... I have come across one critical error: The second time that the close button is clicked in Firefox (2.0) it crashes the whole browser! This also happens on the Litebox website - but on not on Lightbox2 - so I guess it is something in the Litebox javascript. Any ideas on how to fix this would be much appreciated. Thanks James

# simoneb said on 02 July, 2007 07:34 AM

James, I can't get to reproduce the bug. I suppose it's something on your side. Try cleaning up your browser cache, you may have some corrupted scripts cached. The litebox samples work fine for me.

# James said on 02 July, 2007 01:11 PM

Thanks for the prompt response Simone. It is definitely not a cache issue - though it may be specific to my machine. I am using Vista & Firefox 2.0.0.4. I spent several hours looking into the issue, and have found that it is to do with adding an onclick attribute to an anchor tag (as in line 215 in the litebox.js file). If i change this to be a div tag (instead of an anchor tag), then the problem completely goes away! It is very strange - and only happens the second time the close link is clicked. I hope this solution helps if anyone else is having the same problem. FYI - I also added style attribute "cursor:pointer" to the div to make the div behave like a link.

# simoneb said on 02 July, 2007 02:23 PM

James, I tried FF 2.0.0.4 both on Vista and XP SP2 with the online samples but I don't get any error. Can you describe me the steps you follow to reproduce it? I don't get it, even if I open and close images multiple times.

# James said on 02 July, 2007 06:31 PM

Hi Simone I have tested on another vista machine, and it does not happen. It may be caused by a specific plugin (I have Firebug & Web Development Toolbar), or perhaps even a corrupt install. No matter - I have found a work around - and hopefully documented a solution in case anyone else runs into the same problem. Thanks for following up regardless. If I find out how to reproduce on another machine, I will make another post... Now onto a different problem, which I am fairly sure can not just be specific to me! When viewing in IE (7) I get the following error message: "Internet Explorer cannot open the Internet site http://localhost:1126/BusyBoxDotNet.Litebox.Web/". You may be able to tell from the URL that I even get this error when running your test site from the source code. I have looked into this issue a little, and found other people with this issue (but not a solution yet): http://www.huddletogether.com/forum/comments.php?DiscussionID=318. However, I have tried this on another machine, and there is no problem... very frustrating. If you do a google search on "Ajax Internet Explorer cannot open the Internet site" - you'll see that this is a not uncommon issue, that doesn't happen for everyone. I'll keep looking into it, and make another post if i find anything useful. If anyone has any input, it would be much appreciated.

# James said on 02 July, 2007 07:08 PM

Follow up from the "cannot open the Internet site..." issue. Looking at the source code, the following line is inserted just above the form tag:

This is the output from line 67 of LiteBoxImageLink.cs (ScriptManager.RegisterStartupScript...). If that line is commented out, and the script manually inserted just BELOW the form tag - IE has no problem?!

# James said on 02 July, 2007 07:12 PM

Further to the last post - if I use your HeadManager code to register the javascript in the head (and update so it fires on page load) then this also works.

# simoneb said on 02 July, 2007 08:49 PM

James, you know, cross browser compatibility is a nightmare. However, that function should be called when the page has finished rendering and the markup has to be already there since that function will navigate through the tree and find which elements it has to modify. Can't guess why IE won't allow it to execute. This time I'm getting the error, too.

# simoneb said on 02 July, 2007 09:18 PM

James, I've got some feedback about the IE issue. The problem is that with ASP.NET you can't register scripts below the closing form tag, and it looks like IE doesn't like the initLightbox function to be called before then.

There's a workaround: instead of calling the function directly, you can change the registration line into:

ScriptManager.RegisterStartupScript(this, typeof(LiteBoxImageLink), "initialize", "Event.observe(window, 'load', initLightbox, false);", true);

This will prevent IE from firing that error message, since the init function is called only once the window object fires the load event.

The problem with this is that it won't work when the controls are inside an UpdatePanel (in FF - in IE this doesn't work either way), since in this case it's the ScriptManger which takes care of calling the initLightbox function each time there's an asynchronous postback, and registering the function with Event.Observe will prevent it from working. Thus, no workaround at the moment. The only advice I can give you is DON'T USE IE ;)

# simoneb said on 02 July, 2007 09:30 PM

Ok James, I've come up with a solution. If no Ajax is involved then the registration call emits

Event.observe(window, 'load', initLightbox, false);

so this doesn't break IE.

When there's Ajax, on normal requests, say, GETS and full POSTS, always Event.Observe is emitted, otherwise, if it's an asynchronous postback, the plain old

initLightbox();

is called. IE seems not to complain about this one. I've updated the code on the repository, let me know if it's working for you.

# James said on 03 July, 2007 09:56 AM

Hi Simone. Yes - that prevents the error. I also took at stab at addressing the problem, and found that I could get the initialization script to execute AFTER the form tag using the following code: if (HttpContext.Current.Items["initLightboxRegistered"] == null) { Page.Form.Parent.Controls.AddAt(Page.Form.Parent.Controls.IndexOf(Page.Form) + 1, new LiteralControl("")); HttpContext.Current.Items["initLightboxRegistered"] = true; } I slightly prefer this solution for two reasons: 1) It keeps the logic consistent even with Aysync Postbacks. 2) The litebox will be initialized as soon as the HTML markup has loaded, without having to wait for all images and other linked content to finish loading first. Any JavaScript triggered by a page load event will not run until every piece of page content has also loaded (including all the images on the page). On a large page with lots of images, this can be problematic for the user. It might be an idea to update your HeadManager code with a new “RegisterStartupScript” method, that uses the logic above (although it is not strictly a Head method). Alternatively, you could stick with your solution – your software, so your call! I would be interested in submitting a patch for the initial JavaScript problem I posted about. I would be happy to include any of the above in that patch. Let me know if this would be useful.

# simoneb said on 03 July, 2007 10:49 AM

James, I tried to avoid using the state bag because it's error prone since you'll never know if someone, somehow, will be going to use your same key for the hashtable and could lead to a maintenance nightmare.

However, are you sure this is working with the Ajax test page in the test website? When an asynch postback is executed the script needs to be registered again, or the lightbox won't work, so the ScriptManager's RegisterStartupScript needs to be called; I didn't try but I think that adding a control to the control collection isn't going to work, but I may be wrong.

# James said on 04 July, 2007 02:00 PM

Hi Simone. you are correct - an ajax request does indeed break it - I guess i'll get a latest version and stick with your solution! Thanks again for your help and quick response. James

# simoneb said on 04 July, 2007 02:45 PM

A possible workaround sticked into my mind... what if instead of registering the initLightbox function as is it is registered with a timeout of a few milliseconds? Maybe it could be going to work... it depends much on the reason why IE7 doesn't like it to be called when the page is being rendered... I'll try.

# simoneb said on 04 July, 2007 03:08 PM

James, looks like the trick with the window.setTimeout is working. Let me know if it's working for you too.

# James said on 05 July, 2007 03:33 PM

Bingo! That has done the trick :)

# James said on 09 August, 2007 06:24 PM

The lightbox is occasionally causing a a brief flash of the overlay when a page loads (especially when a page is refreshed). From some brief testing, it appears that this can be avoided by adding "visibility:hidden;" to the "#overlay" style, in the lightbox.css stylesheet. Any change the source can be updated with this? Thanks James

# simoneb said on 09 August, 2007 06:46 PM

Hi James, can you please submit a patch?

# James said on 10 August, 2007 12:35 PM

No problem - I have made a patch with SVN. How should i get this to you?

# simoneb said on 10 August, 2007 12:49 PM

Thanks James, now you need just create a bug report on sourceforge (https://sourceforge.net/projects/busybox/) and attach the patch to it.

# Audra said on 25 August, 2007 05:54 AM

I've got some images being output as thumbnails in a datalist in .net which is inside an updatepanel. LiteBox looked amazing so I tried to integrate that into it but I'm having a few problems. It seems to work ok in FireFox but in IE7 it's causing problems. Firstly, in both browsers, if I use a group, it says there are 22 items when there should be 44. Likewise when there are 4 thumbs on the page, it says there are 2 inside LiteBox. Secondly, in IE, it works fine when I first go to the page. As soon as I do an update of the updatepanel and then click again on the image, I get the right dimensions of the image appearing on top of an overlay which is 500px high (doesn't stretch down to bottom of page like normal) Also, the Close button appears properly but the image itself is missing. I just get the white image container where the image is meant to be. Any ideas what I need to do? I think I may have to remove it from my project as I'm spending too much time on it. Thanks

# Audra said on 25 August, 2007 06:03 AM

OK, figured out the weird numbering but still got the problem with the IE7 rendering of the LiteBox once an updatepanel has been updated. Anyone please?

# simoneb said on 25 August, 2007 11:27 AM