Différences

Ci-dessous, les différences entre deux révisions de la page.

--- moodle:image_zoomable [13/06/2019 09:11]
remya
+++ moodle:image_zoomable [22/01/2024 09:23] (Version actuelle)
dumontj01 ↷ Page déplacée de moodle4_nouveautes:moodle:image_zoomable à moodle:image_zoomable
@@ Ligne 1: / Ligne 1: @@
-<note warning>Page en construction
+**TESTS FONCTIONNELS**
-(Aucune des méthodes ci-dessous ne fonctionne)
-</note>
+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.
-====== Méthode 1 - librairie elevatezoom ======
+Exemple de code à insérer dans l'éditeur, en mode html:
-Testé avec succès en 2017, elle ne semble plus fonctionner.
-A l'époque nous avions fait comme ceci :
-{{:moodle:pasted:20190429-172442.png}}
-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 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:
 <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">
@@ Ligne 35: / Ligne 23: @@
 </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
-====== Méthode 2 - librairie evenZoom ======
+<code>
-Voir https://github.com/no1lov3sme/evenZoom
-J'ai essayé d'insérer le code
-<code html>
-<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() {
+$("#zoom_01").elevateZoom({
-    $("#zoomable").evenZoom();
+  zoomType				: "inner",
+  cursor: "crosshair"
 });
 </script>
 </code>
-Malheureusement, on obtient, dans la console javascript, l'avertissement :
-<code>
-Échec du chargement pour l’élément <script> dont la source est « https://raw.githubusercontent.com/no1lov3sme/evenZoom/master/dist/evenZoom.js
-</code>
-qui provoque ensuite l'erreur :
-<code>
-TypeError: $(...).evenZoom is not a function
-</code>