moodle:image_zoomable

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 1920×1080. 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 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

<script type="text/javascript">
$("#zoom_01").elevateZoom({
  zoomType				: "inner",
  cursor: "crosshair"
});
</script>
  • moodle/image_zoomable.txt
  • Dernière modification: il y a 2 mois
  • de dumontj01