La grille CSS est géniale, nous ne pouvons pas le dire assez. Cela aide beaucoup à rendre notre site Web responsive. Parfois, nous n'avons même pas besoin de media-querries pour rendre notre mise en page entièrement responsive. Dans cet article, je vous expliquerai comment créer une galerie d'images responsive avec une grille CSS (uniquement) et du JavaSript (pour le rendre réactif), et les images seront extraites de l'API unsplash. Vous devrez donc créer un compte ici pour avoir une clé d'API.

• HTML
• CSS
• JavaScript

HTML

Le HTML est relativement simple comme vous pouvez le voir.

<main>
  <div class="image--container"></div>
  <div class="image--selection"></div>
</main>

Nous avons deux éléments div, le premier avec la classe image-container sera le visualiseur et le second tagdiv nous permettra de sélectionner une image dans la galerie. Et d'ailleurs, les balises img seront créées par JavaScript.

CSS

Pour le CSS, nous allons d'abord effectuer quelques réinitialisation pour supprimer les espaces et importer Open Sans à partir des polices google.

@import url("https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #444;
}

main {
  padding: 0 0.5rem;
  height: 100vh;
}

Ensuite, on modifie la couleur de fond de la balise body et on définit la hauteur de la balisemain pour qu'elle corresponde à la hauteur de la fenêtre d'affichage.

.image--gallery {
  width: 100%;
  height: 32rem;
  display: block;
  margin: auto;
  border: 5px solid #222;
  object-fit: cover;
}

.image--selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  justify-content: center;
  align-items: center;
}

.image__item {
  width: 100%;
  height: 8rem;
  display: block;
  margin: auto;
  margin-bottom: 0.5rem;
  border: 5px solid #222;
  object-fit: cover;
  cursor: pointer;
}

Pour rendre la visionneuse d'images plus agréable, nous devons utiliser .image-gallery pour étendre la largeur à 100% pour avoir une image responsive et le plus important est de définir la propriétéobject-fit sur cover. Il va assurer simplement que l'image s'adapte à son élément conteneur.

Ensuite, pour la galerie d'images, nous utilisons .image-selection pour avoir un système de grille. Après l'avoir affiché dans la grille, nous devons définir grid-template-columns sur repeat (auto-fit, minmax (9rem, 1fr)).

La fonction repeat () prend deux arguments: le nombre de fois pour répéter la valeur et la valeur elle-même. La valeur d'ajustement automatique nous permet d'envelopper nos colonnes dans des lignes lorsque nous manquons d'espaces pour afficher tous les éléments de la même colonne dans notre fenêtre. Et la fonction minmax () fixera la taille minimale de l'élément à 9rem et la taille maximale à1fr.

justify-content etalign-items nous aident à centrer les éléments de la grille.
Enfin, la classe .image__item sert à redimensionner chaque image de la galerie.
rem est une unité relative à la taille de la police (16px).
fr est juste une unité fractionnaire.

.loader {
  text-align: center;
  margin-top: 20%;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
}

.animate-entrance {
  animation: BounceIn 0.8s;
}

@keyframes BounceIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

Comme vous pouvez le voir ici, nous utilisons la classe .loader pour styliser l'alignement, la police, la marge et la couleur du texte à afficher si nous n'avons pas d'images.

Ensuite, la classe .animate-entrance nous aide à faire des animations sur la visionneuse d'images. Pour cela, nous utilisons la propriété d'animation et la valeur BounceIn définies ci-dessous avec @keyframes. Il va juste rebondir avec un effet de fondu et évoluer un peu. Et l'animation durera 0,8 seconde.

JavaScript

Nous commençons la partie javaScript en sélectionnant quelques éléments.

const image_gallery = document.querySelector(".image--container")
const image_container = document.querySelector(".image--selection")
const loading = '<h1 class="loader">Loading...</h1>'

Le premier image_gallery est l'élément de visualisation, et le secondimage_container est la galerie d'images. Les deux éléments sont sélectionnés par leurs noms de classe avec la méthode querySelector. Le dernier loading sera utilisé si nous n'avons aucune image à afficher.

const showImages = () => {
  // Show loading text if no data
  if (image_container.children.length === 0) image_container.innerHTML = loading
  fetch(`https://api.unsplash.com/photos?client_id=${apiKey}`)
    .then(res => {
      res.json().then(images => {
        // Call the function to create the gallery
        createImageGallery(images)
      })
    })
    .catch(e => {
      console.log(e)
    })
}

La fonction showImages () affichera les images extraites de l'API unsplash. Tout d'abord, nous devons vérifier si les image_container ont un élément enfant ou non, en d'autres termes si la galerie d'images est créée dans le DOM ou non et afficher Loading ... lors de la récupération des données de unsplash avec l'API fetch. Ensuite, si nous obtenons des images, on le passe à la fonction createImageGallery () comme argument pour afficher les images, sinon attrapez l'erreur.

Pour le apiKey dans l'url, vous devez créer un compte ici et le remplacer avec votre clé d'API.

const createImageGallery = images => {
  let output = ""
  // Show the first image on the viewer
  image_gallery.innerHTML = `<img src="${images[0].urls.regular}" class="animate-entrance image--gallery" alt="${images[0].alt_description}">`
  setTimeout(() => {
    image_gallery.children[0].classList.remove("animate-entrance")
  }, 500)
  // show unselected images
  images.forEach(({ urls, alt_description }) => {
    output += `<img src="${urls.regular}" alt="${alt_description}" class="image__item" />`
  })
  image_container.innerHTML = output
}

Pour créer la visionneuse dans le DOM, nous utilisons la propriété innerHTML pour ajouter l'élément à image_gallery. Ensuite, nous supprimons la classe animate-entrance après 0,5 seconde pour pouvoir à nouveau animer le spectateur.

Et nous parcourons images (données extraites de unsplash) et nous sortons simplement urls et alt_description pour créer la balise img et l'ajouter à image_container pour créer la sélection de la galerie d'images sur le DOM.

const changeImage = e => {
  // Get the viewer image element
  const image = image_gallery.children[0]
  if (e.target.src) {
    // change the image
    image.classList.add("animate-entrance")
    image.src = e.target.src
    setTimeout(() => {
      image.classList.remove("animate-entrance")
    }, 800)
  }
}

// Event listeners
document.addEventListener("DOMContentLoaded", showImages)
image_container.addEventListener("click", changeImage)

Pour changer l'image sur la visionneuse, nous devons obtenir l'élément enfant (balise img) de image_gallery. Ensuite, vérifiez si l'événement fourni en argument contient un attribut src ou pas. Ensuite, changez l'image du visualiseur avec celle sélectionnée et ajoutez la classe .animate-entrance à la balise img. Ensuite, nous supprimons la classe animate-entrance après 0,5 seconde pour pouvoir à nouveau animer la visionneuse.

Et pour y arriver, nous devons écouter deux événements. Le premier DOMContentLoaded déclenchera la fonction showImages () pour afficher toutes les images lorsque le document HTML initial sera complètement chargé. Le second écoute l'événement click sur l'élément image_container et change l'image du visualiseur avec la fonctionchangeImage ().

Vous pouvez le voir en direct ici