Galerie de miniatures avec liens cliquables

MAJ : Ce tutoriel est obsolète : désormais, il suffit d'insérer une galerie de vignettes (avec l'élément Galerie d'images de Jimdo) puis de créer des liens, internes ou externes, sur chaque vignette pour obtenir le même effet.

Comment faire une galerie de miniatures avec des liens sur chaque image renvoyant à une page du site ou pointant vers un autre site, comme celle-ci :

Texte alternatif
Texte alternatif
Texte alternatif
Texte alternatif

Les miniatures sont générées et hébergées sur mon site Jimdo. Deux des miniatures ont des liens internes qui pointent sur des pages de mon site ; deux autres miniatures ont des liens externes qui ouvrent Google dans une nouvelle page. J'ai choisi le modèle de galerie n°1, mais il en existe deux autres.

 

Voici comment faire une galerie de ce genre avec des miniatures cliquables, en tirant parti des CSS déjà existantes de Jimdo (du coup, cela fonctionnera avec tous les templates prédéfinis de Jimdo, mais aussi avec les mises en page personnelles).

 

L'installation de la galerie de miniatures avec liens se fait en 3 étapes :

  • étape 1 : création d'une galerie cachée
  • étape 2 : insertion du squelette de la galerie
  • étape 3 : choix du design de la galerie et création du code des miniatures

Etape 1 : création d'une galerie cachée

  1. On crée une nouvelle page dans le menu de navigation intitulée Cache.
  2. On la rend invisible en cliquant sur l'oeil.
  3. Sur cette page, on insère un élément + Galerie.
  4. On charge les images qu'on souhaite utiliser et on crée une galerie avec des miniatures agrandissables, en ajustant la taille des miniatures qu'on veut obtenir.
  5. On passe en mode aperçu pour récupérer les adresses des miniatures créées (clic-droit > copier l'adresse de l'image) qu'on stocke quelque part.

Attention !

Quand on crée la galerie cachée, il faut opter pour la proportion carrée comme ceci :

Screenshot : insertion d'une galerie
Regardez le curseur

Il ne faut pas choisir la proportion rectangulaire :

Screenshot : ne pas cliquer ici
Ne pas cliquer sur ce bouton !
Flèche vers le haut

Etape 2 : insertion du squelette de la galerie

  1. On se rend sur la page où on veut afficher notre galerie de miniatures avec des liens.
  2. On ajoute à l'endroit désiré un bloc + Widget/HTML.
  3. Dans ce bloc, on insère le squelette de base suivant :
<div class="ccgalerie clearover">
  <!-- C'est ici qu'on va insérer les codes des miniatures -->
</div>

Maintenant, on va remplir ce squelette avec autant de blocs de code que de miniatures.

Flèche vers le haut

Etape 3 : choix du design et création du code

Il y a 3 designs de galerie disponibles : il faut donc en choisir un.

 

Cela dit, quelque soit le design retenu, le principe de construction de la galerie de miniatures est le même : on part du squelette de l'étape 2 qu'on remplit d'autant de blocs-codes que de miniatures. Les retours à la ligne au sein de la galerie sont gérés automatiquement : donc, s'il y a 9 images, les miniatures s'arrangeront d'elles-mêmes sur autant de lignes et colonnes que nécessaire - tout dépendra de leur taille et de la place qu'elles auront sur la page.

 

Pour chaque modèle de galerie, on a le choix entre :

  • un bloc-code de type 1 : la miniature a un lien interne, s'ouvrant dans la même fenêtre
  • un bloc-code de type 2 : la miniature a un lien externe, s'ouvrant dans une autre fenêtre

Voici les 3 designs disponibles et pour chacun, les blocs de code disponibles.

Modèle de galerie n°1

Démonstration

Texte alternatif
Texte alternatif
Texte alternatif
Texte alternatif

Bloc-code de type 1 : miniature avec un lien interne

<div class="thumb_sq1">
  <a href="url interne" title="Texte du lien">
    <img src="adresse_de_la_miniature" />
  </a>
</div>

Bloc-code de type 2 : miniature avec lien externe

<div class="thumb_sq1">
  <a href="url externe" title="Texte du lien" target="_blank">
   <img src="adresse_de_la_miniature" />
  </a>
</div>

Code complet de la démonstration

Dans la démonstration, on a :

  • 4 images, donc on écrit 4 blocs de code à l'intérieur du squelette
  • 2 miniatures ont des liens internes, donc on écrit 2 blocs de type 1
  • 2 miniatures ont des liens externes, donc on écrit 2 blocs de type 2
<div class="ccgalerie clearover">

 <!-- bloc-code de l'image 1 // miniature avec lien interne -->
  <div class="thumb_sq1">
   <a title="Lien interne" href="http://realia.jimdo.com">
    <img src="http://realia.jimdo.com/s/cc_images/thumb_1345923150.jpg?t=1240656072" />
   </a>
  </div>

 <!-- bloc-code de l'image 2 // miniature avec lien externe -->
  <div class="thumb_sq1">
   <a title="Lien Google" href="http://www.google.com" target="_blank">
    <img src="http://realia.jimdo.com/s/cc_images/thumb_1345923250.jpg?t=1240656072" />
   </a>
  </div>

 <!-- bloc-code de l'image 3 // miniature avec lien interne -->
  <div class="thumb_sq1">
   <a title="Lien interne" href="http://realia.jimdo.com">
    <img src="http://realia.jimdo.com/s/cc_images/thumb_1345923250.jpg?t=1240656072" />
   </a>
  </div>

<!-- bloc-code de l'image 4 // miniature avec lien externe -->
  <div class="thumb_sq1">
   <a title="Lien Google" href="http://www.google.com" target="_blank">
    <img src="http://realia.jimdo.com/s/cc_images/thumb_1345923350.jpg?t=1240656072" />
   </a>
  </div>

</div>
Flèche vers le haut

Modèle de galerie n°2

Démonstration

Texte alternatif
Texte alternatif
Texte alternatif
Texte alternatif

Bloc-code de type 1 : miniature avec un lien interne

<div class="thumb_sq2">
  <a href="url interne" title="Texte du lien">
    <img src="adresse_de_la_miniature" />
  </a>
</div>

Bloc-code de type 2 : miniature avec lien externe

<div class="thumb_sq2">
  <a href="url externe" title="Texte du lien" target="_blank">
   <img src="adresse_de_la_miniature" />
  </a>
</div>

Code complet de la démonstration

Dans la démonstration, on a :

  • 4 images, donc on écrit 4 blocs de code à l'intérieur du squelette
  • 2 miniatures ont des liens internes, donc on écrit 2 blocs de type 1
  • 2 miniatures ont des liens externes, donc on écrit 2 blocs de type 2
<div class="ccgalerie clearover">

 <!-- bloc-code de l'image 1 // miniature avec lien interne -->
  <div class="thumb_sq2">
   <a title="Lien interne" href="http://realia.jimdo.com">
    <img src="http://realia.jimdo.com/s/cc_images/thumb_1345923150.jpg?t=1240656072" />
   </a>
  </div>

 <!-- bloc-code de l'image 2 // miniature avec lien externe -->
  <div class="thumb_sq2">
   <a title="Lien Google" href="http://www.google.com" target="_blank">
    <img src="http://realia.jimdo.com/s/cc_images/thumb_1345923250.jpg?t=1240656072" />
   </a>
  </div>

 <!-- bloc-code de l'image 3 // miniature avec lien interne -->
  <div class="thumb_sq2">
   <a title="Lien interne" href="http://realia.jimdo.com">
    <img src="http://realia.jimdo.com/s/cc_images/thumb_1345923250.jpg?t=1240656072" />
   </a>
  </div>

<!-- bloc-code de l'image 4 // miniature avec lien externe -->
  <div class="thumb_sq2">
   <a title="Lien Google" href="http://www.google.com" target="_blank">
    <img src="http://realia.jimdo.com/s/cc_images/thumb_1345923350.jpg?t=1240656072" />
   </a>
  </div>

</div>
Flèche vers le haut

Modèle de galerie n°3

Démonstration

Texte alternatif
Texte alternatif
Texte alternatif
Texte alternatif

Bloc-code de type 1 : miniature avec un lien interne

<div class="thumb_sq3">
  <a href="url interne" title="Texte du lien">
    <img src="adresse_de_la_miniature" />
  </a>
</div>

Bloc-code de type 2 : miniature avec lien externe

<div class="thumb_sq3">
  <a href="url externe" title="Texte du lien" target="_blank">
   <img src="adresse_de_la_miniature" />
  </a>
</div>

Code complet de la démonstration

Dans la démonstration, on a :

  • 4 images, donc on écrit 4 blocs de code à l'intérieur du squelette
  • 2 miniatures ont des liens internes, donc on écrit 2 blocs de type 1
  • 2 miniatures ont des liens externes, donc on écrit 2 blocs de type 2
<div class="ccgalerie clearover">

 <!-- bloc-code de l'image 1 // miniature avec lien interne -->
  <div class="thumb_sq3">
   <a title="Lien interne" href="http://realia.jimdo.com">
    <img src="http://realia.jimdo.com/s/cc_images/thumb_1345923150.jpg?t=1240656072" />
   </a>
  </div>

 <!-- bloc-code de l'image 2 // miniature avec lien externe -->
  <div class="thumb_sq3">
   <a title="Lien Google" href="http://www.google.com" target="_blank">
    <img src="http://realia.jimdo.com/s/cc_images/thumb_1345923250.jpg?t=1240656072" />
   </a>
  </div>

 <!-- bloc-code de l'image 3 // miniature avec lien interne -->
  <div class="thumb_sq3">
   <a title="Lien interne" href="http://realia.jimdo.com">
    <img src="http://realia.jimdo.com/s/cc_images/thumb_1345923250.jpg?t=1240656072" />
   </a>
  </div>

<!-- bloc-code de l'image 4 // miniature avec lien externe -->
  <div class="thumb_sq3">
   <a title="Lien Google" href="http://www.google.com" target="_blank">
    <img src="http://realia.jimdo.com/s/cc_images/thumb_1345923350.jpg?t=1240656072" />
   </a>
  </div>

</div>

Trucs à dire ?

Écrire commentaire

Commentaires : 16
  • #1

    chessworld (vendredi, 05 juin 2009 03:28)

    Bonsoir,

    comment créer un liens externe, sur un lien de mon menu ??

  • #2

    LA VOIX (mercredi, 24 juin 2009 01:58)

    Ton site est vraiment trop bien

  • #3

    Gold Web Music (jeudi, 20 août 2009 16:05)

    Super ce forum merci

  • #4

    ema (dimanche, 03 janvier 2010 12:42)

    merci, bonne explications.

    pour un lien externe dans le menu, tu prends la page de ton menu :
    <a href="url externe" target="_blank">le titre</a>
    tu met targe="_blank" si tu veux que le lien s'ouvre dans un autre fenêtre si non, tu l'enlève.

  • #5

    espanolenvielsalm (lundi, 18 janvier 2010 21:02)

    Merci pour tous ces conseils, trucs et astuces. Toutefois j'ai un problème avec cette galerie avec des liens internes, j'ai tout fait comme ci dessus et ça fonctionne très bien quand je suis connectée, mais lorsque je suis déconnectée, ou pour les visiteurs extérieurs, ça ne fonctionne pas, en cliquant on ouvre une page sur laquelle il est écrit: vous êtes actuellement déconnecté...Il y a une manip particulière à faire?

  • #6

    ADGVE (mercredi, 07 juillet 2010 18:43)

    Bonjour à toi et merci pour tout le travail que tu fais pour nous.
    Alors voilà, je souhaiterais faire une galerie comme celles que tu proposes, à la différence qu'un clic sur une des images permettrait de télécharger un fichier (jusque-là ça ne me pose pas de problème).
    Ce qui me pose plus de soucis, par contre, c'est de rendre chaque miniature "agrandissable" au survol du pointeur.
    Pour résumer :des miniatures (de documents que j'aurai transformés en images) sur une page,
    je passe mon pointeur dessus, les images s'agrandissent et je peux visualiser le contenu,
    je clique sur cet aperçu "agrandi" et je peux télécharger le fichier source (en PDF quant à lui.
    Une sorte de mélange entre la galerie d'images et le module de téléchargement de fichiers (avec l'option de visualisation directement dans la page) que propose jimdo.
    Car dans la galerie jimdo si je mets un lien sur une image elle n'est plus agrandissable.
    Voilà, si tu as une idée je suis super preneur.
    En te remerciant encore pour ton boulot et celui de la "communauté francophone jimdo".
    Bien à toi
    Joffrey

  • #7

    britavit (jeudi, 30 septembre 2010 13:05)

    Merci beaucoup pour tous ces conseils!

  • #8

    Kloui-Ko (jeudi, 30 septembre 2010 16:45)

    Bonjour, et merci pour ce tuto qui est très clair !
    Cependant, j'ai le même soucis que "espanolenvielsalm"... Il doit manquer quelque chose... Pouvez-vous nous éclairer ?
    Merciiiii !!!!!!!!

  • #9

    Kloui-ko (jeudi, 30 septembre 2010 17:22)

    Bon, j'ai trouvé la solution... erreur de ma part (notre part ?)... lorsqu'on insère l'adresse de la page vers laquelle on souhaite faire le lien, il faut faire attention de prendre l'adresse en mode non-connecté (et pas en mode connecté)... ah bah oui biensûr !!! ;-)

  • #10

    "Abdelwaheb Bouatay" (dimanche, 28 novembre 2010 23:37)

    Bonjour, et merci pour ce tuto

  • #11

    petitnidmarseillais (lundi, 14 février 2011 12:02)

    bonjour c vraiment très gentil à vous de nous préciser tout cela.
    j'ai un soucis de mon côté : je veux insérer juste une image avec un lien, pas une galerie, du coup j'ai créé

    <div class="ccgalerie clearover">
    <div class="thumb_sq1">
    <a href="url%20externe" title="http://www.homlidays.com" target="_blank"><img src="http://u.jimdo.com/www14/o/sb4fce6de4d078757/img/i2d01a9266766afe5/1297672328/thumb/image.gif" alt="" /></a>
    </div>
    </div>

    mais ça me mène sur une page introuvable, pouvez vous m'aider?
    merci bcp d'avance
    cecile

  • #12

    chezmarienoelle (lundi, 13 juin 2011 23:02)

    ici ça fonctionne, merci encore une fois pour ce super tuto ;-)

  • #13

    genealogielibre (lundi, 17 octobre 2011 20:31)

    Bonsoir et bravo pour toutes ces "pépites" !!!
    Pour ma part, je souhaiterais inclure dans une série de quatre qui va se répéter de nombreuses fois (en fait autant de fois qu'il y a de départements ou territoires français )une miniature qui permette le renvoi vers le haut de page afin de n'avoir qu'une ligne de miniatures.
    Que dois-je appliquer comme code html à cette miniature sachant que ce code doit être indépendant de la page puisque cette série de miniatures va se retrouver sur autant de pages différentes qu'il y a de régions ?
    J'espère ne pas avoir été très (trop ?) confus…
    Encore merci et très cordialement.
    Jean Louis
    Merci de prendre en compte mon adresse mail perso (en tant que graphiste-amateur de ce site) :
    jldarriere@sfr.fr

  • #14

    kolagen (mercredi, 30 mai 2012 00:06)

    good post

  • #15

    PALLAS (vendredi, 21 septembre 2012 13:30)

    Bonjour,
    Merci pour la démonstration très claire et efficace, j'ai testé avec succès... Cependant, j'avais déjà obtenu le même résultat (miniatures avec liens ) de manière bien plus simple : il suffit de créer une galerie d'image à l'endroit voulu et d'affecter un lien (interne ou externe) à chaque miniature ! Pas de page cachée, pas de wigdet... Merci Jimdo !

  • #16

    mathtice31 (mardi, 29 janvier 2013 01:24)

    merci 1000000000000 fois c hiper bien

Ruban