12/06/2007

Integrating the Lightbox JS 2.03.3 image overlay script with DNN

According to its creators, "Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."

And it really does what they say. So, why not use it with DNN? The fact that it can also work with groups of pictures providing basic back/forward navigation functionality makes it ideal as a lightweight picture gallery. Of course, it can be used with single pictures too, eliminating popup windows in order to see a picture, complete with (optional) caption, at a larger size.

In order to get Lightbox to work, you first need to go get if from http://www.huddletogether.com/projects/lightbox2/ . There you can also see examples and the way you can integrate Lightbox in an HTML page. So we'll only concentrate on things needed to be done in DNN here.

Our aim is to integrate Lightbox with a specific skin, not with the whole DNN installation. This way we'll have more flexibility regarding access to hosted DNN installations which may only allow access to the "Portals" folder.

So here are our steps:

1. Under the skin folder you wish to use for your DNN portal, create a folder called "Lightbox" and drop the contents of the .zip file you downloaded there. Three directories will be created: js, images and css.

2. Delete the html file as it only serves as an example.

3. Append the contents of the lightbox.css file that you'll find in the css folder into your skin.css file. You can keep the lightbox.css file, but you'll only make things more complex :)

4. Delete the lightbox/css folder if you like, as it is no longer needed.

5. In the ASCX file you will be using for your skin, put the following code immediately after the "@Register" tags as follows:




<script src="
<%=skinpath%>lightbox/js/prototype.js" type="text/javascript"></script>
<script src="
<%=skinpath%>lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="
<%=skinpath%>lightbox/js/lightbox.js" type="text/javascript"></script>

Update: For LightBox v2.04, the second line must be:
<script src="<%=skinpath%>lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>

SKINPATH is a DNN token and will be replaced at runtime with your current skin's path.

6. Immediately after the above piece of code, insert the following code:



<script type="text/javascript">
var fileLoadingImage = "
<%=skinpath%>lightbox/images/loading.gif";
var fileBottomNavCloseImage = "
<%=skinpath%>lightbox/images/closelabel.gif";
</script>


Why do we need this? The javascript file declares these two variables supposing they will be inside a folder relative to the physical position of the script, but that's not how DNN works, since our current path is NOT the skin's path, but the root path of the DNN installation! So we must override the paths here in order to be transparent to the image paths (using the skin path). We also have the additional ability to change the images used for the "close image" function here.

7. Open your skin.css file, locate the part you have copied from lightbox.css and locate the #prevLink, #nextLink classes. Change the paths to the three images for blank background, previous and next picture mentioned there as follows:

../images/blank.gif to lightbox/images/blank.gif
../images/prevlabel.gif to lightbox/images/prevlabel.gif
../images/nextlabel.gif to lightbox/images/nextlabel.gif

These images are unfortunately defined by the stylesheet, so since we moved the contents to skin.css we must make the positions of the images relative to the position of our current skin file. I will say again that you could always include the original lightbox.css but the current way is just my suggestion.

Of course you can use any image you like for next, previous and close functions as long as you maintain correct paths.

8. Try entering some image links into a text/html module as described in the original instructions for Lightbox and see what happens. Note: You can't use the aspx page link provided by the file manager when using lightbox. You must provide the links exactly as described in their (simple) instructions.


Finally, if the required JS files seem too big (approx. 103K total size) you could always use a JScript compressor like http://javascriptcompressor.com/ to reduce the total file size.

Please send comments if something in the instructions is not correct, so as to have it immediately corrected.

Happy Lightboxing! :)

kick it on DotNetKicks.com

28 comments:

mozza,  January 7, 2008 at 6:09 AM  

I tried all the above and used the link image #1

But when I click on the link the page does not go dark and instead my page triples in length and the image appears (after a load of white space) at the bottom of this new 'space'.
I can click on the close button and the 'new' part of my page disappears.

Any idea? I tried version 2.02 and 2.03 of Lightbox and am using DNN 4.5.5

Gyromyristis January 28, 2008 at 11:13 AM  

I've been using it with DNN 4.7.x and I didn't encounter any problems. Do you use any other AJAX-based modules at the specific page you're tesing Lightbox on? Long shot, but there might be a conflict there.

Anonymous,  January 31, 2008 at 1:40 PM  

The same thing happens with version 4.4.1. And there isn't any other Ajax on the page.

Anonymous,  February 27, 2008 at 1:43 PM  

I have used a different way to add the lightbox effect to my DNN 4.7 installation. (or skin)

I have also made some changes to the core links module, so that it will also work with the lightbox effect.

http://www.bommer.nl/site/Lytebox/tabid/74/language/en-US/Default.aspx

See for your self and try it out.

Mischa

Gyromyristis March 13, 2008 at 7:40 PM  

@mozza:
In response to your previous comments, I just tried it (v2.04 - I've updated the post - needs a change in the script code) with DNN 4.8.1 and it worked fine.

I don't know what might be wrong with your own DNN installation. Could you provide more information? Have you tested it on an out-of-the-box DNN installation?

Anonymous,  March 18, 2008 at 9:52 AM  

hello,
I'm using it in an AJAX-based module. It works on the first click, but after an ajax-postback it doesn't work.

Should I register js files somewhere?

Thanks

Luca
Italy

Gyromyristis March 18, 2008 at 1:04 PM  

Hi Luca,

unfortunately I haven't tested it with AJAX-enabled modules. I've only tried it in a clean out-of-the-box DNN installation and saw it worked fine.

Best guess would be that some javascript in the AJAX module probably conflicts with Lightbox's javascript. Do you get any specific javascript errors when it's not working?

Anonymous,  April 29, 2008 at 6:02 PM  

it works great with dnn 4.8, but it only works if i put the scripts on the end of my ascx file.
I also put the part to overwrite the variables for the loading and close gif files to the end of the ascx file, but i can´t see the fileloadingimage and the closelabel in the lightbox.
I tried also some paths in the lightbox.js file but i did not get it to show this images.
Please can you help!

Anonymous,  September 18, 2008 at 6:38 AM  

I had a sample problem.

In Lightbox 2.04, set "LightboxOptions.fileLoadingImage" and "LightboxOptions.fileBottomNavCloseImage" instead.

Thank you.

Anonymous,  November 26, 2008 at 7:42 AM  

Most LightBoxes won't work right after a postback (typically found when using ajax, including asp.net's UpdatePanel).

The reason is because most lightboxes work by grabbing the element's special attribute (ie- [a href= rel=mylightbox(params) ...]) and do it's magic when the page is initially loaded. Ajax results in a partial page load, so DOM gets out of whack and results in the lightbox link opening in the window, instead of on top in a lightbox. There are two ways I know of to work around this. Yuo can re-initialize the lightbox like this example for ThickBox:
function pageLoad(sender, args) {
if(args.get_isPartialLoad()){
// reapply the thick box stuff
tb_init('a.thickbox');
}
}

The other option is to use a 'onclick' method instead the 'rel=' attribute. For GreyBox this looks like:


[a href="http://google.com/" rel="gb_page_center[400, 250]""] Visit Google[/a]

instead of

]a href="http://google.com/" rel=GB_showCenter('Google', this.href)"]Visit Google[/a]


The syntax is different among the different lightboxes, but the idea is the same.

simonjarita December 18, 2008 at 12:34 AM  

i'm using DNN 4.9.0 and lightbox 2.04
i have only added the code and css to the skins file but not placed a lightbox anywhere. after uploading the skin to my webseite the site doesn't work any more at all :( internet explorer displays a message that it cannot display the webpage and goes to the home page. i cannot access the admin area anymore...
do you have any idea what the problem could be?
simon

Gyromyristis December 18, 2008 at 12:36 AM  

Simon,

have you tried removing the code you added in your skin's .ascx file and see if things return back to normal?

simonjarita December 20, 2008 at 11:45 PM  

Gyromiristis,

thank you for your reply. i managed to get the website to work again by removing the script tags.
i've tried to add the sript tags one by one to see which one causes the problem: as soon as i add the third script tag (the one that adds the lightbox.js file) i get the error.
have you successfully tested the lightbox 2.04 under dnn 4.9.0 ?

Gyromyristis December 21, 2008 at 1:03 AM  

No, I haven't tested it yet by hand. There is a module, though, called LightboxGallery, which uses LightBox and runs successfully under 4.9 (I've used it in one of the sites I've got under development). You could search Snowcovered for it.

Anonymous,  January 5, 2009 at 11:32 AM  

Hi,
Do you know how to change the border color of images in the Text/HTML by light box CSS? When an anchor holds an image, the border color looks ugly.

Gyromyristis January 5, 2009 at 12:54 PM  

I'm not sure I fully understand what you mean. Do you see borders around the images when they are displayed as thumbnails in an HTML page, or around them when they are displayed full-size by Lightbox?

Anonymous,  January 6, 2009 at 1:17 AM  

I see borders around the images when they are displayed as thumbnails in an HTML page. And I want to change the color.

Mike,  February 18, 2009 at 5:03 PM  

simonjarita,

Try putting the script code at the bottom of the aspx file (as suggested above) That solution worked for me.

Anonymous,  October 14, 2009 at 8:41 PM  

I have tried all the steps listed, but I cannot get the lightbox.js to use the correct path to the loading and closelabel gifs.

No matter what I set the var fileLoadingImage to it always shows as 'images/loading.gif'

Michael L November 3, 2009 at 9:34 PM  

I am having a problem with the loading and close gifs. They are not showing at all. Everything else works fine except those two. I have moved the script to the bottom, modified the dir, the links, everything but to no avail. Any hints? Using DNN 5.01 and Lightbox 2.04

Anonymous,  November 20, 2009 at 9:48 PM  

I can't get the loading.gif and closelabel.gif working. I tried using the script at the end of the page,...everything...but no luck. Any ideas?

TheJesper February 9, 2010 at 2:02 AM  

This javascript works fine for me on my page templates/skins:


if (LightboxOptions.fileLoadingImage != null)
LightboxOptions.fileLoadingImage = "<%=skinpath%>lightbox/images/loading.gif";
if (LightboxOptions.fileBottomNavCloseImage != null)
LightboxOptions.fileBottomNavCloseImage = "<%=skinpath%>lightbox/images/closelabel.gif";

/Jesper Wilfing

Andrew March 12, 2010 at 5:01 PM  

Can this be used for other pages or only images? I can open an image in the lightbox but not another page.

Gyromyristis March 12, 2010 at 5:21 PM  

@Andrew: No, lightbox is only for images. If you need to open pages with an overlay similar to Lightbox, you should try Thickbox: http://jquery.com/demo/thickbox/

Mithun,  July 28, 2010 at 12:47 PM  

I tried this with DNN 5.4.4.
All I could get to work is a white box with spinning loading image.
The actual image never loaded.

Has anyone experienced this problem?

Anonymous,  September 15, 2010 at 7:32 PM  

if (LightboxOptions.fileLoadingImage != null)
LightboxOptions.fileLoadingImage = "<%=skinpath%>lightbox/images/loading.gif";
if (LightboxOptions.fileBottomNavCloseImage != null)
LightboxOptions.fileBottomNavCloseImage = "<%=skinpath%>lightbox/images/closelabel.gif";


this code works

Anonymous,  September 15, 2010 at 7:32 PM  

if (LightboxOptions.fileLoadingImage != null)
LightboxOptions.fileLoadingImage = "<%=skinpath%>lightbox/images/loading.gif";
if (LightboxOptions.fileBottomNavCloseImage != null)
LightboxOptions.fileBottomNavCloseImage = "<%=skinpath%>lightbox/images/closelabel.gif";


this code works

html5 video player March 13, 2012 at 7:25 AM  

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
html5 player

Related Posts with Thumbnails

Recent Comments

Free DotNetNuke Stuff

Free DotNet Videos

  © Blogger template The Professional Template by Ourblogtemplates.com 2008

Back to TOP