Plusieurs diapos ur une meme page/iweb

A

Anonyme

Invité
Je précise qu'il n'y a pas de programme en php qui tourne derrière pour gérer la galerie : il faudra éditer le fichier html à la main. Je ferai un mode d'emploi, ce n'est pas compliqué.
 

p4bl0

Membre d’élite
Club MacG
12 Juillet 2004
4 772
425
31
$PWD
p4bl0.net
:cool:

J'adore etre catégorique.Qu'est ce que je peux etre c__ des fois. :)
Mes smileys c'était pour le mot "sport" (que j'ai mis en gras dans la citation) :D


Sinon il n'y a pas de rapport entre être con (tu peut l'écrire entier, vBull met des étoiles si il aime pas :D) et s'intéresser ou pas au dev web :rateau: :p
 
A

Anonyme

Invité
Préambule : Ficelle a créé un gabarit pour l'application Galerie de Didier Guillon qui utilise également jquery et thickbox. Si vous ne voulez pas mettre les mains dans le cambouis et n'avez pas besoin de plusieurs galeries sur une page, allez voir dans le forum Photo dans le sujet épinglé.

Le contenu de l'archive se compose comme suit :
  • galerie
    • index.html
    • img
      • images… (les photos)
      • loadingAnimation.gif (la jauge animée)
    • css
      • ie_only.css (feuille de style annexe pur corriger les bugs dans IE6)
      • style.css (feuille de style de la page)
      • thickbox.css (feuille de style des boîtes thickbox)
      • macFFBgHack.png
    • js
      • jquery.js (la librairie de fonctions javascript)
      • thickbox.css (le plugin pour faire la présentation des photos)
Voici une partie du code de la page qui permet de présenter les images :

Bloc de code:
                <h2>Belgique</h2>
                <dl class="gallery">
                    <dt><a href="img/photo1_grand.jpg" class="thickbox" rel="magalerie" title="Ch&#226;teau-fort de Bouillon/Vue sur la cour du ch&#226;teau et la ville"><img src="img/photo1_petit.jpg" alt="" /></a></dt>
                    <dt>Ch&#226;teau-fort de Bouillon</dt>
                    <dd>Vue sur la cour du ch&#226;teau et la ville</dd>
                </dl>
                <dl class="gallery">
                    <dt><a href="img/photo2_grand.jpg.jpg" class="thickbox" rel="magalerie" title="La semois/Vue du ch&#226;teau"><img src="img/photo1_petit.jpg.jpg" alt="" /></a></dt>
                    <dt>La Semois</dt>
                    <dd>Vue du ch&#226;teau</dd>
                </dl>
Entre h2, le sous-titre, enfin le titre de la premi&#232;re galerie.

Bloc de code:
<h2>Belgique</h2>
Puis pour afficher une photo on utilise une liste de d&#233;finition (<dl>) mais avec deux termes et une d&#233;finition.
Bloc de code:
                 <dl class="gallery">
                    <dt><a href="img/photo2_grand.jpg.jpg" class="thickbox" rel="magalerie" title="La semois/Vue du ch&#226;teau"><img src="img/photo1_petit.jpg.jpg" alt="" /></a></dt>
                    <dt>La Semois</dt>
                    <dd>Vue du ch&#226;teau</dd>
                </dl>
La liste d&#233;finition est affubl&#233;e de la classe gallery. Ensuite comme premier terme (<dt>) on utilise la photo en petit format avec un lien sur la photo en grand format.
Bloc de code:
                     <dt><a href="img/photo2_grand.jpg.jpg" class="thickbox" rel="magalerie" title="La semois/Vue du ch&#226;teau"><img src="img/photo1_petit.jpg.jpg" alt="" /></a></dt>
C'est que l'on va d&#233;finir l'appartenance &#224; telle ou telle galerie et le sous-titre lors de la pr&#233;sentation. Pour d&#233;finir les photos de la m&#234;me famille, il utiliser le m&#234;me rel pour le lien (ici magalerie). Pour le sous-titre, cela se d&#233;finit avec l'attribut title. Attention de ne pas oublier d'assigner une class thickbox pour que &#231;a puisse marcher. Ensuite comme deuxi&#232;me terme, le titre de la photo (en gras) et comme d&#233;fintion (<dd>), une petite explication.

Voil&#224;, il faut copier autant fois cette liste de d&#233;finition autant fois qu'il y a de photos en n'oubliant pas de changer ou non l'attribut rel et les liens sur les photos. Pour faire plusieurs galeries mais pas sur une seule page on peut dupliquer la page index.html et changer les liens.

Pour modifier le fichier html tu peux utiliser smultron, gratuit.
 
A

Anonyme

Invité
Petite précision : j'ai mis des noms de fichier dans le post précédent qui n'existent pas dans l'archive. Dans le fichier archive ce sont des liens vers mon compte flickr.

Mais l'idée est la même. ;)