Améliorez la présentation des images de votre blog avec des scripts
Publié le vendredi 26 octobre 2007, 12:44 - modifié le 26/10/07 - Webdesign - Lien permanent
Pour améliorer la qualité de présentation des images d'un blog il existe plusieurs solution techniques via des scripts qui permettent d'éviter de trop passer de temps sur Photoshop ou Gimp
swfIR : swf Image Replacement
Magnifique solution qui vous permet au choix d'appliquer une ou plusieurs effets à vos images :
- ajouter une ombre
- rajouter un cadre blanc
- incliner l'image
- arrondir les coins
C'est la solution la plus élégante que j'ai trouvée et qui en plus est très facile à implémenter dans votre blog
Voici un exemple :
Insérez le code appellant le javascript dans votre head
[html4strict] <script type="text/javascript" src="swfir.js"><script>
Puis pour ajouter l'effet ou les effets voulus à vous de modifier le code ci dessous qui est a ajouter ente <body> et </body>
[html4strict]
<script type="text/javascript">
window.onload = function(){
sir = new swfir();
sir.specify("border-width", "20");
sir.specify("border-radius", "15");
sir.specify("border-color", "fff");
sir .specify("rotate","-5");
sir.specify("shadow-blur", "15");
sir.specify("background-color", "9dcee0");
sir.swap("img");
}
</script>
Vous pouvez faire appliquer ce style sur un id en remplaçant la dernière ligne du script ci-dessus par
[html4strict]
sir.swap("#bloc img");
Ou alors sur une class uniquement en le remplaçant cette fois ci par :
[html4strict]
sir.swap(".bloc img");
Screenshots (les images sont rangées dans l'ordre de présentation des effets) :
Cliquez pour voir en grand
Mais vous pouvez aussi :
- rendre une image élastique : voir ici
- appliquer des effets différents sur des images différentes sur une même page : voir ici
CVI projects
CVI projects nous a concocté un certains nombre de scripts afin de réaliser les effets voulu :
- curl.js qui vous permettra de lever le coin en bas à gauche de vos images
- reflex.js qui ajoute un reflet à vos images
- edge.js qui adouci les contours de vos images
- corner.js qui arrondis les coins de vos images
- glossy.js, l'effet web2.0 sur vos images
- instant.js qui donne l'apparence de photoq encadréeq et inclinéeq
- slided.js qui présente vos photos dans un cadre de style diapositive
- filmed.js qui présente vos photos cette fois ci à la manière d'une bande de film
- loupe.js qui ajoute une loupe et un agrandissement sur une partie de vos photos
Screenshots (les images sont rangées dans l'ordre de présentation des effets) :
Cliquez pour voir en grand
Pour aller plus loin
Voic une liste d'article parlant de swfIR :
-
Jean-Marie · 26 octobre 2007, 13:37
-
C'est du tip top tout ça, faudrait que je vois tout ça dès que j'ai du temps, merci en tout cas pour les liens ...
-
Tomtom · 26 octobre 2007, 14:46
-
Pas mal du tout ça!
Le seul problème, c'est qu'à force de rajouter plein de script (javascript en particulier), les pages deviennent rapidement lourdes à charger....
-
Guillaume · 26 octobre 2007, 14:49
-
Oui c'est clair il faut bien choisir ses scripts et les utiliser avec parcimonie
-
freak0 · 26 octobre 2007, 19:02
-
N'oubliez pas qu'il est possible de réduire la taille des fichiers jscript et css grâce à des logiciels/web-services qui virent tous les commentaires, espaces, et retour à la ligne inutiles entre autre.
De plus le cache navigateur permet de compenser largement ce problème passé la première page.
Dernier conseil : ne faire charger par le navigateur que le stricte nécessaire en fichier externe.
-
-
Mais oui que c'est pas mal du tout ça !! Mais je ne dit en aucunes façon qu'il faut en mettre une tonne ?? Comme le dit si bien Guillaume "avec parcimonie" et moi, je rajouterais, à bon escient, par contre la lecture du com de Freak0 me parait des plus intéressant ...
-
Podipoda · 26 octobre 2007, 19:39
-
Merci à toi pour ces infos, mais bon, d'accord avec TomTom, rajouter, rajouter, et encore rajouter des scripts, c'est le flinguage du load à l'arrivée, ..... je vais 10 fois + vite dans Photoshop ( ou Gimp, ou autre .. )et je ne surcharge pas ma page de scripts " bouffeurs " ... et aussi, je pense aussi à des amis qui ne comprennent rien à "Insérez le code appellant le javascript dans votre head "
et qui veulent juste mettre une photo sur leur blog .. -
-
Bien dit Podipoda!
-
Urbs · 20 février 2008, 23:57
-
Bonjour, tout d'abord un grand bravo à votre site ! Il est très clair, bien rédigé avec un contenu intéressant.
Je voulais savoir comment installer ces scripts et également où avez vous trouvé de si beau smileys ?
Cordialement
