| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| moodle:image_zoomable [29/04/2019 15:35] – [Méthode 1 - librairie] cadiou | moodle:image_zoomable [12/03/2026 18:51] (Version actuelle) – modification externe 127.0.0.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"" alt="small" width="600" height="800"> |
| | |
| <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.3.min.js"></script> | <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 src="https://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js" type="text/javascript"></script> |
| | |
| <script type="text/javascript"> | <script type="text/javascript"> |
| $("#zoom_01").elevateZoom({ | $("#zoom_01").elevateZoom({ |
| </script> | </script> |
| </code> | </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> | <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"> | <script type="text/javascript"> |
| $(function() { | $("#zoom_01").elevateZoom({ |
| $("#zoomable").evenZoom(); | zoomType : "inner", |
| | cursor: "crosshair" |
| }); | }); |
| </script> | </script> |
| |
| </code> | </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> | |
| |