jQuery : Automatic Image Montage
470 1 J'aime !

jQuery : Automatic Image Montage

Publié par Yann GROSYEUX

Aujourd'hui, on va s’intéresser à un plugin jQuery qui va vous aider à gérer, de manière agréable et responsive, des photos sur votre site ! Automatic Image Montage permet de créer un mur d’images en prenant en considération les contraintes qu’on lui impose.

Il n’est pas rare d’avoir à présenter une série d’images ayant chacune une résolution et un format différant des autres : pour présenter ça, c’est vite un casse-tête. Il faut également éviter les solutions exotiques qui ne respectent pas la sémantique HTML, afin de permettre à nos amis les bots de les référencer correctement.

 

Contexte

Pour le blog, j’avais besoin de ce genre de chose pour présenter les sites et marques qu’on aime. Le besoin était clair :

  • Afficher une miniature du site ou de la marque concernée, sans qu’elle soit déformée, mais en acceptant qu’elle soit cropée.
  • Ne pas avoir à me préoccuper du nombre d’images, et donc de lignes que cela aller générer
  • Respecter la sémantique HTML
  • Avoir un aspect aléatoire dans la présentation des miniatures pour casser la rigidité d’un carré qui se serait plus apparenté à un gros pavé, et ne pas privilégier une miniature vis-à-vis d’une autre

 

jquery-automatic-image-montage-oreros-online-on-les-aime-01

On les aime ! – Oreros Online

 

Après bien des recherches, je suis tombé sur un plugin jQuery bien ficelé, édité par Tympanus : Automatic Image Montage.

 

Ce plugin permet d’organiser une série d’images au sein d’un montage (type wall), en prenant en charge certaines contraintes, comme l’espace alloué, la taille et le nombre d'images. Il se charge de présenter avec les images utilisées un mur avec tout l'espace disponible. Ça fonctionne aussi bien que le container soit fluide ou de taille fixe (y compris en plein écran).

 

Il comprend pas mal d’options telles que :

  • La possibilité de combler l’espace vacant en élargissant la dernière image
  • Spécifier une hauteur minimale et maximale pour chacune des lignes. La hauteur de chacune des lignes sera aléatoire dans cette tranche
  • Définir une largeur et une hauteur minimale pour chacune des photos (ce qui évite un élargissement disgracieux)
  • Indiquer une marge entre chaque image
  • Différer le chargement de nouvelles images dans le wall. Cette dernière option, combinée avec un chargement AJAX se révèlera très pratique !

 

De base, chaque image est cachée, tant que le plugin n’a pas terminé son traitement. Cela évite des redimensionnements lors du chargement.

 

Côté mise en place, c’est eeeeaaaaassssyyyyy laughing

 

Mise en œuvre

HTML

Les images à afficher doivent être incluses dans des balises de lien, elles-mêmes encapsulées dans un container div.

 

Le container doit posséder une classe « am-container », et un identifiant qui sera utilisé pour appeler le plugin.

 

Ex :

<div class="am-container" id="am-container">
   <a href="#"><img src="images/1.jpg" title="Image 1"></img></a>
   <a href="#"><img src="images/2.jpg" title="Image 2"></img></a>
   <a href="#"><img src="images/3.jpg" title="Image 3"></img></a>
   ...
</div>

 

CSS

Pour la partie style, c’est light étant donné qu’une bonne partie est supportée directement par les balises (largeur et hauteur).

 

.am-wrapper{
  position:relative;
  overflow:hidden;
}
.am-wrapper img{
  position:absolute;
  outline:none;
}

 

Remarque : De base, le wall s’affichera dans la totalité du container. On peut tout à fait spécifier une largeur et une hauteur, ainsi qu’une marge, dans le parent du container.

 

<div style="width:800px;height:300px;overflow-y:scroll;margin:40px auto;">
  <div class="am-container" id="am-container">
  ...
  </div>
</div>

 

JAVASCRIPT

Inutile de te rappeler que c’est un plugin jQuery (donc n’oublie pas d’inclure le core de jQuery wink ). Le plugin est compatible à partir de la version 1.6.2.

 

Tu trouveras le plugin en téléchargement ici : http://tympanus.net/Development/AutomaticImageMontage/AutomaticImageMontage.zip

Il inclut également différents exemples.

 

$(function() {
  var $container = $('#am-container'),
      $imgs = $container.find('img').hide(),
      totalImgs = $imgs.length,
      cnt = 0;

  $imgs.each(function(i) {
    var $img = $(this);
    $('<img/>').load(function() {
      ++cnt;
      if( cnt === totalImgs ) {
        $imgs.show();
        $container.montage({
          fillLastRow: true,
          alternateHeight: true,
          alternateHeightRange: {
            min: 90,
            max: 240
          }
        });
      }
    }).attr('src',$img.attr('src'));
  })
});

 

Différentes options sont disponibles, n’hésite donc pas à y jeter un coup d’œil wink

 

En cas d’utilisation d’un pourcentage pour la largeur (ou si aucune largeur n'est indiquée), indiquer la valeur trueCela ajoutera un style overflow-y:scroll à la balise BODY et fixera un problème d’affichage de la barre de défilement verticale

liquid: true,

 

Marge entre les images (en pixels)

margin: 1,

 

Largeur minimum qu’une image doit avoir dans le wall (en pixels)

minw: 70,

 

Hauteur minimum qu’une image doit avoir dans le wall (en pixels)

minh: 20,

 

// Hauteur maximum qu’une image peut avoir dans le wall (en pixels)

maxh: 250,

 

Alterner la hauteur de chacune des lignes. Si la valeur est true, elle prend le pas sur la valeur par défaut fixedHeight

alternateHeight: false,

 

Hauteur aléatoire d’une ligne comprise entre la tranche de valeurs 'min' and 'max' (en pixels) :

alternateHeightRange: {

         min: 100,

         max: 300

}, 

 

Hauteur fixe pour toutes les images (en pixels). Si la valeur suivante est spécifiée, elle est utilisée en priorité sur la valeur de la propriété minsize

fixedHeight: null,

 

Si la valeur true est indiquée, la largeur et la hauteur de la plus petite image sera utilisée pour définir les propriétés minw et minh

minsize: false, 

 

Si la valeur true est indiquée, la dernière image comblera l’espace horizontal vacant du container

fillLastRow: false

 

Tout ça, pour un très joli résultat :

 

jquery-automatic-image-montage-00

Exemple d'utilisation du plugin Automatic Image Montage

 

Enfin, le plugin est disponible en licence CreativeCommons 3.0, pour un usage non commercial.

 

Bon montage photo smile

 

470 1 J'aime !

Un commentaire ? Réagissez !