During my recent vacation to Monaco, I made some blog posts with photos to share with friends and family. My brother had some trouble with the blog summary feature and it was not easy to see that clicking on the Blog Title would bring up the entire blog post and ... more pictures.
He suggested that I just post the pictures to flcker, but that is to easy! As I have been reading a JQuery book, it was a good time to see what could be done to create a slide show or just share some pictures with some custom development.
I saw a number of add ins built using JQeury, so I figured that was a good place to start, going slow and integrate someone else's work. There was a really nice photo display module called Galleria. It shows thumb nails that are click-able to show the full image in another section on the screen. The thumb nails are generated on the fly. I had a DNN version working but the thumb nail placement was not working in FF, it was okay in IE 7. I lost the battle with the CSS and generated html. So much for JQuery handling the differences in browsers for you...It can handle the DOM abstraction, but can not save you from the CSS/HTML differences.
I settled on another route and an excellent plugin called cycle, from http://www.malsup.com/jquery/, there are some other plugins worth checking out. You have to check out the capabilities of these plugins, very nice!
You can see the demo of the DNNCycleSlideShow module on www.walkspoiled.com, highlighting the Monaco trip and last years visit to Hawaii.
The module looks for folders of pictures in the active Dotnetnuke Portal folder called DNNSlideShow. Then looking for a sub folder with the appropriate moduleID and sub-folders called photos_XYZ.
A button is placed on the screen for each folder with the label XYZ. This way multiple modules can be deployed with their own sets of photos, and each module can have multiple sets of photos that can be selected to see them in a slide show. That is my brother on the left and Dad on the right.
The trick to getting JQuery to work with DNN for me was to:
- Load the scripts in the the pre render event (thanks to the dotnetnuke forums for that one)
- The scripts were the JQuery library, the Cycle Plugin, and the small amount of javascript that I needed to write to wire up my div id's with the cycle functionality.
- I put the JQuery no conflict call in when I had more JQuery in an earlier example. I could have just used the JQuery function name instead using $j
Let me know if you are interested in the module. I still need to add an upload facility, as I went with FTP or the DNN file manager for now.
