Creating Lightbox Effects Inside DNN and News Articles 

After my recent change to the new skin design on this site I decided that I need to work on a method to incorporate display for larger images, that under normal situations would break the layout of this site. Most recently I have made a few simple portal configuration changes that allowed me to incorporate a lightbox script, so now I can easily get large images to display like this! In this entry I walk you through the process to obtain the files, load them into DNN, and then to configure Ventrian's News Articles to allow its use.

Obtaining the Script

As I mentioned there are many scripts out there that provide this type of functionality, however, I was directed towards this implementation because it works so well for all browsers. From this site they provide helpful information regarding exactly what you need to do to implement the solution.

Using this in DotNetNuke requires a few modifications from the default so for the time being, simply download each of the files listed on the site and save them to your machine locally. You do NOT need the .css file that is included there.

Preparing the Files for DNN

By default the .js file included in the lightbox script references a loading image and a close image. These files by default have a relative location, I have modified this script for my sites to reflect the FULL URL to the files as they are stored on my site, uploaded from file manager. I reccomend that you change the declarations to mimic the following, replacing mysite.com with your site address and <portalId> with your portal id. We will upload the files to this location a bit later in the process.

var loadingImage = 'http://www.mysite.com/portals/<portalId>/LightBox/loading.gif';	
var closeButton = 'http://www.mysite.com/portals/<portalId>/LightBox/close.gif';

This step completes the changes needed to the default scripts. As I mentioned CSS will be handled in a later step manually.

Upload Files to DNN

In an effort to group files in a logical manner I highly recommend uploading these files to the portal root of your site in their own sub folder. So the first step of the process is to login to your site with Admin permissions and navigate to the File Manager. Create a new folder called LightBox.

Once you have this folder created you will want to upload the following files that were downloaded previously; lightbox.js, overlay.png, loading.gif, close.gif. Be sure that you upload your modified lightbox.js script and not the default one included in the download. Once these files have been uploaded you have now completed the process to install the default files. Next we will take care of the needed CSS elements.

Setting Up the CSS

By default a few CSS classes are presented that include paths to images as well. Again to keep things working nicely with DNN we want to modify this process to ensure that we have correct file paths at all times. Additionally rather than adding yet ANOTHER CSS file to our portal, lets add it to the "Portal" stylesheet that is already included in DotNetNuke.

When logged in as an admin to your site select "Site Settings" from the admin Menu. If you scroll to the bottom you will find the stylesheet editor. Paste the following code into the editor, again replacing mysite.com and <portalId> with the values from your site. These CSS classes are the ones used to style the implementation.

#overlay
{ 
background-image: 
 url(http://www.mysite.com.com/portals/<portalId>/LightBox/overlay.png); 
}

* html #overlay{
background-color: #000;
background-color: transparent;
background-image:
 url(http://www.mysite.com.com/portals/<portalId>/LightBox/blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="http://www.mysite.com.com/portals/<portalId>/LightBox/overlay.png", sizingMethod="scale");
}

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}


#lightboxDetails
{
font-size: 0.8em;
padding-top: 0.4em;
}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; } 
#overlay img{ border: none; }

These stylesheets were provided by the author of the LightBox script, I have simply listed them here to ensure that readers of this article can fully understand the configuration changes needed. Once these elements have been entered to the Stylesheet editor, click "Save Style Sheet", to commit the changes.

Implementing in Ventrian News Articles

Now that we have loaded all of the needed files we need to simply implement the script in a manner that can make it available for ALL blog entries. To do this we will complete a one-time setup process, then we can simply use the script in the future.

One Time Setup

We need to add a bit of code to the header of the News Article module what includes the reference to the Javascript for the lightbox. We accomplish this by selecting "Settings" from the action menu for the News Articles instance. Once the settings have displayed expand the "Advanced Settings" section and add the following script to the "Header" textbox, be sure to change the values to represent your site url.

<script type="text/javascript" 
 src="http://www.mysite.com/portals/<portalId>/LightBox/lightbox.js">
</script>

This will ensure that we have the proper elements loaded at all times.

Using it!

After all of this work we can now get to the fun part! Actually using it, to implement the lightbox solution you simply include a standard link to an image, and add "rel=lightbox" to the url. For example at the top of this article where I have the link "Like This!" that opens to my logo in a lightbox display it was accomplished with the following code.

<a rel="lightbox"
   href="http://www.mitchelsellers.com/portals/1/logo-mitchel.png">
like this!
</a>

Summary

With a little bit of setup, and a little bit of education on the side of site administrators it is possible to quickly add lightbox image effects to a DotNetNuke site with specific desires to implement it in the News Articles module for blog/other content. As always, feel free to post comments below or if you are having difficulties implementing this on your site you may post to the forums!

Share/Save This Article:      

Comments