Magazine Bd & dessins

Créer une galerie d'images simple, avec un effet "fade-in"

Par Catherine
Créer une galerie d'images simple, avec un effet fade-in
On m'a récemment demandé comment ajouter des images côte à côte pour former comme une petite galerie d'images. Du coup je vous ai créé un exemple de galerie d'images à 2 ou 3 colonnes, dont on peut ajouter des bordures, un fond, et qui affiche l'image dans une nouvelle fenêtre quand on clique dessus. En bonus, je vais vous expliquer comment ajouter un petit effet fondu "fade-in" au survol de l'image avec la souris ;)
Créer une galerie d'images simple, avec un effet fade-in
C'est parti pour les explications !

Le code HTML

Commençons par le code HTML de notre galerie. Elle est la même quelque soit le nombre de colonnes choisi.
A partir du tableau de bord allez dans Mise en page :
Créer une galerie d'images simple, avec un effet fade-in
Cliquez sur Ajouter un gadget :
Créer une galerie d'images simple, avec un effet fade-in
Puis sélectionnez HTML/ JavaScript dans la liste de gadgets proposés :
Créer une galerie d'images simple, avec un effet fade-in
Dans le fenêtre qui s'ouvre, ajoutez un titre à votre gadget si vous voulez, et collez le code suivant dans la partie Contenu :
<!-- Début Galerie -->
<div id="galerie_photo">
<div class="GPimg" style="background-image:url('http://adresse.com/image-01.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image-01.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>
<div class="GPimg" style="background-image:url('http://adresse.com/image-02.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image-02.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>
<div class="GPimg" style="background-image:url('http://adresse.com/image-03.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image-03.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>
<div class="GPimg" style="background-image:url('http://adresse.com/image-04.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image-04.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>
<div class="GPimg" style="background-image:url('http://adresse.com/image-05.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image-05.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>
<div class="GPimg" style="background-image:url('http://adresse.com/image-06.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image-06.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>
</div>
<!-- Fin Galerie -->Comme ceci :
Créer une galerie d'images simple, avec un effet fade-in
Dans cet exemple la galerie est composée de 6 images. Il est tout a fait possible d'en rajouter en ajoutant le code d'image suivant avant le dernier </div> (en bleu ci-dessus):
<div class="GPimg" style="background-image:url('http://adresse.com/image.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>Pour enlever un code d'image il faut bien supprimer à partir de <div class jusqu'au </div> suivant.
Maintenant ajoutons les images à proprement parler :)
Remplacez chaque lien surligné ci-dessous par le lien de l'image souhaité, sachant qu'il faut indiquer le lien 2 fois :
Créer une galerie d'images simple, avec un effet fade-in
Cliquez sur Enregistrer, et déplacez votre gadget où vous voulez sur votre blog.
Voilà pour le code HTML :)

Le code CSS

Maintenant il faut définir le visuel de notre galerie d'images.
Pour cela, allez dans Modèle à partir du tableau de bord puis cliquez sur Modifier le code HTML :
Créer une galerie d'images simple, avec un effet fade-in
Cliquez sur le rectangle noir à gauche de <b:skin>...</b:skin> :
Créer une galerie d'images simple, avec un effet fade-in
Si vous ne le trouvez pas c'est que cette partie est déjà ouverte, passez à l'étape suivante.
Cliquez n'importe où dans la boîte de code, puis appuyez sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code tapez :
/* ContentPuis appuyez sur Entrer.

Disposition à 3 colonnes

Pour la disposition à 3 colonnes, collez le code suivant juste au-dessus de /* Content :
#galerie_photo {
max-width: 100%;
text-align: center;
}
#galerie_photo .GPimg {
max-width: 32%;
width: 32%;
height: 87px;       /* Hauteur des images */
display: inline-block;
background-position: 50% 50%;
background-size: cover;
padding: 0;
margin: 0;
}Comme ceci :
Créer une galerie d'images simple, avec un effet fade-in

Disposition à 2 colonnes

Pour la disposition à 2 colonnes, collez le code suivant juste au-dessus de /* Content :
#galerie_photo {
max-width: 100%;
text-align: center;
}
#galerie_photo .GPimg {
max-width: 49%;
width: 49%;
height: 132px;       /* Hauteur des images */
display: inline-block;
background-position: 50% 50%;
background-size: cover;
padding: 0;
margin: 0;
}On obtient visuellement :
Créer une galerie d'images simple, avec un effet fade-in
Remarque : Il faudra ajuster la valeur de la hauteur des images en fonction de votre blog, pour qu'elles apparaissent carrés. Mais vous n'êtes pas obligés, vous pouvez également faire en sorte que les images aient une forme rectangulaire ;)

Ajouter des bordures et un fond

Pour ajouter une bordure autour des images il faut ajouter les codes suivants :
border-style: solid;
border-size: 1px;
border-color: #6C6C6C;Au code :
#galerie_photo .GPimg {
max-width49%;
width49%;
height132px;
displayinline-block;
background-position50% 50%;
background-sizecover;
padding0;
margin0;
}Comme ceci :
#galerie_photo .GPimg {
max-width49%;
width49%;
height132px;
displayinline-block;
background-position50% 50%;
background-sizecover;
padding0;
margin0;
border-stylesolid;     /* Style de la bordure */
border-size1px;        /* Largeur de la bordure */
border-color#6C6C6C;   /* Couleur de la bordure */
}Le style de bordure peut être :
  • solid = plein
  • dashed = en tirets
  • dotted = en pointillés

Pour trouver le code hexadécimal (#6C6C6C) de la couleur souhaitée, vous pouvez utiliser le site Code Couleur.
Pour ajouter une bordure et/ou un fond à la galerie, il faut ajouter les codes suivants :
border-style: solid;
border-size: 1px;
border-color: #6C6C6C;
background-color: #d7dcdf;Au code :
#galerie_photo {
max-width100%;
text-aligncenter;
}Comme ceci :
#galerie_photo {
max-width100%;
text-aligncenter;
border-style: solid;         /* Style de la bordure */
border-size: 1px;            /* Largeur de la bordure */
border-color: #6C6C6C;       /* Couleur de la bordure */
background-color: #d7dcdf;   /* Couleur du fond */
}
De plus, vous pouvez ajouter un espace entre la bordure de la galerie et les images pour que ça soit plus joli. Pour cela ajoutez :
padding-top: 7px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;Comme ceci :
#galerie_photo {
max-width100%;
text-aligncenter;
border-stylesolid;
border-size1px;
border-color#6C6C6C;
background-color#d7dcdf;
padding-top7px;      /* Espace au-dessus des images */
padding-right5px;    /* Espace à droite des images */
padding-bottom3px;   /* Espace en-dessous des images */
padding-left5px;     /* Espace à gauche des images */
}Modifiez les valeurs en pixels (5px) comme vous le souhaitez ;)
Visuellement on obtient :
Créer une galerie d'images simple, avec un effet fade-in

Ajouter un effet "fade-in" au survol des images

L'effet fade-in consiste à faire apparaître de manière plus clair ou plus visible quelque chose quand on le survol avec la souris.
Pour obtenir cet effet sur les images de votre galerie, ajoutez les codes suivants :
opacity: 0.6;
transition-duration: 0.4s;Au code :
#galerie_photo {
max-width100%;
text-aligncenter;
}Comme ceci :
#galerie_photo {
max-width100%;
text-aligncenter;
opacity0.6;
transition-duration0.4s;
}Ajoutez également le code suivant à la suite :
#galerie_photo .GPimg:hover {
opacity: 1;
transition-duration: 0.4s;
}Au final le code ressemble à ceci :
#galerie_photo {
max-width100%;
text-aligncenter;
opacity0.6;
transition-duration0.4s;
}
#galerie_photo .GPimg:hover {
opacity1;
transition-duration0.4s;
}Et visuellement on obtient :
Créer une galerie d'images simple, avec un effet fade-in
Et voilà pour ce petit tutoriel ! Vous savez maintenant comment créer une petite galerie d'images ! ;)

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Catherine 742 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte