This component is a simple picture gallery, just drop it in your site and input the urls of your gallery’s pictures.
Authors : Camille GERARD HIRNE, Yannick DOMINGUEZ
This plugin adds 2 components : the gallery and the autoplay gallery. They are both the same component with different configuration. The autoplay gallery will automatically switch pictures every few seconds and won’t display the next and previsou buttons.
The gallery has the following parameters :
This is the urls of the pictures that you want to display in your gallery. The pictures can either come from your media folder (ex: “media/logosilex.jpg”) or from another website (ex: “http://www.google.fr/images/logos/ps_logo.png”). The gallery can display .jpg, .jpeg, .gif (but not animated), .png (transparent or opaque) and .swf pictures.
If the autoplay checkbox is checked, the picture will automatically be switched every few seconds. You can specify the interval with the “Autoplay duration” parameter.
The interval in seconds before displaying the next picture, if the autoplay is activated.
If the loop checkbox is checked, once the user reaches the last picture, if he clicks the next button, the first picture will be displayed, same for the first picture with the previous button.
Determine the transition animation between 2 pictures, here are the current transitions types :
The duration of the transition between 2 pictures in seconds.
If the checkbox is checked, the next and previous buttons are displayed
If the checkbox is checked, the loader will be displayed when a picture is loading
Controls vertical align
Detrmine the vertical position of the next and previous button, can be top, middle or bottom.
The scale mode applied to the pictures, there are 3 scale modes :
The picture won’t be resized and will be displayed at their full size
The picture will take the dimensions of the gallery. It will probably deform the picture
The picture will take the biggest size they can within the gallery without being deformed
If the checkbox is checked, display the background of the gallery. Hiding the background is useful if you want a transparent background or a custom background added in Silex.
The color of the gallery background
Skinning the gallery
The simple gallery is a skinnable component, you can download the source FLA here : SimpleGallery_source. This FLA allows to create your own design by customising :
- The next button
- the previous button
- the loader displayed when a picture is loading
- the error panel displayed when a picture was not found
The folder “silex framework” in the Flash library contain all the necessary clips to make the gallery work as a Silex component and shouldn’t be changed. The “gallery asset” folder contains some graphics which can be customised.
Controlling the gallery with actions
You can use any component to act as the next and previous button of your gallery by adding an action to them.
Ex : for a simple gallery called “myGallery”.
Add the following action on the component yout want to use as the next button :
Add the following action on the component yout want to use as the previous button :
Event sent by the gallery
For a more advanced use of the gallery with actions, here is the list of the event dispatched by it :
sent when a picture loading start
sent when a picture has been successfuly loaded
sent when there was an error during picture loading
sent when the transition start between 2 pictures
sent when the transition is complete between 2 pictures
sent when the process to display the next picture starts
sent when the process to display the previous picture starts
sent when the next picture is displayed thanks to the autoplay
A generic changed event dispatched with some other events