Un Js pour vos effets Glace à la sauce Web 2.0
Comme toujours je fais un tour sur le blog de dadou3x pour voir ce qu’il y avait d’intéressant et pour laisser un commentaire c’est là que je suis tombé sur un commentaire qui parlé d’un script js du nom de Glossy.js qui avait l’air vraiment utile surtout dans le cas ou vous n’avez pas beaucoup de temps ou que vous n’aimez pas trop le traitement des images c’est possible aussi :)
Ce script Js vous permet d’avoir un effet glace à la web 2.0, tout ce qu’il faut : image arrondie ainsi qu’un ombrage.
Donc j’ai décidé de faire un petit tutorial pour vous expliquer comment faire l’ajout et son paramétrage.
Premier partie : Ajout du Js Glossy.js dans votre site ou blog.
Téléchargez et placez le fichier Glossy.js dans votre répertoire racine par exemple, ensuite ajoutez la balise qui va faire appel à ce script entre <head> et </head> :
<script type="text/javascript" src="glossy.js"></script>
Bien sûr faites attention au paramètre “src” qui indique l’emplacement du script.
Deuxième partie : Ajout de la class à votre image pour afficher l’effet
<img src="images/example.jpg" width="300" height="202" class="glossy" />
Paramétrage du style :
Pour changer le style d’arrondi pour l’image il faut ajouter et paramétrer la valeur “iradius25″ - min=20 max=50 par défaut =25
<img src="images/example.jpg" width="300" height="202" class="glossy iradius25" />
Pour enlever l’ombrage de l’image ajoutez le valeur “noshadow”. Par défaut l’ombrage est active pour l’image.
<img src="images/example.jpg" width="300" height="202" class="glossy noshadow" /><
Dans le site officiel vous trouvez d’autre d’informations sur ce script ainsi que d’autres scripts tel que corner.js; qui va vous permettre d’appliquer d’autres effets sur vos images.
N’hésitez pas à me laisser des commentaires après vos essais.
10 commentaires, commentaire ou Trackback
Thomas Desfossez
Bah ça marche niquel depuis 5 mois :D
En tout cas, malgré qu’il soit assez lourd, c’est très joli. De mon côté je vais essayer de changer le script pour faire des variantes…
29 août 2007
MedBlog
Salut thomas
Je l’avais déjà remarqué sur ton blog :); le tuto a été fait pour aider et faciliter l’intégration de l’effet; donne moi des nouvelle des Maj que tu vas apporter si tu veux bien sûre :) Merci pour ta petite visite. :D
29 août 2007
Thomas Desfossez
Tes articles sont tous très intéressants, je ne manquerais pas de repasser.
J’ai fais quelques test pour modifier le script et j’en suis arrivé a la conclusion…que c’est niquel, en fait j’ai testé plusieurs truc (changer les couleurs de dégradé, la taille des bordures) mais je trouvais le résultat moins beau que l’original…
En attendant jte repasse le lien vers un script que j’avais fais il y a peu pour pouvoir profiter chaque jour d’une vignette de BD sur la page google.
C’est un peu compliqué mais le final est vraiment sympa. :D
http://www.calingratuit.be/TDBlog/?p=214
29 août 2007
dadou3x
oh lala, mehdi le blogueur plus rapide que son ambre, j’aurais qu’à faire un lient sur ton excellent article, j’hésite encore à l’intégrer à mon blog parce que comme l’a signalé Thomas c’est assez lourd à charger mais si beau à voir.
30 août 2007
MedBlog
lol dadou3x, je ne pense pas l’ajouté au blog surtout que mon design ne s’adapte pas trop a cet effet, cetté surtout pour aider :)
30 août 2007
daria
C’est marrantq ue je retrouve Thomas dans les commentaires…car ce script Glossy me faisait penser à son blog…merci pour ce billet :)
26 septembre 2007
Répondre á “Un Js pour vos effets Glace à la sauce Web 2.0”