Différences

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

--- moodle:image_zoomable [29/04/2019 17:35]
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 elevatezoom ======
+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 '<'
-</code>
-====== Méthode 2 - librairie evenZoom ======
-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>