Tutorial Lightbox.rtfd

Tutorial Lightbox
Lightbox est un ensemble de script permettant d’afficher une galerie d’images. Voici
comment l’intégrer à Freeway.
Attention, Freeway pro obligatoire!!
Ce tutorial n’est valide que pour la version 2.03.3 qui est la version disponible
actuellement.
Toute modification future de Lightbox peut entraîner des modifications, à vous d’adapter
les pages.
1) Créer un nouveau projet Freeway et organisation
Commencez par créer un nouveau projet, choisissez les dimensions que vous souhaitez
sur votre document vierge. Créez ensuite un dossier qui contiendra les différents éléments
dont nous avons besoin.
- Un dossier “images”
- Le dossier Lightbox
- Un dossier de publication (Site). Il ne doit pas être modifié par vous
manuellement.
2) Récupération des éléments de Lightbox
Téléchargez Lightbox:
http://www.lokeshdhakar.com/projects/lightbox2/
Décompressez le dossier, et placez le dans votre dossier de projet. Vous aurez donc un
dossier sui devrait ressembler à ceci:
Maintenant, nous allons extraire différents éléments du dossier Lightbox et les dupliquer
dans nos dossiers.
- Depuis le dossier “lightbox/images” copiez les fichiers “prevlabel.gif”, “
nextlabel.gif”, “loading.gif” et “closelabel.gif” dans le dossier “images” que nous avons
créé précédemment.
- Copiez dans ce dossier les images nécessaires (le grand format) à votre galerie.
3) Modification du projet Freeway
Dans cet exemple, nous allons travailler uniquement avec un “groupe” d’images à
visionner. Il est aussi possible de n’avoir qu’une image affichée en plus grand, consultez
l’aide de Lightbox.
Deux choix s’offrent à vous:
- Vous voulez avoir la galerie sur une seule page, alors travaillez sur la page
courante.
- Vous voulez avoir la galerie sur plusieurs pages, il est alors conseillé de créer une
maquette lightbox, et de faire les manipulation suivantes sur la maquette. Attachez cette
maquette à toute les pages où vous souhaitez utiliser la galerie.
Dans cet exemple je ne vais travailler sue sur une page.
“Menu Page->Marqueur HTML”, choisissez “Avant </head>”, et copiez/collez les lignes
suivantes:
<link rel="stylesheet" type="text/css" media="screen" href="css/lightbox.css" />
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
Elle viennent du manuel de Lightbox, avec une seule modification: un ‘/’ est ajouté
devant “js”. Cela nous permettra de placer le dossier “js” à la racine de notre serveur.
Fermez la fenêtre.
Pensez à enregistrer.
Maintenant, créez votre page, placez ce que vous voulez où vous voulez, un titre, un fond
etc... Seule contrainte venant de lightbox: Créez un bloc graphique pour chaque image de
la galerie. Ce sont les vignettes.
Ceci est à appliquer à chaque vignette:
Sélectionnez le bloc image, “Menu Edition->Lien vers”, et cliquez sur
“Extensions...”. Cliquez sur “Nouveau...” et rentrez ceci:
le bouton
Mon groupe s’appelle “parapente”.
Ensuite, dans l’onglet “Externe”, entrez le chemin de la grande image correspondant à la
vignette. Pour ma première vignette j’ai ceci:
Voir manuel Lightbox.
Validez et enregistrez
Astuce: Créez la première vignette et dupliquez-la. Vous n’aurez alors qu’a modifier le
chemin de l’image pour les suivantes.
Quand ceci est prêt, il ne reste plus qu’à transférer!
4) Transfert des éléments
Commencez par demander à Freeway de Transférer la page. Une fois que c’est terminé,
nous avons besoin d’un client FTP (de votre choix, Cyberduck, transmit, Fetch etc.).
Connectez vous au serveur et transférez:
- Le dossier “image” à la racine du serveur ftp.
- Le fichier “lightbox.css” du dossier “Lightbox/css” dans le dossier “css” créé par
Freeway sur le serveur.
- Le dossier “js” du dossier “Lightbox” à la racine du serveur ftp.
Et c’est terminé!