Description: Ce script vous permet d’agrandir une partie d’une image en déplaçant votre souris dessus. Une zone de loupe apparaît à côté de l’image à afficher et l’image est agrandie sur demande. L’utilisateur peut effectué des niveaux de zoom différents en utilisant la molette de la souris
Ajoutez le code ci-dessous dans la section <head> de votre page:
|
1 2 3 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="js/zoom.js"></script> |
Insérez le code ci-dessous dans la section <body> de votre page
|
1 |
<p><img id="image1" src="thumbchat.jpg" style="width: 486px; height: 324px" alt="image" /></p> |
Ajoutez le code javascript ci-dessous dans la section <head> de votre page:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> jQuery(document).ready(function($){ $('#image1').addimagezoom({ // single image zoom zoomrange: [3, 10], magnifiersize: [225,225], magnifierpos: 'right', cursorshade: true, largeimage: 'image/chat.jpg' //<-- No comma after last option! }) }) </script> |
Ajoutez le code css ci-dessous dans la section <body> de votre page:
|
1 2 3 4 5 6 7 8 9 10 |
.magnifyarea { box-shadow: 0px 0px 8px rgba(255,255,255,0.5); -webkit-box-shadow: 0px 0px 8px rgba(255,255,255,0.5); -moz-box-shadow: 0px 0px 8px rgba(255,255,255,0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true); background: white; } |
Ou bien copier la ligne ci-dessous dans la section <head> de votre page:
|
1 |
<link rel="stylesheet" href="css/zoom.css" type="text/css" /> |
David LAURENT
Bonjour,
Etant novice en la matière je me permet de vous poser une petite question, je m’explique; J’arrive à implémenter le script mais j’ai un problème avec la box de zoom. Sur certaine page la composition me permet de la voir apparaître correctement, mais tantôt sur d’autres faute de « place », c’est la débandade, j’en vois un bout et ce quand j’ai de la chance. Il y aurait pas un moyen de faire suivre la box au niveau de la souris comme ça peut se voir sur certain site de vente ?
Cordialement.
Commentaire by Tétraèdre — 29 mai 2014 à 17 h 49 min
Bonjour,
Ce serait plus dans ce style là ?
http://bbcode.fr/viewtopic.php?f=14&t=32&sid=75638b53494e33b9d0a83de8a3a0b13a
Commentaire by administrateur — 30 mai 2014 à 16 h 48 min
Bonjour,
Je ne le voyais pas comme ça, mais oui au final ça serait plus efficace. Mais je suis incapable de réaliser par moi même un tel script…
Commentaire by Tétraèdre — 31 mai 2014 à 11 h 50 min
Bonsoir,
Sur cette page, le fichier zippé. (http://webinnov.fr//blog/news/2013-05-17/Zoom_Survol/index.htm)
J’espère que cela pourra vous convenir
Bonne soirée
Commentaire by administrateur — 31 mai 2014 à 17 h 40 min
Merci beaucoup pour votre coup de pouce !
Bonne soirée.
Commentaire by Tétraèdre — 12 juin 2014 à 17 h 26 min