De plus en plus de sites utilisent le responsive design pour adapter le contenu au support de l’utilisateur.

Il est facile de réorganiser le texte mais adapter les images correctement aux différents layouts n’est pas si facile. On se retrouve avec des images mal redimensionnées ou mal croppé. Le plus souvent le point le plus intéressant de l’image est dans la partie croppé…

Il existe un plugin jquery permettant d’éviter ces problèmes.

jquery-focus-point

jQuery Focus point propose de renseigner le point de focus important de votre image. De cette façon quelle que soit la dimension de l’image, le point de focus est toujours visible.

Comment utiliser jquery Focus Point:

1. Calculez les coordonees du point de focus de votre image. Vous pouvez utiliser cet outil en ligne.
coordonnees image

2. Ajoutez les fichiers JS et CSS nécessaires au fonctionnement du plugin.

<link rel="stylesheet" href="focuspoint.css">
<script src="jquery.js"></script>
<script src="focuspoint.js"></script>

3. Insérez votre image en spécifiant les coordonnées calculés à l’étape 1.

<div class="focuspoint"
data-focus-x="0.331"
data-focus-y="-0.224"
data-image-w="400"
data-image-h="300">
    <img src="image.jpg" alt="" />
</div>

4. Activer le plugin en ajoutant le script (sans options).

$('.focuspoint').focusPoint();

avec option:

$('.focuspoint').focusPoint({
    throttleDuration: 100 //re-focus toutes les 100ms.
});

 

Et voilà! La partie intéressante de votre image est maintenant toujours visible :)

Plus d’infos et téléchargement sur le site officiel.


Laisser un commentaire