DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
Mar
7
Written by:
3/7/2010
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.
Aspect Ratio Thumbnails
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.
Extra Span Wrapper
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
New Lightbox Provider
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).
Documentation
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.
20 comment(s) so far...
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
Thanks a lot for this module.
I have very strange issue and I am not sure if that is dotnetnuke framework issue or issue with IIS.
Your module is located in '\DesktopModules\WillStrohl.LightboxGallery'. Your module's all java-scripts and all css files can not be accessed by browser when loading a page with gallery module. I get Access forbidden status (403.1) on the Fiddler.
I found just single solution renaming modules folder from 'WillStrohl.LightboxGallery' to 'WillStrohl_LightboxGallery' and changing all references in DB.
Maybe you have experienced such kind of issue and can share with me a solution?
BTW one image is missing, that little cross on the right hand side corner. Missing file in module install package.
Many thanks for your work.
Regards,
Jonas
By Jonas Sarunas on
5/26/2010
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
I haven't heard or experienced anything like this. Sorry. And I personally know several people who are using this module across several sites. There must be something different with your DNN install or IIS configuration that is causing that issue.
Can you report the missing file image to the website? http://wnslightbox.codeplex.com/
By Will on
5/26/2010
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
Hi Will,
First of all thanks for this great free module. Congrats from being part of the dream team of DotNetNuke.
I´m using the module on my intranet but I would like to know if there is a way to change the order of showing the album. I want to show first the last album I create. Could It be posible? Maybe changing something on the table?
Thanks for any hint you can share
Regards,
Jose
By Jose Sanguino on
6/22/2010
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
Thanks, Jose. Right now, the module doesn't have any built-in sorting. However, it's on the current road map. Unfortunately, I will not be able to work on the module until later next month. I am sorry.
By Will on
6/22/2010
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
Hi Will,
I've used lytebox and some other popup jquery apps but had to manually enter them in an HTML module. The one thing missing from your great DNN Module is the ability to add an xml file which would allow a text description of each picture to be displayed below it's respective picture. Any plans on adding that?
Thanks,
Jon
By Jon on
8/8/2010
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
There are a lot of plans similar to that for new features.
By Will on
8/8/2010
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
Hi, I have implemented the Lighbox Gallery in one of my projects. May I know how do I change the thumbnails' overlay color in the settings because I can't seem to find one such setting? Thank you.
By Chris on
9/27/2010
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
@Chris: It's not a setting. You can do it with CSS. I'd suggest doing that in the Portal.css that you can edit from the Site Settings. For example, you might use the following selector:
.wns_lightbox li.listitem { background-color:#000000; }
This would make the thumbnail background black.
By Will on
9/27/2010
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
Loved the gallery would love to have a caption under each photo. Is the source code available?
By Tim on
10/24/2010
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
Yes. Use any of the links above to get to the module source. If you make any enhancement to the module, please feel free to give back to the project if you'd like.
By Will on
10/24/2010
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
Thank you, very nice module. Just what I was looking for -- upload a bunch of pictures and type a folder name.
By Mikhail on
11/6/2010
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
Hi, thanks for this great free module. I have a question for you, how can i change the size of the autogenerated thumbnails? is there any way to do it by modifying the code in one of the JS files, if yes please tell me what and how.
Thanks again, greatings
By Andi Haviari on
5/31/2011
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
Hi,
Thank you so much for this a great Image Gallery Module.
It is working like a charm.
Thanks
By Sohail Mahboob on
6/27/2011
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
@Sohail: I am pleased that you like it. :)
By Will on
6/28/2011
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
Hi, The module is exactly what I was looking for and works well. Thanks very much. Like your poster above I have been trying unsuccessfully to change the thumbnail size. Is it possible to do so? If so can you point me in the right direction please? The thumbnails resize to maximum of 100px on height or width but I have not been able to find any way of influencing this size.
By Mike on
7/4/2011
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
The thumbnail size is not currently something you can change as an end-user. This will perhaps be editable in a future release.
By Will on
7/4/2011
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
Firstly, thanx for the module. Secondly, I added the module on my testing site and I am getting '>>>>>>' above the last image in the gallery. Any idea why this would be happening. Great module btw
By Byron Daries on
7/13/2011
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
@Byron: Unfortunately, this is the first report I've heard of this happening, and I haven't ever seen this happen during testing either. If you can come up with some more troubleshooting information, it would be better to discuss this on the Lightbox Gallery support area.
By Will on
7/13/2011
|
great module! one issue
Thanks for the great module. I have one problem though.
The close button does not show up. The left and right buttons are there just not the close button, so the only way that I can close it is to refresh the page.
I am not seeing any errors and all of the settings are there and checked. Any help would be greatly appreciated.
By Glenn Freeman on
11/6/2011
|
Re: DotNetNuke Lightbox Gallery Module Version 01.02.00 Released
@Glenn: There are many ways and reasons that the close button might not appear. The two primary reasons are that there's a setting that removes it, and a non-XHTML compliant skin will prevent it from rendering.
That being said, the blog comments is not the best place to try and get support. I would suggest posting issues on the project website for discussion.
By Will on
11/6/2011
|