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 :

Exemple de rendu du plugin shadowise

Changelog

  • v1.0 du 15/03/2009 :
    • Les balises rajoutées autour de l'images sont maintenant des span avec l'attribut display mis à inline-block pour 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
  • 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.log qui 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...