Fenêtre de zoom mobile sur plan

[paikan06]

Bonjour à tous.

Je suis actuellement en train de mettre des plans d'architecture sur un site internet.
Je cherche à implémenter une fonction, mais j'ai beaucoup de mal à la réaliser.

Je mets le plan global d'un étage en très bonne résolution sur la page Html et j'aimerais qu'au passage de la sourie sur le plan une fenêtre de zoom apparaisse et que la fenêtre de zoom puisse être déplacée avec la sourie.

L'idée me vient du site "cdiscount" qui permet de zoomer sur le produit pour voir les détails.
ex: Passez la sourie sur le lit

J'ai fait plusieurs recherches sur Google mais les solutions que j'ai trouvé permettent juste d'agrandir totalement l'image au passage de la sourie.

Si vous avez une idée ou une piste de recherche, je vous en suis très reconnaissant.
Si vous avez des questions je vous réponds avec grand plaisir.
Très bonne journée à tous.

 

[spout]

http://www.elevateweb.co.uk/image-zoom
Et plein d'autres là: http://www.tripwiremagazine.com/2012/12/jquery-image-zoom.html

 

[paikan06]

Merci énormement Spout
Je regarde de suite

 

[paikan06]

C'est parfait, ça fonctionne très bien, par contre .........

La bibliothèque jquery téléchargée pour faire fonctionner le zoom, "jquery- 1.8.3.min.js" fait sauter les autres animations de ma page.

Connaissez vous un moyen permettant d'attribuer un .js uniquement à un <div> en particulier ????

Merci beaucoup

 

[spout]

Tu dois avoir un conflit ou un selecteur trop générique ou ... ? T'as pas mis 2 fois jQuery par hasard ?

 

[paikan06]

En ce moment pour faire fonctionner les différentes animations, le site utilise :

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.diaporama.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.cycle.min.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js">

Et dès que je rajoute : jquery- 1.8.3.min.js, les animations logo ne fonctionnent plus.
Merci pour ton conseil, je vais essayer de voir si y a un conflit quelque part.

Je te souhaite un bon appétit spout :wink:

 

[polweb]

Salut,

il faut mettre jQuery.noConflict() je pense.

A plus

 

[spout]

Tu as déjà 2 fois jQuery:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

Et en plus tu essaies de mettre le 1.8.3, ça ne m'étonne pas tes problèmes ... :roll:

 

[paikan06]

Je vous remercie pour votre aide, tout fonctionne.

Effectivement ça faisait doublon, en ne mettant que 1.8.3 tout fonctionne correctement.
Je te remercie sincèrement Spout et je te souhaite une bonne continuation.