Simple Gallery

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

2 galleries

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.

Use

the panel of the simple gallery (click to zoom)

The gallery has the following parameters :

Pictures URLs

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.

Autoplay

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.

Autoplay duration

The interval in seconds before displaying the next picture, if the autoplay is activated.

Loop

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.

Transition Type

Determine the transition animation between 2 pictures, here are the current transitions types :

Fade

Swipe

Zoom

Transition duration

The duration of the transition between 2 pictures in seconds.

Show controls

If the checkbox is checked, the next and previous buttons are displayed

Show loader

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.

Scale mode

The scale mode applied to the pictures, there are 3 scale modes :

noscale

The picture won’t be resized and will be displayed at their full size

fill

The picture will take the dimensions of the gallery. It will probably deform the picture

exactFit

The picture will take the biggest size they can within the gallery without being deformed

Show background

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.

Background color

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 :

onRelease myGallery.next

Add the following action on the component yout want to use as the previous button :

onRelease myGallery.previous

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 :

onStartPictureLoading sent when a picture loading start

onPictureLoaded sent when a picture has been successfuly loaded

onPictureLoadingError sent when there was an error during picture loading

onPictureStartTransition sent when the transition start between 2 pictures

onPictureTransitionComplete sent when the transition is complete between 2 pictures

onNextPicture sent when the process to display the next picture starts

onPreviousPicture sent when the process to display the previous picture starts

onNextPictureAutoPlay sent when the next picture is displayed thanks to the autoplay