Encadrer ses photos avec Jquery

WebDesignWall propose une jolie façon d'encadrer ses photos ou de leur rajouter des éléments grâce au CSS : la solution idéale pour ceux qui n'ont pas de logiciel sophistiqué de dessin ou de talent particulier.

Un exemple :

La méthode sans javascript et avec des <span> ne fonctionne pas avec mon éditeur : il les fait sauter. Je dois donc utiliser le fichier javascript Jquery.

Première étape :

Il vous faut la photo et son accessoire (punaise, encadrement...).

Si vous en cherchez, vous en trouverez de toutes façons en cliquant sur Download Demo ZIP (bon à savoir : je suis arrivée immédiatement à le sauvegarder avec IE7, quand ça ramait avec FireFox)

Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire vers.

Pour mon exemple, je choisis :

cette photo : http://ddata.over-blog.com/xxxyyy/0/37/17/67/DecorativeGallery/12.jpg



et cette punaise : http://ddata.over-blog.com/xxxyyy/0/37/17/67/DecorativeGallery/pin.png



Deuxième étape :

Dans l'administration de votre blog - Mes Documents - Autres Fichiers :

• créez un répertoire nommé DecoGallery
  
  
  
  
  
  • vous y enregistrez le fichier jquery.js (il fait partie du fichier .zip que vous avez enregistré)
    
  • notez son adresse
    

Troisième étape :

En HTML, collez

<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/DecorativeGallery/jquery.js"></script><script type="text/javascript">
$(document).ready(function(){
  //prepend span tag
  $(".photo a").prepend("<span></span>");
});
</script>

Vous modifiez l'adresse en rouge par votre propre adresse : vous l'avez noté à la deuxième étape

puis

<style type="text/css">
.photo {margin:30px;position:relative;width:180px;height:130px;}
.photo a {text-decoration: none;}
.photo span {width:28px;height:21px;display:block;position:absolute;top:-12px;left:90px;
background:url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/DecorativeGallery/pin.png) no-repeat;}
</style>

Vous remarquez qu'en vert, il s'agit de l'URL de ma punaise. Remplacez par l'URL de votre décoration.

Enfin, l'image principale

<div class="photo">
<a href="#">
<img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/DecorativeGallery/12.jpg" />
</a>
</div>

En bleu, l'URL de l'image.
En orange, le mot (qui représente la class) doit être le même que dans le pavé précédent

Recommandations :

Si vous placez plusieurs images décorées différemment dans la même page du blog, pensez à changer le nom de la classe (qui est photo dans mon exemple)

WebdesignerWall propose plusieurs types de décoration : à chaque fois, il faudra personnaliser la partie CSS. Le mieux est de cliquer sur demo et ensuite de regarder la source pour s'en inspirer.