Exemple d'agrandissement
d'une photo
avec la bibliothèque jquery
Source : http://www.cabel.name/2008/02/fancyzoom-10.html
Exemple de page web :
Comment faire ?
Si autre web que celui du SCIMLEC : bibliothèque téléchargeable à :
Cette bibliothèque a été installée sur le serveur du SCIMEC dans le répertoire :
/plugins/FancyZoom 1.1/
Exemple de code source pour cette page :
En bleu : l'appel de la bibliothèque d'agrandissement d'une image :
Les balises <!-- et --> sont des commentaires qui ne sont pas obligatoires ni ne sont affichés par le navigateur.
--------------------------------- code html ---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Agrandissement photos</title>
<!-- commentaires :
plugins agrandissement phpto "FancyZoom"
http://www.cabel.name/2008/02/fancyzoom-10.html
exemple : http://www.infodoc.flsh.uha.fr/microsites_libres/page_agrandissement_photo.html
-->
<!-- bibliothèque FancyZoom 1.1.zip (53 KB)
téléchargeable à : http://www.cabel.name/files/FancyZoom_1.1.zip
qui est installée dans /plugins/FancyZoom_1.1/ -->
<script src="/plugins/FancyZoom_1.1/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/plugins/FancyZoom_1.1/js-global/FancyZoomHTML.js" type="text/javascript"></script>
<!- fin biblothèque -->
</head>
<!-- on appelle la fonction setupZoom() -->
<body id="whatever" onload="setupZoom()">
<h1 style="text-align: center;">
Exemple d'agrandissement d'une photo <br>
avec la bibliothèque jquery</h1>
Exemple de page web :<br>
<br>
<div style="text-align: center;">
<a href="images/groupe_800x600px.jpg" title="Photo agrandie" alt="Photo agrandie">
<img title="Photo réduite" alt="Photo réduite"
style="border: 0px solid ; width: 100px; height: 75px;"
src="images/groupe_100x125px.jpg"></a>
</div>
</body>
</html>
-------------------------------- fin code html -------------------------
