Home -> FPP plugins page -> carousel.swf
This plugin is completely free for use in any context or connection.
carousel.swf
FPP external plugin for displaying a thumbnail carousel menu.
Plugin parameters are read from an external xml file with the default name "carousel.xml". If you want to use a different filename you can add these lines to the FPP xml file:
<carousel>
   xmlFile=myCarousel.xml
</carousel>



And the following parameters can be changed dynamically from FPP ("external.carousel.name=value"):

radiusradius=25%carousel radius, in pixels or percentage (default=200)
angleangle=70carousel angle in degrees, 0=vertical, 90=horisontal (default=60)
visiblevisible=00 or 1, anything else will toggle visibility
alphaalpha=0.50carousel transparency
expandexpand=T0 or 1, anything else will toggle expanding
can also be used at startup to set initial status
collapsecollapse=T0 or 1, anything else will toggle collapsing
same function as expand, but inverted
salignsalign=BLposition of selected text field and arrow button
T(op),M(iddle),B(ottom) and
L(eft),C(enter),R(ight) default=TL
marginmargin=10margin to pano edges, default=10
offsetXoffsetX=-120Horizontal position offset from center (a negative value moves carousel to the left)
offsetYoffsetY=80Vertical position offset from center (a negative value moves carousel upwards)
or
margin=15:10horizontal margin:vertical margin
imgSelectedimgSelected=4thumbnail selected, default=1
spinspin=Tcarousel constant spinning, see <carousel> tag below, any other value
will toggle spin on/off


Tags and attributes used in plugin XML file:

In <carousel> tag:
visiblevisible="0"0 or 1, anything else will toggle visibility
radiusradius="25%"carousel radius, in pixels or percentage (default=200)
angleangle="70"carousel angle in degrees, 0=vertical, 90=horisontal (default=60)
offsetXoffsetX="-120"Horizontal position offset from center (a negative value moves carousel to the left)
offsetYoffsetY="150"Vertical position offset from center (a negative value moves carousel upwards)
alphaalpha="0.50"carousel transparency
spinspin="1"carousel constant spinning: 0=no spin, 1=clockwise spin, -1=anticlockwise spin, default:0
expandexpand="1"initial carousel status
collapsecollapse="1"initial carousel status
same function as expand, but inverted
onClickonClick="hide"behaviour after clicking thumbnail, useful with parameter choiceField=0
In <choiceField> tag:
visiblevisible="0"show field with name of chosen thumbnail (default 1)
salignsalign="BL"relative position T(op),M(iddle),B(ottom) and
L(eft),C(enter),R(ight) default=TL
marginmargin="10"margin to pano edge (used with salign=xx), default=10
margin="15:10"hor margin:vert margin
widthwidth="140"width of selected text field, default=#160
fontfont="Comic Sans MS"selected text font
textSizetextSize="11"selected text font size
textColortextColor="#FFFFFF"selected text font color
bgColorbgColor=#FFFFFFselected text background color, default=#333333
frameColorframeColor=#000000selected text frame color, default=#FFFFFF
In <images> tag:
sizesize="100:67"thumbnail size, default=100:67
frameColorframeColor="#8040A0"selected thumbnail frame color, default=#000000
bgColorbgColor="#FFFFFF"selected thumbnail text background color, default=#333333
mouseFramemouseFrame="1"frames the thumbnail at mouseOver (default 1)
mouseTextBgmouseTextBg="0"show thumbnail text background at mouseOver (default 1)
fontfont="Comic Sans MS"thumbnail text font, default=Arial
textSizetextSize="10"thumbnail text size, default 10
textColortextColor="#404040"thumbnail text color, default #FFFFF0
In <image> tag:
texttext="Train Station"thumbnail text
urlurl="pics/pano8.jpg"thumbnail url
onClickonClick="global.goPano2"thumbnail onClick command
onOveronOver="pic3.visible=1"thumbnail onOver command
onOutonOut="pic3.visible=0"thumbnail onOut command
selectedselected="1"thumbnail selected at start



Example of plugin xml file:

<?xml version = '1.0'?>
<carousel
   radius="30%"
   angle="77"
   offsetY="75"
   spin="clockwise"
   collapse="0"
   alpha="1"
   mouseFrame="0"
   mouseTextBg="0"
   visible="1"
>
   <choiceField 
      visible="1"
      salign="TL"
      margin="15"
      width="160"
      font="Trebuchet MS"
      textSize="11"
      textColor="#FFFFF0"
      bgColor="#404050"
      frameColor="#000000"
   />
   <images 
      size="100:67"
      bgColor="#404040"
      frameColor="#A0A080"
      font="Comic Sans MS"
      textSize="10"
      textColor="#E0E0E0"
   >
      <image text="The Train Bridge" url="../img/pano3.jpg" onClick="global.goBridge()" onOver="pic2s.visible=1" onOut="pic2s.visible=0" />
      <image text="Maria Hill" url="../img/maria.jpg" onClick="global.goMaria()" onOver="pic6s.visible=1" onOut="pic6s.visible=0" />
      <image text="City Hall Tower" url="../img/cityhall.jpg" onClick="global.goTower()" onOver="pic5s.visible=1" onOut="pic5s.visible=0" />
      <image text="%C5SS bridge" url="../img/ass.jpg" onClick="global.goASS()" onOver="pic7s.visible=1" onOut="pic7s.visible=0" />
      <image text="Where I work" url="../img/work.jpg" onClick="global.goWork()" onOver="pic3s.visible=1" onOut="pic3s.visible=0" />
      <image text="My home" url="../img/home.jpg" onClick="global.goHome()" onOver="pic1s.visible=1" onOut="pic1s.visible=0" />
      <image text="The Yatch Club" url="../img/yatchclub.jpg" onClick="global.goYatchs()" onOver="pic4s.visible=1" onOut="pic4s.visible=0" selected="1" />
      <image text="The Train Bridge" url="../img/pano3.jpg" onClick="global.goBridge()" onOver="pic2s.visible=1" onOut="pic2s.visible=0" />
      <image text="Maria Hill" url="../img/maria.jpg" onClick="global.goMaria()" onOver="pic6s.visible=1" onOut="pic6s.visible=0" />
      <image text="City Hall Tower" url="../img/cityhall.jpg" onClick="global.goTower()" onOver="pic5s.visible=1" onOut="pic5s.visible=0" />
      <image text="%C5SS bridge" url="../img/ass.jpg" onClick="global.goASS()" onOver="pic7s.visible=1" onOut="pic7s.visible=0" />
      <image text="Where I work" url="../img/work.jpg" onClick="global.goWork()" onOver="pic3s.visible=1" onOut="pic3s.visible=0" />
      <image text="My home" url="../img/home.jpg" onClick="global.goHome()" onOver="pic1s.visible=1" onOut="pic1s.visible=0" />
      <image text="The Yatch Club" url="../img/yatchclub.jpg" onClick="global.goYatchs()" onOver="pic4s.visible=1" onOut="pic4s.visible=0" />
   </images>
</carousel>



NOTES:
Parameter names are not case sensitive ("FrameColor" is equal to framecolor").


Plugin position can only be set relative to pano borders. The margin parameter gives extra space to the pano edge.


Carousel rotation (except for the slow constant rotation, if chosen) is activated by mouse-over. When moving the mouse over the left part, the carousel will rotate counter- clockwise and vice versa. The rotation will be halted when the mouse is in the center part the width of a thumbnail.


The selected thumbnail is always framed.


Thumbnail texts will span over several lines if necessary. They can contain newline ("\n") codes to control the line breaks. Only the first line will be shown in the selected text box.


If you are using the &" characters inside the "command" parameters in the xml file, you have to encode them as follows:

& as %26
" as %22
You can also enclose your tag data with <![CDATA[ ... ]]> which makes the xml parser ignore any special characters.


The imgSelected parameter can be used at any time to select a thumbnail. If a new pano is loaded by another method than clicking an image, using the command: "external.carousel.imgSelected=nn" will select the corresponding thumbnail.


Version history:

2.1.2:
Fixed bug when loading new XML file.
Fixed bug when setting direction of constant rotation.

2.1.1:
When centering a thumbnail at imgSelected=nn, the carousel will fast-spin in the same direction that it is already spinning.

2.1:
Fixed bug when setting image frame color ().

2.0:
Plugin is now controlled by its own xml file.
OnOver and OnOut events added to each thumbnail.

1.07:
Added parameters "offsetX" and "offsetY" to support repositioning of the carousel.

1.06:
Modified formula for calculating plugin position results in a better centered carousel.

1.05:
Plugin mouse-over now changes mouse pointer (from arrow) to handcursor.

1.04:
Added parameter "onClick". Possible values "collapse" or "hide". If you don't want the carousel collapse behaviour after clicking thumbnail, you can set onClick=hide, which will simply hide plugin instead.

1.03:
Fixed bug - no repositioning of selected text field when pano has been resized.

1.02:
Added parameter "clockwise" for controlling constant spin direction.

1.01:
Fixed bug so angle change is directly visible also when auto spinning is off.