lundi 26 janvier 2009
Shadowise : mon premier plugin Jquery
| 23:38 | 4 commentaires | Aucun rétrolien |
C'est Bastien qui m'a parlé de jQuery, et en juste retour des choses, c'est pour son blog (en cours de peinture) que j'ai créé mon premier plugin pour ce fabuleux framework javascript.
Shadowise permet d'ajouter une ombre, ou plutôt 4, derrière une image. Pourquoi 4, tout simplement parce que l'effet recherché est le suivant :
Changelog
- v1.0 du 15/03/2009 :
- Les balises rajoutées autour de l'images sont maintenant des
spanavec l'attributdisplaymis àinline-blockpour améliorer la compatibilité avec les différentes mises en pages possibles de l'image. - Un CSS pour les thèmes graphiques sombres a été ajouté
shadowise_dark.css
- Les balises rajoutées autour de l'images sont maintenant des
- v0.95 du 29/01/2009 : le chargement est maintenant déterminer grâce à l'attribut 'complete'... Les images chargée depuis le cache ou depuis internet sont bien 'shadowisées'
- v0.94 du 29/01/2009 : correction d'un bug : l'ombrage des images chargées depuis le cache ne fonctionnait pas correctement.
- v0.9 du 27/01/2009 : Surpression d'un
console.logqui empêchait le fonctionnement du plugin sauf avec Mozilla Firefox équipé de Firebug
Fonctionnement
Le plugin fonctionne sans problèmes avec jQuery version 1.2 et supérieure.
Décompressez l'archive shadowise dans le répertoire de votre choix sur votre serveur web. Dans l'exemple, je vais l'extraire dans le répertoire js.
Pour utiliser shadowise, il suffit d'ajouter jquery, le fichier du plugin jquery.shadowise.js mais aussi le fichier css shadowise.css dans le <head></head> de votre fichier XHTML comme ci dessous :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.shadowise.js"></script> <style type="text/css" media="screen">@import url(js/shadowise/css/shadowise.css);</style>
Si le thème graphique de votre site / blog est sombre, il faut alors utiliser le css shadowize_dark.css, les balises à rajouter dans la section <head></head>
sont alors :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.shadowise.js"></script> <style type="text/css" media="screen">@import url(js/shadowise/css/shadowise_dark.css);</style>
Et enfin, toujours dans la section <head></head> de votre fichier (X)HTML, à la suite des lignes ci-dessus :
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() { $("#content .post img").shadowise(); });
//]]>
</script>
Toute les images contenu dans #content .post seront alors ombrées.
Les entrailles du script.
Le script attends tout d'abord le chargement de l'élément à ombrer. Si ta taille de l'image est trop petite la classe css tooShort-sw est appliquée. Si la taille est plus grand mais en dessous d'une valeurs moyenne, alors deux coins opposées de l'image sont ombré. Enfin, si l'image est plus grande que la valeur moyenne, les 4 coins sont ombrés.
Dans les deux derniers cas, le script entoure l'image de deux ou quatre <div></div> (en fonction du nombre de coins ombrés), la classe css image-sw est appliquée, et la classe layout-sw est appliquée sur le dernier <div></div>.
Le plugin
Il est téléchargeable ici, sous licence GPL 2.0. Ce script est fait à l'origine pour un blog Dotclear 2.0, il devrait fonctionner sur d'autres C.M.S comme Wordpress, Spip, Joomla... Je suis ouvert à tout commentaires, remarques, problèmes, rapport de bug...
