Written by:
8/26/2009 

As I mentioned in a previous blog entry, I am speaking at the Jacksonville Code Camp this weekend.  My topic is “Using jQuery in DotNetNuke Development”.  In outlining and planning my presentation, I quickly realized that a real-world example will be necessary in order to effectively express my points to attendees.  So, I began to think… What kind of module could I write that would allow me to demonstrate integrating jQuery in several ways?

I immediately determined that I wanted to use a jQuery plugin of some kind.  I began browsing through the most popular jQuery plugins for ideas.  Eventually, a light bulb went off in my head while browsing.  I might have been on page 3 or 4 when it did.  Why not use a Lightbox plugin?  Lightbox is highly popular on many websites of varying technologies, in displaying images to visitors.  Bingo!

I quickly began searching for a jQuery plugin that uses lightbox.  I used the first one I happened to come across that had a good rating.  It happened to be the jQuery Lightbox Plugin (Balupton Edition).  Wasting no time, I began integrating it into a simple, and easy to use DotNetNuke® module.  The WillStrohl.LightboxGallery Module was born!

Lightbox Gallery Module for DotNetNuke®

Like I mentioned earlier, this module was created for the sole purpose of demonstrating some of the ways that jQuery can be integrated into DotNetNuke®.  I made sure to show jQuery used during the page load, generated client-side, and a few ways that it can help with design issues.  I also used jQuery to help manage a DNN edit feature!

You can find the Lightbox Gallery module on CodePlex for free.  That’s right.  This is another open source module.

Minimum System Requirements

The Lightbox Gallery module was built on DNN version 5.01.00.  So, only 5.01.00 and above are supported.  Your DNN site should also be running SQL Server 2000 or above.

Features

The Lightbox Gallery module has several features in its first iteration.  Some of these features include:

• Have one or more albums per module instance
• Have multiple (separate) module instances per portal
• Albums can be added, updated, and deleted
• Easy navigation of images in each album
• CSS changeable
• Semantic markup
• 100% localized
• Thumbnails are automatically generated for you

Creating Albums

It is incredibly easy to add a new album.  Just login using an account that has edit permissions to the module.  Once you do, use the actions menu to “Add Album”.

Fill in the form, and click the Update link at the bottom of the page.  Album Name, Description, and Folder are required.

Right now, there is no intuitive way to upload images, or specify the folder to look for images.  It is suggested that you create a folder using the File Manager module in the Admin Menu, and upload all of your images to it.  So, if you create a folder named Gallery, then put “Gallery” into the Album Folder field.  If you have a subfolder called Christmas, then put “Gallery/Christmas” into the Album Folder field.

All fields make use of the Help Text, so their purpose should be self-explanatory.

Viewing Albums

Viewing the images in an album is perhaps the easiest to use feature in this module.  Simply click on an image that you want to view, and the image pops up.  You can click on the right or left side of the image to navigate to previous or new images.

Editing Albums

While you are logged in with an account that has edit permissions to the module, click on the pencil icons to edit an album.  This will bring you to the previous form, where you can change your album settings.

Delete Albums

To delete an album, click on the aforementioned pencil icon, and then scroll to the bottom of the page and click on the Delete link.

Conclusion

I hope this is a good enough introduction to this module for you.  I know there are plenty of features that this module could have, but like I said, this module was built mostly for proof of concept.  I will add features as time allows.  Enjoy!

Trackback Print

Tags:

Categories: DotNetNuke

Location: Blogs The Mighty Blog

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Add Comment   Cancel