It was less than a year ago that I created the Lightbox Gallery Module, as a proof of concept for using jQuery in a DotNetNuke® module. It has been quite popular considering I only ever expected those who attended my code camp sessions to enjoy it. Since its first release, it has had over 1600 downloads! I am sure that less than 50 people have physically attended those sessions, so that number is staggering for me. That being said, I am pleased to announce that I have another release ready for you to use and abuse.
If you don’t already know, Lightbox is the highly interactive method of displaying pictures on a website. The thing that separates Lightbox out from the uncountable others is that its fast, user-friendly, interactive, very stable, and the average website visitor has fun using it. This method of displaying pictures has been around since long before jQuery came into our hearts. When jQuery came along, it just made it that much easier and more fun for us to implement as designers and programmers.
The latest release of the Lightbox Gallery Module has two significant updates along with several bug fixes. First, the algorithm used to generate your thumbnails for you has been updated to maintain the aspect ratio of the original image. Long gone are the days where your thumbnails look stretched in one way or another. Don’t rush off to upgrade just yet. You will need to force the module to regenerate your thumbnail images. I didn’t make this a feature. This is something you’ll have to do manually.
Go into the folder that have your images in it, and find all of the images that have –thumb appended to the filename. For example, if you have a file named "My_Vacation_001.jpg”, the thumbnail would be “My_Vacation_001-thumb.jpg”. Delete all of the thumbnails. Be very careful to not accidentally delete any of your actual images.
The original markup left little room for CSS designers to alter how the thumbnails were rendered. One fix to this was to add another SPAN tag to the markup to give CSS designers more to chew on.
jQuery and CSS people alike will enjoy that I also included more ID’s and class names to assist with manipulation of the rendering.s
The lightbox jQuery plugin that I originally used was the Balupton Edition. I chose this one for two reasons: (1) I was running out of time to complete my demo; (2) It was the first plugin that came up in my initial web search. I have been able to check out several other plugins since. I keep coming back to one in particular. It doesn’t tout itself as a lightbox plugin, but rather a lightbox alternative. I have opted to replace the original plugin with the Fancybox plugin.
Why? Simple. The first one included (removable) text about whose plugin it was. I never like any software that does that. It was also broken. The arrow navigation didn’t work without some extra effort. When I use any plugin for any type of system, I expect it just to work. I don’t want to have to make it work. Fancybox just works! And it works INCREDIBLY well!
This plugin comes with many options, most of which I have exposed in the album settings. I left it open to allow these settings to be per album, and not per module instance so that it maintains the most flexibility. Among these options are the type of animation, the animation speed, position of title, and more. Also, the right and left arrows on your keyboard now work, along with the escape key (unless you disable it in the settings).
I hadn’t really thought about writing any documentation for the Lightbox Gallery Module before, but I did manage to get some drawn up. There are now instructions for the basic steps of adding albums, editing albums, deleting albums, and even a few frequently asked questions. For example, there are two items that have come up through the usage of this module. I have been getting asked why a folder name doesn’t appear in the autocomplete, and also how to regenerate the thumbnails that the module automatically create for you.
There is much to talk about, but I will leave the rest for you to check out and try it for yourself. The only thing that I ask is that you review it. Please submit a review and rating on CodePlex, and on DotNetNuke® Forge (on page 2 right now). Also, you can see this module in action here on this site. Just go to my Photos section.