Options

The Carousel can be highly customized changing options in the xml file. The following xml file shows all options (with their default values):

<?xml version="1.0" encoding="utf-8"?>
<!-- fhShow Carousel 2.0 configuration file
     Please visit http://www.flshow.net/ -->
 
<slide_show>
    <options>
        <debug>false</debug>                <!-- true, false -->
        <background>#000000</background>    <!-- #RRGGBB, transparent -->
        <friction>5</friction>              <!-- [1,100] -->
        <fullscreen>false</fullscreen>      <!-- true, false -->
 
        <margins>
            <top>0</top>                                <!-- [-1000,1000] pixels -->
            <left>0</left>                              <!-- [-1000,1000] pixels -->
            <bottom>0</bottom>                          <!-- [-1000,1000] pixels -->
            <right>0</right>                            <!-- [-1000,1000] pixels -->
            <horizontal_ratio>33%</horizontal_ratio>    <!-- [1,50] a photo may occupy at most horizontalRatio percent of the Carousel width -->
            <vertical_ratio>50%</vertical_ratio>        <!-- [1,100] a photo may occupy at most verticalRatio percent of the Carousel height -->
        </margins>
 
        <interaction>
            <rotation>mouse</rotation>            <!-- auto, mouse, keyboard -->
            <view_point>mouse</view_point>        <!-- none, mouse, keyboard -->
            <speed>90</speed>                     <!-- [-360,360] degrees per second -->
 
            <default_speed>45</default_speed>             <!-- [-360,360] degrees per second -->
            <default_view_point>20%</default_view_point>  <!-- [0,100] percentage -->
            <reset_delay>30</reset_delay>                 <!-- [0,600] seconds, 0 means never reset -->
        </interaction>
 
        <far_photos>
            <size>50%</size>                  <!-- [0,100] percentage -->
            <amount>50%</amount>              <!-- [0,100] percentage -->
            <blur>10</blur>                   <!-- [0,100] amount -->
            <blur_quality>3</blur_quality>    <!-- [1,3] 1=low - 3=high -->
        </far_photos>
 
        <reflection>
            <amount>100</amount>      <!-- [0,1000] pixels -->
            <blur>2</blur>            <!-- [0,100] blur amount -->
            <distance>0</distance>    <!-- [-1000,1000] pixels -->
            <alpha>50%</alpha>        <!-- [0,100] percentage -->
        </reflection>
 
        <titles>
            <style>font-size: 12px; font-family: Verdana, _serif; color: #333333;</style>
            <position>above right</position>           <!-- [above, below] [left,center,right]-->
 
            <background>yourimage.png</background>     <!-- image url -->
            <scale9>10 10 10 10</scale9>               <!-- [0,1000] pixels -->
            <padding>5 5 5 5</padding>                 <!-- [-1000,1000] pixels -->
        </titles>
    </options>
 
<!-- Photo list -->
 
    <photo>imgs/image1.jpg</photo>
    <photo>imgs/image2.jpg</photo>
    <photo>imgs/image3.jpg</photo>
</slide_show>

You don't have to specify all options, just those you mean to change. If you write an option (e.g. speed) outside it's section (e.g. interaction) it will be ignored. The parsing is case sensitive.

Always remember that the xml file must be valid: modern browsers (like Firefox and IE) can be used to check xml files.

The list is quite self explanatory. I'm going to details those options that deserves comments.

debug

If set to true shows many information useful for configuring and troubleshooting. Use it!!!

background

This is the color used for shading and fading effects. Always use 6 hexadecimal digits format; do not use color names or 3 digits format.
Beware this does not change the background color of the flash movie (see bgColor in Embedding Parameters). If you want to use a transparent background set both this property and the wmode parameter to “transparent” (see wmode in Embedding Parameters).

friction

Control smoothness in movement changes.

fullscreen

If st to true a “go full screen” button appears in the bottom left corner. You must allow full screen via allowFullScreen parameter (see Embedding Parameters). The user must have FlashPlayer 9.0.28 (or higher).

margins

top/left/bottom/right control the internal margins. If you set debug to true you'll see a blue rectangle showing the margins. You can use negative margins to let the Carousel area extends over the Flash object area (see the second example in this page).

By default images cannot be higher than half the Carousel height, to allow for vertical movement. You can control this with vertical_ratio option.

The horizontal_ratio can be used to let images scale down depending on the ratio between their width and the Carousel width.

Notice that: image can be scale down to fit inside the area but they are never scaled up. Relative size are preserved, so if img1.jpg is twice as big as img2.jpg, they will never have the same size inside the Carousel.

interaction

Learn by examples: read the examples in the Interaction section of the examples page.

Notice that you can invert the direction using negative values for speed.

far_photos

You can control how small (size) and how clear (amount) the photos are when they are in the back. If you set amout to 0 they'll become totally invisible. You can also set a blur effect (amount and quality) for far photos but remember this impact on performances, so use it only if you have a few photos or at least use low quality.

reflection

Use these options to control the reflections below the images.

titles

style control the default style of photo titles. You can use simple css syntax according with the flash-css specifications (for a list of supported attributes refer to the Flash Manual). Notice that you have to write font-family, font-size, font-style, and font-weight separately, you cannot write them altogether in a font attribute.

Always remember that you can change each single title style using font and textformat tags according with the flash-html specifications (see Flash Manual).

position change the position of the title box with respect to the mouse pointer.

background an image to use as background for the title box. If you use a custom image you can also specify scale9 and padding, both are lists of 4 values (top, right, bottom, left) expressed in pixels.


Personal Tools