CropZoom – Plugin jQuery – La manipulation d’image avec jQuery
Vous cherchez le moyen de donner la possibilité aux utilisateurs de votre site de sélectionner qu’une partie d’image, de recadrer leurs photos ou de repositionner leur avatar ? Pour cela CropZoom peut vous être très utile, c’est un plugin jQuery vraiment intéressant et prometteur.
Vous allez pouvoir :
– Recadrer une image
– Découper, zoomer ou faire pivoter cette dernière
Voici comment s’implémente le script :
[pastacode lang= »markup » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery-1.3.2.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery-ui-1.7.2.custom.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery.cropzoom.js%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]
On s’aperçoit qu’il faut utiliser ui de jquery et que pour l’instant on reste sur une version 1.3.x de jquery. Mais la dernière mise à jour étant toute récente on peut s’attendre à une évolution vers une 1.4.x de jquery prochainement.
Voici un exemple d’appel du plugin :
[pastacode lang= »javascript » manual= »%24(document).ready(function()%7B%0Avar%20cropzoom%20%3D%20%24(‘%23crop_container’).cropzoom(%7B%0Awidth%3A640%2C%0Aheight%3A480%2C%0AbgColor%3A%20’%23CCC’%2C%0AenableRotation%3Atrue%2C%0AenableZoom%3Atrue%2C%0Aselector%3A%7B%0Ax%3A0%2C%0Ay%3A0%2C%0Aw%3A200%2C%0Ah%3A100%2C%0AaspcetRatio%3Afalse%2C%0Acentered%3Atrue%2C%0AborderColor%3A’blue’%2C%0AborderColorHover%3A’yellow’%2C%0AbgInfoLayer%3A%20’%23FFF’%2C%0AinfoFontSize%3A%2010%2C%0AinfoFontColor%3A%20’blue’%2C%0AshowPositionsOnDrag%3A%20true%2C%0AshowDimetionsOnDrag%3A%20true%2C%0AmaxHeight%3A%20null%2C%0AmaxWidth%3A%20null%0A%7D%2C%0Aimage%3A%7B%0Asource%3A’xray-linux.jpg’%2C%0Awidth%3A1920%2C%0Aheight%3A1450%2C%0AminZoom%3A30%2C%0AmaxZoom%3A100%2C%0Arotation%3A0%0A%7D%0A%7D)%3B%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]
Il existe beaucoup d’options, comme vous pouvez le remarquer. Je vous laisse lire le tableau récapitulatif à cette page, qui est très bien fait et précis sur les diverses options.
Vous pouvez visionner une démo sur la page d’accueil du site du plugin, ça donne pleins d’idées (d’implémentation de code bien sûr) 🙂
Site du plugin : http://www.cropzoom.com.ar
UI jQuery : http://jqueryui.com/
6 avril 2010
impressionnant !!!!!!!!!!!
6 avril 2010
Salut Willzgui,
Tu parles des filles sur l’image ou du plugin ?? :p