Ceci est une ancienne révision du document !

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>

Plusieurs exemple de scripts en fonctions du type de zoom: https://www.elevateweb.co.uk/image-zoom/examples/.

Le code suivant a été testé et fonctionne parfaitement

<script type="text/javascript">
$("#zoom_01").elevateZoom({
  zoomType				: "inner",
  cursor: "crosshair"
});
</script>