Page en construction (Aucune des méthodes ci-dessous ne fonctionne)

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&quot;" 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