JQuery – le Plugin maxImage

Voici un plugin JQuery qui va vous permettre d’adapter vos images.

En effet, ce plugin vous permet de redimensionner des images ciblées avec une largeur max selon le navigateur utilisé, leur ratio, et quelques caractéristiques simples.

Chaque fois qu’un utilisateur redimensionne le navigateur, les images seront redimensionnées en conséquence, tout en conservant leur ratio. Les images peuvent être redimensionnées en fonction de la largeur seulement, la hauteur seulement, ou les deux. il y a également la possibilité de faire de votre image, une image de fond. Le plugin trouve la largeur de votre navigateur et le ratio de votre image et vous les redimensionne en conséquence. Un effet de diaporama est aussi possible avec quelques ajustements, ce qui peut vous permettre de faire un fond d’écran qui change toutes les X secondes.

maxImage plugin JQUERY

maxImage plugin JQUERY

Pour l’utiliser, exemple :

[pastacode lang= »markup » manual= »%3C!–%20Le%20code%20de%20base%20dans%20la%20page%20–%3E%0A%3Cimg%20class%3D%22bgmaximage%22%20src%3D%22bg_tester.jpg%22%20alt%3D%22image%22%20%2F%3E » message= » » highlight= » » provider= »manual »/]

 

[pastacode lang= »javascript » manual= »%3C!–%20Le%20code%20JQuery%20–%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%0A%24(document).ready(function()%7B%0A%0A%20%20%20%20%24(‘img.bgmaximage’).maxImage(%7B%0A%20%20%20%20%20%20%20%20isBackground%3A%20true%2C%0A%20%20%20%20%20%20%20%20verticalAlign%3A%20’top’%2C%0A%20%20%20%20%20%20%20%20zIndex%3A%20-10%0A%20%20%20%20%7D)%3B%0A%0A%7D)%3B%0A%0A%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

 

voici une démo ici.
Pour le télécharger ici et ici.

Author: Franck Pertegas

Share This Post On

Trackbacks/Pingbacks

  1. jQuery – 20 plugin jQuery à retenir | LudiBlog - [...] Je vous en parle ici Un plugin qui permet de redimensionner des images ciblées avec une largeur max selon…

Submit a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *