How to make an image gallery in Silex

This tutorial will help you create an image gallery in Silex.

To do this tutorial you need some full-sized images and the same images shrunk to a thumbnail size.

For the sake of this tutorial we will consider that you have 3 images : image1.jpg, image2.jpg and image3.jpg. Their respective thumbnail images have the same name.

It is important that the full-size image and the thumbnail have the same name, otherwise silex won’t be able to find the full-sized image when you click on the thumbnail.

Before we start, put your full sized images in /media/gallery/full and your thumbnails in /media/gallery/thumb.

Step 1 : a list of thumbnails

For this you need 3 components :

Thumblist.cmp.swf

DataSelector.cmp.swf

RssConnector.cmp.swf

The idea is that the DataSelector will ask the RssConnector to read the contents of a directory where you store your thumbnails and push this information to the list. The list will then display the thumbnails.

To do this, drag the 3 components onto the stage and configure them in the following way :

RssConnector.cmp.swf

URL Base : <<silex.rootUrl>>cgi/scripts/rss_browse_folder.php?folder_path=media/gallery/thumb

Troubleshoot : To make sure this works you can try putting this in your browser and you should see some XML. This is the RSS feed generated by the server. Don’t forget to replace <<silex.rootUrl>> by the url to silex. For example http://arielsommeria.com/silextest/ cgi/scripts/rss_browse_folder.php?folder_path=media/gallery/thumb

The thumblist shouldn’t need any configuration, but you might want to play with the parameters for the look and feel afterwards.

DataSelector.cmp.swf

connector name :

paste the connector name you use on the scene.

If you didn’t rename it this should be « RssConnector.cmp.swf » .

List name

Name of the list you use to reveal thumbs.

If you didn’t rename it this should be « Thumblist.cmp.swf » .

icon field = link

dans le data selector

Save your page, refresh, and if all goes well, you should see thumbnails in your list. If that works, you’re ready for step2.

Step 2 : Showing the full-sized image when you click on the thumbnail

Now drag onto an ImageDisplay.cmp.swf onto the stage.

We need to link it to the other components.

To do that, you must do the following config on the dataselector that you put on the stage earlier:

DataSelector.cmp.swf

Commands to execute on click

ImageDisplay.cmp.swf.value=/media/gallery/full/<<title>>

Save your page, refresh, and if all goes well, you should see the full size image when you click on the thumbnail. If that works, you’re mostly done. The next stuff is optional, you don’t have to do them in order.

Step 3 : Showing the first image automatically

Choose the DataSelector that is already on the stage. Click the « actions » tool. You will now add the following line to the actions belonging to the DataSelector :

onResult selectedIndex=0

Save your page, refresh, and if all goes well, you should see the first full size image when you load.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::

1. restituer du texte dans un bloc texte mais en HTML

(pour maitriser la typo / le corps de la typo / la couleur)

soit mettre le html dans les fichiers texte,

soit rééditer le singleLineIo pour que les champs textes aient la bonne mise en forme. Pas idéal, je sais. Il faudrait pouvoir configurer les SingleLineoIo comme les champs texte silex, mais ça n’est pas fait pour l’instant