thumbnails for lightbox

example

description

this flash thumbnail gallery for lightbox++ is based on action script 2 and communicates over java script. you can find more information about flash combined with lightbox on the lightbox++ site.


how to use

part 1 - setup lightbox++

go to lightbox++ to find out how to set it up. in the following download package, you will find the lightbox++ library. you just need to link the lightbox++.js, prototype.js, scriptaculous.js and lightbox.css in the head of your html file and to include the js-folder and the other lightbox folders. you can see how it works in the example file, included in the download package.

<script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script> <script src="js/lightbox++.js" type="text/javascript"></script> <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />

plus the communication script between flash and javascript (lightbox) must be placed in the head as well.

<script type="text/javascript"> function LightboxDelegate(url,caption) { var objLink = document.createElement('a'); objLink.setAttribute('href',url); objLink.setAttribute('rel','lightbox'); objLink.setAttribute('title',caption); Lightbox.prototype.start(objLink); }

part 2 - setup flash

you can use the usual embed and object tags to implement the flash file. choose the size you want, in percents to your div or in pixels, the flash is gonna adjust by itself (horizontal or vertical). you will also find examples in the download package. mainly i am gonna explain how to use the variables, which you can directly pass to the swf-file in the object and embed tag.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="200" id="picLightBox" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="wmode" value="transparent" /> <param name="movie" value="thumbnail_lightBox/picLightBox.swf?xmlVar=thumbnail_lightBox/daten.xml&origMarginVar=15&frameColorVar=0xFFFFFF&loadingColorVar=0xECE9D8&speedVar=15&minScaleVar=15&radiusVar=10&maxScaleTweenVar=4" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="thumbnail_lightBox/picLightBox.swf?xmlVar=thumbnail_lightBox/daten.xml&origMarginVar=15&frameColorVar=0xFFFFFF&loadingColorVar=0xECE9D8&speedVar=15&minScaleVar=15&radiusVar=10&maxScaleTweenVar=4" quality="high" bgcolor="#ffffff" width="100%" height="200" name="picLightBox" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>

the following two parameters are the most important to change:

src="thumbnail_lightBox/picLightBox.swf?xmlVar=thumbnail_lightBox/daten.xml&origMarginVar=15&frameColorVar=0xFFFFFF&loadingColorVar=0xECE9D8&speedVar=15&minScaleVar=15&radiusVar=10&maxScaleTweenVar=4" value="thumbnail_lightBox/picLightBox.swf?xmlVar=thumbnail_lightBox/daten.xml&origMarginVar=15&frameColorVar=0xFFFFFF&loadingColorVar=0xECE9D8&speedVar=15&minScaleVar=15&radiusVar=10&maxScaleTweenVar=4"
thumbnail_lightBox/picLightBox.swfthis is the path to the swf-file, in this example the swf-file is stored in the folder thumbnail_lightBox.
the "?" after the ".swf" indicates that variables are followed. the variables are defined by the "=" sign and a new variable is added by "&"
xmlVar=thumbnail_lightBox/daten.xmlthis variable defines the path to the xml-file, in part 3 you gonna find out about the xml-file use. if you don't pass this variable, it's by default: daten.xml
origMarginVar=15this variable defines the margin between thumbnails. if you don't pass this variable, it's by default: 30
frameColorVar=0xFFFFFFthis variable defines the frame, background color.
loadingColorVar=0xECE9D8this variable defines the loading frame color.
speedVar=15this variable defines the speed of the thumbnail movements. if you don't pass this variable, it's by default: 15
minScaleVar=15this variable defines the minimum scale of the thumbnails. if you don't pass this variable, it's by default: 15
radiusVar=10this variable defines how soon thumbnails get scaled. if you don't pass this variable, it's by default: 10
maxScaleTweenVar=4this variable is for performance issues and defines when effects are gonna be reduced. if you don't pass this variable, it's by default: 4 (pictures)

part 3 - setup xml

first you pass the variable (xmlVar) with the path to your xml-file as in step 2 described. then you just create your xml with the following childs. again there is an example in the download package.

<?xml version='1.0' encoding='utf-8'?> <bilder> <pic verzeichnis="thumbnail_lightBox/bilder/02.jpg" titel="butterfly2"></pic> <pic verzeichnis="thumbnail_lightBox/bilder/03.jpg" titel="butterfly3"></pic> <pic verzeichnis="thumbnail_lightBox/bilder/04.jpg" titel="butterfly4"></pic> <pic verzeichnis="thumbnail_lightBox/bilder/05.jpg" titel="butterfly5"></pic> <pic verzeichnis="thumbnail_lightBox/bilder/06.jpg" titel="butterfly6"></pic> </bilder>

the first attribute: "verzeichnis" is the path to the picture. the attribute: "titel" is the name which is gonna be showed in lightbox.

part 4 - closing comment

you can use absolut path's for the xml-file (attribute: verzeichnis), variable (xmlVar) and the path to the .swf or relative path's. if you use relative path's as in the download package, be aware that the path points from the parent html file and not the directory of the flash file!


download

download thumbnails for lightbox - download package v1.0


Comments

  1. test vs. spam

    Comment by StarSystems - 29.09.2008 - 15:27

  2. Hallo, ich finde dieses "tool" wirklich genial. Leider komme ich nicht ganz damit zurecht. Mit Firefox passt sich die Größe bei mir nicht an? (bleibt vertikal) Außdem öffnen sich beim klicken nicht die Bilder? Wäre super dankbar über eine Antwort. Viele Grüße Jörg Wackersreuther

    Comment by Jörg - 05.11.2009 - 22:42

  3. Am I allowed to use that on my website?

    Comment by Jörg - 08.11.2009 - 20:25

  4. <a href="http://vsevolodrezv.tripod.com/cat2/liberty-mutual-insurance-helena-mt-302.html">liberty mutual insurance helena mt</a>

    Comment by - 24.07.2010 - 19:05

  5. Comment by - 28.02.2012 - 12:29

  6. I found your blog on google and read a few of your other posts. I nothing but added you to my Google Advice Reader. Keep up the tolerable work. Look audacious to reading more from you in the future. Promotion code - WSed3AQCE

    Comment by - 01.03.2010 - 22:25

Leave a comment

Encapsulate code with [code]your code[/code]