Ceci est une ancienne révision du document !
Méthode 1 - librairie elevatezoom
Testé avec succès en 2017, elle ne semble plus fonctionner.
A l'époque nous avions fait comme ceci :
TESTS FONCTIONNELS
Le code suivant fonctionne;
Il faut préparer 2 images: une petite (celle que l'on va voir en premier et une tres grande.). Sur mon test une image en 600×800 et une en 1920X Ensuite les installer sur Moodle (dans un dossier, télécharger les images et “rendre disponible” le dossier pour le cacher sur la page de cours) puis récupérer leurs url. Exemple de code à insérer dans l'éditeur, en mode html:
<img id="zoom_01" src="https://ecampus.unicaen.fr/draftfile.php/5/user/draft/977736952/ombelle-petite.jpg" data-zoom-image="https://ecampus.unicaen.fr/draftfile.php/5/user/draft/977736952/ombelle-grande.jpg"" alt="small" width="600" height="800"> <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.3.min.js"></script> <script src="https://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#zoom_01").elevateZoom({ zoomType: "lens", lensShape: "round", containLensZoom: true, lensSize: 200 }); </script>
Méthode 2 - librairie evenZoom
Voir https://github.com/no1lov3sme/evenZoom
J'ai essayé d'insérer le code
<script type="text/javascript" src="https://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="text/javascript" src="https://raw.githubusercontent.com/no1lov3sme/evenZoom/master/dist/evenZoom.js"></script> <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/no1lov3sme/evenZoom/master/dist/evenZoom.css"/> <div id="zoomable" data-zoomed="https://lecampus-pp.unicaen.fr/draftfile.php/34464/user/draft/627711177/essai_large.png"> <img src="https://lecampus-pp.unicaen.fr/draftfile.php/34464/user/draft/627711177/essai_small.png" alt="Example" /> </div> <script type="text/javascript"> $(function() { $("#zoomable").evenZoom(); }); </script>
Malheureusement, on obtient, dans la console javascript, l'avertissement :
Échec du chargement pour l’élément <script> dont la source est « https://raw.githubusercontent.com/no1lov3sme/evenZoom/master/dist/evenZoom.js
qui provoque ensuite l'erreur :
TypeError: $(...).evenZoom is not a function