Présenter des photos dans une page
26 septembre 2006 Catégorisé dans : RapidWeaver
Grâce au module Accordion, on peut facilement
présenter ses photos à l'écran avec sur un côté
des vignettes et la photo sélectionnée qui
s'affiche dans le reste de la page.
Voici le résultat à obtenir.
Voici le résultat à obtenir.
Pour cet exemple, nous supposerons que les photos à
afficher et les vignettes sont placées comme éléments
de page (assets) et publiées dans le même répertoire.
Bien sûr, tout est possible puisque les images sont
référencées dans des tag HTML.
Donc, vous créez une nouvelle page avec le module accordion. Les réglages de cette page sont à votre guise, mais il faut veiller à la taille de la structure content et au positionnement des titres, à gauche ou à droite (onglet Effect).
Pour chaque photo, vous créez une entrée dont le titre sera l'instruction html suivante :
en supposant que la vignette de votre image se nomme "thumb.png" dans le dossier "assets" dans le même répertoire que votre page.
Dans le contenu de cette entrée, il faut placer un lien vers l'image agrandie. On pourra par exemple y mettre :
(width=600 permet de s'assurer que la photo sera réduite pour ne pas dépasser 600 pixels en largeur).
Donc, vous créez une nouvelle page avec le module accordion. Les réglages de cette page sont à votre guise, mais il faut veiller à la taille de la structure content et au positionnement des titres, à gauche ou à droite (onglet Effect).
Pour chaque photo, vous créez une entrée dont le titre sera l'instruction html suivante :
<img class="imageStyle" src="assets/thumb.png"/>
en supposant que la vignette de votre image se nomme "thumb.png" dans le dossier "assets" dans le même répertoire que votre page.
Dans le contenu de cette entrée, il faut placer un lien vers l'image agrandie. On pourra par exemple y mettre :
<img with=600 src="assets/photo.png"/>
(width=600 permet de s'assurer que la photo sera réduite pour ne pas dépasser 600 pixels en largeur).
|