While this module was set-up as a STAFF module for the preview, I leave it to your imagination to come up with any use for it, such as a NEWS module for example. This module indeed allows for various usage as each thumbnail can launch a window with either an image/swf on its own, text on its own, or both at the same time.
1) General colour settings
2) Updating each thumbnail and its content
At the top of the staff.xml file in the settings, you will find the following general colour settings:
thumbBgColor = "1b1b1b" //Background color for the thumbnails
thumbBgAlpha = "0.5" //Background transparency for the thumbnails from 0 to 1
mainBgColor = "1b1b1b" //Background color for animated backgrounds
mainBgAlpha = "0.5" //Background transparency for animated backgrounds
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
preloaderColor = "CCFF00"
preloaderAlpha = "0.3"
Below the main settings in the staff.xml, each thumbnail and its content is defined by the <staff> node as follows:
<staff>
<thumb>images/staff/thumbnails/1.jpg</thumb> //The path to your thumbnail image, the thumbnails must be 120x90 in size.
<image>images/staff/images/1.jpg</image> //The path to your main content asset, this can be any image format or SWF file.
<textfieldWidth>300</textfieldWidth> //The width desired for the textfield area.
<largeDesc><![CDATA[<font size="22" face="GeosansLight">ANNA SMITH</font><br><br>Director<br><A href="mailto:annaSmith@lglab.com">annaSmith@lglab.com</a><br><br>This is the main text area for each staff, or anything you want to do with this module.<br><br>This text is <b>HTML formated</b> and imported dynamically from XML. <br><br>You can easlily insert <a href="http://marketplace.envato.com/user/LGLab">external links</a>, <a href="mailto:yourEmail@mail.com">email links</a> but also links to pages of this website such as the <a href="#/services">services page</a>, all styled using CSS, embed images and swf etc... <br><br>This is a long 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. Nunc vehicula. Vivamus egestas, leo et tincidunt egestas, diam enim semper lorem, sit amet adipiscing diam quam quis lacus. Aliquam convallis urna at leo volutpat porttitor. Phasellus rutrum sodales urna. Fusce vitae odio ac leo pharetra lacinia. Morbi non orci. Nulla nec quam nec metus auctor porta. Curabitur sollicitudin tellus. Sed commodo. Praesent dapibus vulputate pede. Suspendisse potenti. Pellentesque sagittis mauris quis magna. Aenean feugiat metus at ligula. Aliquam convallis urna at leo volutpat porttitor. Phasellus rutrum sodales urna. Fusce vitae odio ac leo pharetra lacinia. Morbi non orci. Nulla nec quam nec metus auctor porta. Curabitur sollicitudin tellus. Sed commodo. Praesent dapibus vulputate pede. Suspendisse potenti. Pellentesque sagittis mauris quis magna. Aenean feugiat metus at ligula.]]></largeDesc> //The main text for that staff item.
</staff>
a - The height of the main content
The height of the main content will be set by the height of the image/swf you are using, you can then adjust the textfield width as detailed above to arrange the main content as you like.
a - Using image or SWF only (no text)
To do this, fill the image path as normal, set the <textfieldWidth> to 0, and leave the <largeDesc> content empty, like this:
<staff>
<thumb>images/staff/thumbnails/5.jpg</thumb>
<image>images/staff/images/5.jpg</image>
<textfieldWidth>0</textfieldWidth>
<largeDesc><![CDATA[]]></largeDesc>
</staff>
a - Using text only (no image or SWF)
To do this, we still need to define some height for the main content as it is normally set by the image height, so instead of an image path in the <image> node, set the desired height for the main content as follows:
<staff>
<thumb>images/staff/thumbnails/3.jpg</thumb>
<image>500</image>
<textfieldWidth>500</textfieldWidth>
<largeDesc><![CDATA[<font size="24" face="GeosansLight">MOTION FLASH DESIGNS</font><br><br>Developer:<br><a href="http://marketplace.envato.com/user/LGLab">LGLab</a><br><br>This text is <b>HTML formated</b> and imported dynamically from XML. <br><br>You can easlily insert <a href="http://marketplace.envato.com/user/LGLab">external links</a>, <a href="mailto:yourEmail@mail.com">email links</a> but also links to pages of this website such as the <a href="#/staff">staff page</a>, all styled using CSS, embed images and swf etc... <br><br>This text area has scroll bar support with mouse wheel enabled including on Macs, and it will adapt to any screen resolutions.<br><br>Lorem ipsum dolor sit amet, consectetur adipis elit. In vehicula libero vel tortor. Nam nisi dolor, faucibus non, ultricies sit amet, tempor non, nibh. Morbi ullamcorper ante sit amet nibh.<br><br><ul><li>In pretium leo vitae ipsum.</li><li>Donec sollicitudin.</li><li>Ut euismod erat sit amet leo.</li><li>Donec pellentesque dui a elit.</li></ul><br><br>Donec eu nisl sit amet lectus gravida luctus. In pretium leo vitae ipsum.<br><br>In pretium leo vitae ipsum. Ut euismod erat sit amet leo. Mauris at libero. Integer scelerisque imperdiet risus.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. 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><br>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.Donec pellentesque dui a elit. Donec sollicitudin.]]></largeDesc>
</staff>