How to Parameter the Simple Gallery Plugin in Silex
Written by Antonin Tuesday, 28 August 2012
Adapt your gallery to your website!
You have created your gallery but for the moment it doesn’t correspond to what you want? Don’t worry, the simple gallery parameters are here to help you.
Let’s see them and get your dream gallery!
The basic parameters
You find them for almost all the Silex components.
- x and y position
It corresponds to your gallery position on your website. By default x and y = 200
Of course you can change this position but, be careful, make sure your gallery doesn’t stick out of your website borders*.
*Note: to see your website borders, just click on the dotted square
Your website borders will be displayed in red. Click again on the dotted square to make them disappear.
- width and height
It corresponds to your gallery dimensions. By default width = 550 and height = 400
You can change the width and the height at your convenience. If you won’t respect the homothety, just click on the red padlock.
You can change your gallery opacity. In fact, it will modify your pictures opacity.
Available values: from 0 to 100
You can change your gallery rotation.
Available values: from 0 to 359 (0 means no rotation)
By checking the “loop” box, you will always have the previous and next button on all the pictures, above all the first and the last one. That means you can go from the first picture to the last one with only one click. Same thing for the last picture. Your gallery never ends.
By unchecking the “loop” box, your gallery will have an end. You won’t be able to go from the first picture to the last one with one click and inversely.
Look at the videos:
The advanced parameters
If you check the “Autoplay” box, you will turn your gallery into a slideshow.
If you uncheck the “Autoplay” box, pictures will be displayed only if user clicks on next or previous buttons.
- Autoplay duration
This parameter is important if you check the “Autoplay” box. It corresponds to the time in seconds before displaying the next picture.
Available values: from 0.1 to 100
If you don’t check the “Autoplay” box, this parameter doesn’t have any importance.
- Transition type
It corresponds to the transition animation between 2 pictures.
You have 3 transition types: Fade, Swipe and Zoom
Look at the videos:
- Transition duration
It corresponds to the time in seconds of the transition between 2 pictures.
Available values: from 0 ad infinitum
- Show controls
If you check the “Show controls” box, the next and previous buttons are displayed.
If you uncheck the “Show controls” box, the next and previous buttons won’t be displayed.
Note: if you want to turn your gallery into a slideshow (autoplay parameter), it’s better to uncheck the “Show controls” box.
Also, if you want to add your own next and previous buttons, uncheck the “Show controls” box
- Show loader
If you check the “Show loader” box, the loader is displayed when a picture is loading.
If you uncheck the “Show loader” box, the loader won’t be displayed.
- Controls vertical align
It corresponds to the vertical position of the next and previous buttons.
You have 3 positions: top, middle and bottom
- Scale mode
It corresponds to the scale mode of your pictures.
There are 3 scale modes:
Your pictures will take the biggest size possible according to your gallery dimensions. They won’t be distorted.
Your pictures won’t be resized and will be displayed at their full size.
Your pictures will have the same dimensions as your gallery but would be probably distorted.
Note: according to what you want, change your pictures size before importing them in your gallery. Don’t hesitate to make some tests with one picture.
- Show background
By default your gallery has a background. It’s more or less visible depending on your pictures size and the scale mode chosen.
If the “Show background” box is checked, the background will be visible, and inversely, if the “Show background” box is unchecked, the background won’t be visible.
Note: if you choose the fill scale mode the background won’t be visible even if the “Show background” box is checked
- Background color
It corresponds to the background color of your gallery. Just click on the square at the right of the parameter ; it will open the color pallet. Choose the wanted color or enter the hexadecimal code you want in the dedicated field.
Look at the video:
The actions “parameters”
As you may know, you can use some actions (ActionScript commands) in Silex to add interactivity in your website.
Here the actions that you can use with your simple gallery:
- Next and previous actions
You can use any component to act as the next and previous buttons of your gallery by adding an action to them.
For example, if your gallery is named “SimpleGallery”, add the following action on the component you want to use as next button:
And add the following action on the component you want to use as previous button:
Note: if you want to add your own next and previous buttons, don’t forget to uncheck the “Show controls” box. Also, it’s recommended to check the “loop” box.
Look at the video:
This overview of simple gallery parameters is now over!