Building the method of handling any number of image viewer javascripts available on the net went smoother than i had originally thought...almost too smooth.
The creation of the JS plugin definitions and implementation was much quicker than I had originally anticipated...
The creation of a plugin for the gallery involves two steps. Writing an XML plugin definition file, and placing the definition in the "plugins" folder along with all the files required by the javascript being used.
The Folder Structure
The folder structure for plugins currently resides in the Gallery module's folder within DNN's "DesktopModules", and looks like this
DesktopModules
...JMGallery
......Plugins
.........[NamedPluginFolder]
A future release of the Gallery will allow for users to add their own plugins to their portal without affecting the rest of the DNN instance. These portal specific plugins will be stored in a folder in the portals root directory.
The plugin definition xml files will be stored in the Plugins folder, with all files relating to the plugin being placed in their own subfolder. for example, the path for the current lightbox plugin would be
/DesktopModules/JMGallery/Plugins/lightbox.xml
/DesktopModules/JMGallery/Plugins/Lightbox2/*
The Plugin XML
The plugin XML file will define all the script files and stylesheets that will be included when the page is rendered as well as define the image and hyperlink tags used to display the image thumbnail and the full size image. The following is a sample xml file that follows the lightbox example used above.
<?xml version="1.0" encoding="utf-8" ?>
<JSPlugin>
<Name>Lightbox 2</Name>
<Folder>Lightbox2</Folder>
<ScriptFiles>
<ScriptFile>js/prototype.js</ScriptFile>
<ScriptFile>js/scriptaculous.js?load=effects,builder</ScriptFile>
<ScriptFile>js/lightbox.js</ScriptFile>
</ScriptFiles>
<CSSFiles>
<CSSFile>css/lightbox.css</CSSFile>
</CSSFiles>
<ImageHtml>
<![CDATA[
<a href="[FullSizeImageUrl]" rel="lightbox[[AlbumTitle]]" title="[ImageCaption] - Click to enlarge" >
<img src="[ThumbnailUrl]" border="0" />
</a>
]]>
</ImageHtml>
<InitScript />
</JSPlugin>
Name - the name of the plugin and is used to display the name of the plugin in the Image list module settings for plugin selection.
Folder - the name of the folder under the "Plugins" folder that contains all the files for the plugin
ScriptFiles - This section will contain the paths to each of the javascript files, relative to the value of the "Folder" node, that will be included in the page when the images are rendered. Each path will be contained in a child "ScriptFile" element.
CSSFiles - This section is similar to the ScriptFiles section, and is used to add the required stylesheets to the page when the image list is rendered
ImageHtml - This is the most important element in the XML file. This defines the HTML code used to render the image with the formatting required by the the javascript library being used. The html template entered here can make use of a few tags that are used by the image listing to display information about the image. These tags are:
[FullSizeUrl] - injects the url to the full size image into the template
[ThumbnailUrl] - injects the url to the thumbnail image into the template
[AlbumTitle] - Injects the name of the album being viewed
[ImageCaption] - Injects the caption added to the image from the album. If no caption is entered, a non breaking space is injected in its place.
InitScript - This is where you will enter any additional javascript code that would be required to either initialize or execute your image viewer code.
For most image gallery javascripts out there, the above should be all thats needed. However, some may require you to edit the javascript code to get everything to work 100%. This was the case with the lightbox script. I needed to edit the lightbox.js file and change the following 2 lines
fileLoadingImage: '/images/loading.gif',
fileBottomNavCloseImage: '/images/closelabel.gif',
to
fileLoadingImage: '/DesktopModules/JMGallery/Plugins/Lightbox2/images/loading.gif',
fileBottomNavCloseImage: '/DesktopModules/JMGallery/Plugins/Lightbox2/images/closelabel.gif',
once this was done, lightbox worked perfectly.
A copy of this module that i have been using for testing can be found here: http://dnn5sb.jmdevsolutions.com/Home.aspx This test demonstrates the module utilizing both highslide and lightbox javascripts.