Image zoomable provenant d’un champ #EXTRA

Comment insérer une image zoomable appelée par un champ #Extra
Attention : le zoom ne fonctionne pas avec IE

Lorsque je me suis attaqué à mon site Guide Méditerranée, je suis passé par nombre de sites sur les CSS.

Et j’ai trouvé les codes de style CSS pour zoomer une image. Pour cela, on affiche une image réduite en permanence, qui s’agrandit à ses dimensions normales lorsque la souris passe dessus. C’est magique !

Or, mes images à moi provenaient d’un champ #Extra, qui ne permet pas l’application des fonctions reduire_image et autres. De plus, toutes les images que je veux placer n’ont pas la même dimension.

Il a donc fallu écrire un peu de php pour récupérer tout cela.

-  Attention :
1) je ne suis pas un expert en php, si bienque le code doit pouvoir s’améliorer.

2) le zoom tel qu’il est présenté ici ne fonctionne pas avec IE. Il faut une adaptation un peu différente dans son application, et surtout un fichier « image » qui contient les
2 images : la petite et la grande.

Voir à ce propos http://mammouthland.free.fr/cours/css/cours8.php

Explication du code

Le principe est assez simple. Il faut récupérer les infos qu’envoie SPIP lorsqu’il extrait le champ #EXTRA, qui ne comporte que l’indication <img20|center>.

  • On commence donc par extraire le nom de l’image, puis ses valeurs de largeur et de hauteur grâce à la commande php explode.
  • Puis on stocke ces valeurs.
  • On applique un facteur de zoom (c’est-à-dire de réduction) à ces dimensions.
  • on insère les commandes de style
  • on affiche l’image

Je pense avoir commenté suffisamment le code nécessaire. Mais n’hésitez pas à me contacter pour de plus amples informations.

Et pour voir comment ça se passe, allez à http://guidemediterranee.free.fr/ar...

<!-- Code pour zoom de l'image -->
 // extraction du nom de l'image 
<?php $extra="[(#EXTRA|plan)]" ;
$nomimg=explode("src='",$extra);
$nomimg2=explode("' border=0",$nomimg[1]);

 // extraction de la largeur de l'image 
$largimg=explode("width='",$extra);
$largimg2=explode("'",$largimg[1]);

 // extraction de la hauteur de l'image 
$hautimg=explode("height='",$extra);
$hautimg2=explode("'",$hautimg[1]);

 // on stocke ces valeurs de largeur et hauteur 
$largimgorg=$largimg2[0] ;
$hautimgorg=$hautimg2[0] ;

// on applique un facteur de réduction (ici 63%)
$largimg=$largimgorg*0.63 ;
$hautimg=$hautimgorg*0.63 ;

// on appelle le code de style CSS en y introduisant les variables cazlculées précédemment à la place des dimensions de l'image

$stylezoom="<style type='text/css'>
.zoom {height:" . "$hautimgorg" ."px;}
.zoom p {text-align:center;}
.zoom img {width:" . "$largimg" . "px;height:" . "$hautimg" . "px;}
.zoom img:hover {width:" . "$largimgorg" . "px;height:" . "$hautimgorg" . "px;}
</style>";

// echo sert à pouvoir utiliser le style dans la page
echo $stylezoom ;

// on crée la variable contenant le code d'affichage total de l'image

$imgz="<div class='zoom'><p>
<img src='"."$nomimg2[0]"."' border=0 width='"."$largimg"."' height='"."$hautimg"."'
align='center' hspace='5' vspace='3'></p></div>";

// et echo pour afficher l'image
echo $imgz ;
?>
<!-- Fin code pour zoom de l'image -->

Discussion

Aucune discussion

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 26 octobre 2004