Description

Effet de loupe sur une image, avec un cadre en fondu.

Documentation

Pour utiliser l'objet MooLoupe il faut inclure dans sa page la bibliothèque mooTools et le présent script :

<script type="text/javascript" src="mooTools.js"></script>
<script type="text/javascript" src="mooLoupe.js"></script>

Ensuite, dans votre page web, il faut instancier sur un élément cible l'objet mooTooltip via l'évènement domready :

var elt = $('monimage');
new MooLoupe(elt, { options });

Voici la liste exhaustive des options possibles :

• width: Largeur de la zone affichée,
• height: Hauteur de la zone affichée,
• iniLeft: Position initiale de l'image dans la zone affichée (margin-top),
• iniTop: Position initiale de l'image dans la zone affichée (margin-left),
• zoom: Valeur du zoom lorsque la souris entre dans la zone affichée.

Attention ! La taille de l'image utilisée sera celle définie en HTML. Le zoom est défini par rapport à cette taille initiale.

Démonstration

<script type="text/javascript" src="demos/mooLoupe/mooLoupe.js"></script>

<script type="text/javascript">
window.addEvent('domready', function() {
  new MooLoupe($('photo'), { width: 750, zoom: 2.5 });
});
</script>

<img id="photo" src="demos/mooLoupe/photo.jpg" style="height: 422px; width: 750px;" alt="photo" />

Notes de version

Prérequis : mooTools v1.2.x - Site officiel

• v0.2 : Correction zoom à l'entrée dans le div le margin est calculé en fonction de la position de la souris. Raccourcissement de la durée de l'effet de zoom.
• v0.1 : Premier jet de la classe : une ressource graphique en dur, ajout options de base (hauteur, largeur, position initiale, niveau de zoom).

Bugs connus

Aucun bug connu pour ce projet...

Licence

Cette source est diffusée en open source sous la licence MIT, ce qui signifie que vous avez la possibilité de l'utiliser et la modifier en toute circonstance.

Téléchargement

mooLoupe v0.2.rar

Commentaires

Ajouter un commentaire

Votre nom
Votre message