moodle:image_zoomable [CEMU]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.

**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 600x800 et une en 1920x1080.
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: 

<code>
<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>
</code>
Plusieurs exemples 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
<code>
<script type="text/javascript">
$("#zoom_01").elevateZoom({
  zoomType				: "inner",
  cursor: "crosshair"
});
</script>
</code>