Le javascript offert par http://valid.tjp.hu/zoom/ permet de facilement ajouter une loupe sur une image [1].
En ajoutant un simple script, on voit apparaitre sur son image une petite boîte qui offre un agrandissement localisé. Avec 4 raccourcis clavier pour personnaliser la loupe :
- droite et gauche changent la taille de la loupe,
- haut et bas changent le niveau d’agrandissement.
Encore mieux, on peut utiliser une image de plus forte résolution pour l’agrandissement, mais laisser une petite vignette pour l’image de base.
On va donner ici un code qui permet d’utiliser ce script en combinaison avec le système de vignettes de SPIP. Ce code pourra alors être utilisé avec n’importe quelle boucle de galerie pour afficher vos photos avec un petit plus.
Il faut tout d’abord insérer le code javascript dans l’entète de votre page, remplacez :
<head>par :
<script type="text/javascript" src="http://valid.tjp.hu/zoom/tjpzoom.js"></script>
</head>Ensuite, là où normalement, dans votre boucle de galerie, vous trouvez #LOGO_DOCUMENT, ou tout autre insertion de l’image, mettez :
[<div style="float:left"
onmouseover="zoom_on(event,[(#FICHIER|reduire_image{200}|largeur)],[(#FICHIER|reduire_image{200}|hauteur)],'[(#FICHIER|reduire_image{200}|extraire_attribut{src})]', '#URL_DOCUMENT');"
onmousemove="zoom_move(event);"
onmouseout="zoom_off();">
(#FICHIER|reduire_image{200}|inserer_attribut{'alt',#TITRE})
</div>
<div style="clear:both;"></div>]Avec ce code, on crée des vignettes de 200px maximum de côté, mais vous pouvez ajuster cette taille.
Par exemple, pour afficher 5 vignettes au hazard :
<BOUCLE_doc(DOCUMENTS) {par hasard} {extension=jpg} {0,5} {mode=document} {"<hr>"}>
[<div style="float:left" onmouseover="zoom_on(event,[(#FICHIER|reduire_image{200}|largeur)],[(#FICHIER|reduire_image{200}|hauteur)],'[(#FICHIER|reduire_image{200}|extraire_attribut{src})]', '#URL_DOCUMENT');" onmousemove="zoom_move(event);" onmouseout="zoom_off();">
(#FICHIER|reduire_image{200}|inserer_attribut{'alt',#TITRE})
</div>
<div style="clear:both;"></div>]
</BOUCLE_doc>
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires :
|
