This module supports any image formats such as JPG, PNG, GIF, but also SWF files as well as FLV/H.264 video and YouTube video. You can use this module to create a single gallery, or a gallery with multiple categories. You can mix images, SWF, custom videos and youtube videos in a single category.
1) General colour settings
2) The video player
3) The gallery set-up
At the top of the xml file in the settings, you will find the following general colour settings:
thumbBgColor = "1b1b1b" //The color for the horizontal thumbnails background
thumbBgAlpha = "0.5" //The alpha for the horizontal thumbnails background
mainBgColor = "1b1b1b" //The color for the main content background
mainBgAlpha = "0.5" //The alpha for the main content background
categoryDimBgColor = "1b1b1b" //The color for the background covering the module when the categories are visible
categoryDimBgAlpha = "0.8" //The alpha for the background covering the module when the categories are visible
categoryTxtBgColor = "1b1b1b" //The color for the category name background
categoryTxtBgAlpha = "0.7" //The alpha for the category name background
categoryTxtColor = "FFFFFF" //The color for the category name text
preloaderColor = "CCFF00" //The color of the main content preloader
preloaderAlpha = "0.3" //The alpha of the main content preloader
controlsIconColor = "FFFFFF" //The icon color for the main content controls
controlsIconAlpha = "1" //The icon alpha for the main content controls
controlsBgColor = "1B1B1B" //The color for the controls background
controlsBgOverColor = "CCFF00" //the color for the controls background when over
controlsBgAlpha = ".5" //the alpha for the controls background when over
scrollBtnOverColor = "CCFF00" //Color for the scroll button when mouse over
scrollBtnOverAlpha = ".5" //transparency for the scroll button when mouse over
scrollBtnColor = "FFFFFF" //Color for the scroll button in normal state
scrollBtnAlpha = ".5" //transparency for the scroll button in normal state
scrollBarColor = "FFFFFF" //Color for the scroll bar
scrollBarAlpha = ".5" //transparency for the scroll bar
a - The video controls (Note: Vimeo videos will use their own controls)
You can adjust the colors for the video controls as follows:
videoControlsLoadBarColor = "CCFF00" //The color for the bar used to display the current amount of video that is downloaded.
videoControlsLoadBarAlpha = ".2" //The transparency for the bar used to display the current amount of video that is downloaded from 0 to 1
videoControlsProgressBarColor = "CCFF00" //The color for the bar used to display the current amount of video played so far.
videoControlsProgressBarAlpha = ".8" //The transparency for the bar used to display the current amount of video played so far.
volumeSlideBarColor = "CCFF00" //The color of the slide bar for the volume controls
volumeSlideBarAlpha = ".2" //The transparency of the slide bar for the volume controls
volumeTooltipColor = "CCFF00" //The color of the tooltip for the volume controls
volumeTooltipAlpha = ".5" //The transparency of the tooltip for the volume controls
b - Video formats
The video player supports FLV format, as well as all H.264 encoded video formats such as MP4 and MOV. It also supports YouTube videos and Vimeo videos, simply update the following parameter with the path to your video:
videoPath= "videos/pieces.flv"
For YouTube or Vimeo videos, use the video ID instead as follows:
videoPath= "Rs_wKkXCwDw"
c - Video settings
You can find various settings for the video at the top of the xml file as follows:
videoBufferTime = "5" //Video buffer time in seconds
videoVolume=".5"//Default video volume
youTubeVideoAspectRatio = "5:3" //The video ratio for the youtube video
youTubeVideoAspectQuality = "hd720" //The quality level for the youtube video, including: "small", "medium", "large", "hd720", "hd1080", "highres" and "default"
- Single category
Let's take the example of the mixed gallery, open the mixedGallery.xml. The mixedGallery shows you how to have a gallery with only one category, the category is defined by the <category> tags as follows:
<category title="" catThumbnail="" smallThumbnailsWidth = "" smallThumbnailsHeight = "200">
category content
</category>
- Multiple categories
If you decide to have multiple categories, you will need to set the category name as well as the path to the category thumbnail (200x100), as follows:
<category title="FASHION" catThumbnail="images/mediaGallery/catThumbnails/1.jpg" smallThumbnailsWidth = "" smallThumbnailsHeight = "200">
You can have as many categories as you want, simply delete or duplicate the whole <category> node.
Within each category, each item is defined by the <item> tags as follows:
<item>
<thumbnail width="313">images/mediaGallery/thumbnails/1.jpg</thumbnail> //The path to the thumbnail
<large type="image">images/mediaGallery/1.jpg</large> //The path to the main content
<text><![CDATA[<font size="24" face="GeosansLight">CLUB HOUSE</font><br><br>Photographer:<br><A href="http://flashden.net/user/LGLab">John Doe</a><br><br>This is the main news area for each news. This text is <b>HTML formated</b> and imported dynamically from XML. <br>You can easlily insert <A href="http://flashden.net/user/LGLab">links</a>, <A href="mailto:yourEmail@mail.com">email links</a> styled using CSS, images etc... <br><br>This is a short description. The scroll bar will appear automaticaly if needed.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero vel tortor. Nam nisi dolor, faucibus non, ultricies sit amet, tempor non, nibh. Morbi ullamcorper ante sit amet nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec pellentesque dui a elit. Donec sollicitudin. Donec eu nisl sit amet lectus gravida luctus. In pretium leo vitae ipsum. Ut euismod erat sit amet leo. Mauris at libero. Integer scelerisque imperdiet risus.]]></text> //The text content for the item if any
</item>
You can have as many or few items as you like, simply delete or duplicate the whole <item> node as highlighted above including the <item> tags.
You can have thumbnails of any height, however all thumbnails within the same category must have the same height. You can have different heights in different categories though. You must set the height of the thumbnail that you are going to use in the category parameters as follow:
<category title="FASHION" catThumbnail="images/mediaGallery/catThumbnails/1.jpg" smallThumbnailsWidth = "" smallThumbnailsHeight = "200">
You can have any thumbnail width even within the same category, to do this you will need to set the width of the thumbnail you are going to use individually for each item as follows:
<item>
<thumbnail width="313">images/mediaGallery/thumbnails/1.jpg</thumbnail>
<large type="image">images/mediaGallery/1.jpg</large>
<text><![CDATA[<font size="24" face="GeosansLight">CLUB HOUSE</font><br><br>Photographer:<br><A href="http://flashden.net/user/LGLab">John Doe</a><br><br>This is the main news area for each news. This text is <b>HTML formated</b> and imported dynamically from XML. <br>You can easlily insert <A href="http://flashden.net/user/LGLab">links</a>, <A href="mailto:yourEmail@mail.com">email links</a> styled using CSS, images etc... <br><br>This is a short description. The scroll bar will appear automaticaly if needed.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero vel tortor. Nam nisi dolor, faucibus non, ultricies sit amet, tempor non, nibh. Morbi ullamcorper ante sit amet nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec pellentesque dui a elit. Donec sollicitudin. Donec eu nisl sit amet lectus gravida luctus. In pretium leo vitae ipsum. Ut euismod erat sit amet leo. Mauris at libero. Integer scelerisque imperdiet risus.]]></text>
</item>
However, if you choose to use the same width for all thumbnail within the same category, you can set that width a single time in the category parameters as follow:
<category title="FASHION" catThumbnail="images/mediaGallery/catThumbnails/1.jpg" smallThumbnailsWidth = "250" smallThumbnailsHeight = "200">
If you are going to have different width for each thumbnail, make sure you leave the above smallThumbnailsWidth parameter empty.
As stated at the beginning of this page, the media gallery supports any image formats such as JPG, PNG, GIF, but also SWF files as well as FLV/H.264 video and YouTube video. The main content for each item is defined by the <large> tags as follows:
<item>
<thumbnail width="313">images/mediaGallery/thumbnails/1.jpg</thumbnail>
<large type="image">images/mediaGallery/1.jpg</large>
<text><![CDATA[<font size="24" face="GeosansLight">CLUB HOUSE</font><br><br>Photographer:<br><A href="http://flashden.net/user/LGLab">John Doe</a><br><br>This is the main news area for each news. This text is <b>HTML formated</b> and imported dynamically from XML. <br>You can easlily insert <A href="http://flashden.net/user/LGLab">links</a>, <A href="mailto:yourEmail@mail.com">email links</a> styled using CSS, images etc... <br><br>This is a short description. The scroll bar will appear automaticaly if needed.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero vel tortor. Nam nisi dolor, faucibus non, ultricies sit amet, tempor non, nibh. Morbi ullamcorper ante sit amet nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec pellentesque dui a elit. Donec sollicitudin. Donec eu nisl sit amet lectus gravida luctus. In pretium leo vitae ipsum. Ut euismod erat sit amet leo. Mauris at libero. Integer scelerisque imperdiet risus.]]></text>
</item>
Update your content for each file format as follows:
- Image
<large type="image">images/mediaGallery/1.jpg</large>
- SWF
<large type="swf">images/mediaGallery/swf.swf</large>
- Video FLV/H.264
<large type="video" videoHeight="350">videos/abyss.flv</large> //BE CAREFULL WITH VIDEOS TO SET YOUR DESIRED VIDEO HEIGHT
- YouTube videos
<large type="youtube" videoHeight="400">0UjsXo9l6I8</large>
- Vimeo videos
<large type="vimeo" videoHeight="400" vimeoWidth="575">5035238</large> //BE CAREFULL WITH VIMEO VIDEOS TO ALSO SET THE "vimeoWidth" PARAMETER.
To add a fullscreen view option for your images, simply add 2 image paths separated by a comma with no space in the <large> nodes of your gallery xml files like so:
<item>
<thumbnail width="313">images/mediaGallery/thumbnails/1.jpg</thumbnail> //The path to the thumbnail
<large type="image">images/mediaGallery/1.jpg,images/mediaGallery/1_large.jpg</large> //The path to the main content
<text><![CDATA[<font size="24" face="GeosansLight">CLUB HOUSE</font><br><br>Photographer:<br><A href="http://flashden.net/user/LGLab">John Doe</a><br><br>This is the main news area for each news. This text is <b>HTML formated</b> and imported dynamically from XML. <br>You can easlily insert <A href="http://flashden.net/user/LGLab">links</a>, <A href="mailto:yourEmail@mail.com">email links</a> styled using CSS, images etc... <br><br>This is a short description. The scroll bar will appear automaticaly if needed.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero vel tortor. Nam nisi dolor, faucibus non, ultricies sit amet, tempor non, nibh. Morbi ullamcorper ante sit amet nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec pellentesque dui a elit. Donec sollicitudin. Donec eu nisl sit amet lectus gravida luctus. In pretium leo vitae ipsum. Ut euismod erat sit amet leo. Mauris at libero. Integer scelerisque imperdiet risus.]]></text> //The text content for the item if any
</item>
The first image path highlighted in blue is the medium sized image showing in the gallery in normal size. The second image path highlighted in red is the path to the fullscreen image, make sure to separate the 2 paths by a comma and no spaces. Note that I used the same image for medium and large view, but they can be different of course.
This large image view is optional so if you don't want any just leave the one image path.
Each item has its own text info content defined by the <text> tags as follows:
<item>
<thumbnail width="296">images/mediaGallery/thumbnails/3.jpg</thumbnail>
<large type="swf">images/mediaGallery/swf.swf</large>
<text><![CDATA[<font size="24" face="GeosansLight">SWF FILE</font><br><br>Photographer:<br><A href="http://flashden.net/user/LGLab">John Doe</a><br><br>This is the main news area for each news. This text is <b>HTML formated</b> and imported dynamically from XML. <br><br>You can easlily insert <A href="http://flashden.net/user/LGLab">links</a>, <A href="mailto:yourEmail@mail.com">email links</a> styled using CSS, images etc... <br><br>This is a short description. The scroll bar will appear automaticaly if needed.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero vel tortor. Nam nisi dolor, faucibus non, ultricies sit amet, tempor non, nibh. Morbi ullamcorper ante sit amet nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec pellentesque dui a elit. Donec sollicitudin. Donec eu nisl sit amet lectus gravida luctus. In pretium leo vitae ipsum. Ut euismod erat sit amet leo. Mauris at libero. Integer scelerisque imperdiet risus.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero vel tortor. Nam nisi dolor, faucibus non, ultricies sit amet, tempor non, nibh.]]></text>
</item>
This text can be HTML formatted. You can however not have any text for a specific item, simply leave the <text> node empty as follows:
<item>
<thumbnail width="200">images/mediaGallery/thumbnails/jayz.jpg</thumbnail>
<large type="youtube" videoHeight="400">0UjsXo9l6I8</large>
<text><![CDATA[]]></text>
</item>