Différences

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

--- moodle:image_zoomable [29/04/2019 17:29]
cadiou [Méthode 1 - librairie]
+++ 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 fonctionne)
-</note>
-====== Méthode 1 - librairie ======
+Le code suivant fonctionne.
-Testé avec succès en 2017, elle ne semble plus fonctionner.
+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.
-A l'époque nous avions fait comme ceci :
+Exemple de code à insérer dans l'éditeur, en mode html:
-{{:moodle:pasted:20190429-172442.png}}
-J'ai réessayé en insérant le code :
-<code html>
-<img id="zoom_01" src="https://lecampus-pp.unicaen.fr/draftfile.php/34464/user/draft/749086954/essai_small.png" data-zoom-image="https://lecampus-pp.unicaen.fr/draftfile.php/34464/user/draft/749086954/essai_large.png" alt="small" width="1169" height="333">
+<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({
@@ Ligne 27: / Ligne 23: @@
 </script>
 </code>
+Plusieurs exemples de scripts en fonctions du type de zoom:
+[[https://www.elevateweb.co.uk/image-zoom/examples/]].
-Malheureusement dans la console javascript j'obtiens le message :
+Le code suivant a été testé et fonctionne parfaitement
 <code>
-SyntaxError: expected expression, got '<'
+<script type="text/javascript">
+$("#zoom_01").elevateZoom({
+  zoomType				: "inner",
+  cursor: "crosshair"
+});
+</script>
 </code>