moodle:image_zoomable

Ceci est une ancienne révision du document !


Page en construction (Aucune des méthodes ci-dessous ne fonctionne)

Méthode 1 - librairie elevatezoom

Testé avec succès en 2017, elle ne semble plus fonctionner.

A l'époque nous avions fait comme ceci :

J'ai réessayé en insérant le code :

<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">
 
<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>

Malheureusement dans la console javascript j'obtiens le message :

SyntaxError: expected expression, got '<'

Méthode 2 - librairie evenZoom

Voir https://github.com/no1lov3sme/evenZoom

J'ai essayé d'insérer le code

<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() {
    $("#zoomable").evenZoom();
});
</script>

Malheureusement, on obtient, dans la console javascript, l'avertissement :

Échec du chargement pour l’élément <script> dont la source est « https://raw.githubusercontent.com/no1lov3sme/evenZoom/master/dist/evenZoom.js

qui provoque ensuite l'erreur :

TypeError: $(...).evenZoom is not a function
  • moodle/image_zoomable.1556552153.txt.gz
  • Dernière modification: il y a 5 ans
  • (modification externe)