Afficher image selon référence en Javascript
Résolu
Bonjour,
Je suis en train de réaliser un slider de 360° avec un plugin (du nom de "reel plugin") et de JQuery. A côté de cette élément je souhaite faire une loupe qui sert à zoomer dans l'image que l'utilisateur regarde.
Le slider fonctionne très bien pas de problèmes. Mais j'ai de la peine à faire correspondre la bonne image à la bonne vue pour le zoom.
Je souhaiterai qu'à chaque image affichée, le zoom soit synchro (sur la même vue). Comment faire pour prendre la référence de l'image affichée sur le 360° et de faire changer interactivement le zoom avec cette dernière.
J'espère avoir été assez clair.
Voici une partie de mon code:
Merci pour vos réponses.
Je suis en train de réaliser un slider de 360° avec un plugin (du nom de "reel plugin") et de JQuery. A côté de cette élément je souhaite faire une loupe qui sert à zoomer dans l'image que l'utilisateur regarde.
Le slider fonctionne très bien pas de problèmes. Mais j'ai de la peine à faire correspondre la bonne image à la bonne vue pour le zoom.
Je souhaiterai qu'à chaque image affichée, le zoom soit synchro (sur la même vue). Comment faire pour prendre la référence de l'image affichée sur le 360° et de faire changer interactivement le zoom avec cette dernière.
J'espère avoir été assez clair.
Voici une partie de mon code:
$('.img32').reel({ // 360 de 32 images
frame: 1, // Debut du 360
frames: 15, // Nombres d'images /2
row: 1, // Debut du niveau
rows: 2, // Nombres de niveau vers le haut
hint: 'Montre de luxe', // Infobulle de description du 360
path: 'img/watch/', // Chemin des images pour le 360
images: [ '001.jpg', // Nom des images [Garder la meme structure]
'002.jpg',
'003.jpg',
'004.jpg',
'005.jpg',
'006.jpg',
'007.jpg',
'008.jpg',
'010.jpg',
'011.jpg',
'012.jpg',
'013.jpg',
'014.jpg',
'015.jpg',
'016.jpg',
'017.jpg',
'018.jpg',
'019.jpg',
'020.jpg',
'021.jpg',
'022.jpg',
'023.jpg',
'024.jpg',
'025.jpg',
'026.jpg',
'027.jpg',
'028.jpg',
'029.jpg',
'030.jpg',
'031.jpg',
'032.jpg' ]
}); // Fin du 360 avec 32 images
$('.loupe').click(function() { // Quand on clique sur la preview
$('.preview_big').show(); // Affiche l'apercu en grand
$(this).animate(function() {
$(this).animate({ opacity: 0.7 }, 500); // La transparence est de 70%
},function() { // et
$(this).animate({ opacity: 1.0 }, 500); // La transparence est de 100%
});
$('.img_container').each(function() {
$(this).show(function() { // Affiche l'apercu en grand
$(this).animate({ opacity: 0.7 }, 500); // La transparence est de 70%
},function() { // et
$(this).animate({ opacity: 1.0 }, 500); // La transparence est de 100%
});
$('.croix').show(); // Affiche la croix de fermeture
$('.img_container').show(); // Affiche le bloc d'apercu
});
});
Merci pour vos réponses.
6 réponses
-
Autant pour moi je n'avais pas compris
quelque chose comme ca ?
$('.loupe').click(function() { // Quand on clique sur la preview srcImage = $('.jquery-reel').attr('src').replace('watch','watch/big') $('#big').attr('src',srcImage); //On change l'image du "zoom" par celle du "mini" $('.preview_big').show(); // Affiche l'apercu en grand $(this).animate(function() { $(this).animate({ opacity: 0.7 }, 500); // La transparence est de 70% },function() { // et $(this).animate({ opacity: 1.0 }, 500); // La transparence est de 100% }); $('.img_container').each(function() { $(this).show(function() { // Affiche l'apercu en grand $(this).animate({ opacity: 0.7 }, 500); // La transparence est de 70% },function() { // et $(this).animate({ opacity: 1.0 }, 500); // La transparence est de 100% }); $('.croix').show(); // Affiche la croix de fermeture $('.img_container').show(); // Affiche le bloc d'apercu }); });
Par contre ton répertoire watch/big ne contient pas toutes les images correspondantes au zoom..
Adns -
Bonjour,
Le code html correspondant pourrait nous être utile ;)
Adns -
Oups j'ai oublié désolé
-
<div id="general"> <h1>Photos - Système aperçu + Reel</h1> <div class='img_preview'> <img class="img32" src="img/watch/001.jpg" alt="montre" /> <img class="loupe" src="img/loupe.png" alt="preview" /> </div> <div class="img_container"> <img src="img/watch/big/001.jpg" class="preview_big" alt="preview_big" /> <img src="img/croix.png" alt="croix" class="croix" /> </div> </div> -
Pour le HTML j'ajouterais des id à tes images comme ceci
<div id="general"> <h1>Photos - Système aperçu + Reel</h1> <div class='img_preview'> <img id="mini" class="img32" src="img/watch/001.jpg" alt="montre" /> <img class="loupe" src="img/loupe.png" alt="preview" /> </div> <div class="img_container"> <img id="big" src="img/watch/big/001.jpg" class="preview_big" alt="preview_big" /> <img src="img/croix.png" alt="croix" class="croix" /> </div> </div>
ainsi pour le JS
$('.loupe').click(function() { // Quand on clique sur la preview $('#big').attr('src',$('#mini').attr('src')); //On change l'image du "zoom" par celle du "mini" $('.preview_big').show(); // Affiche l'apercu en grand $(this).animate(function() { $(this).animate({ opacity: 0.7 }, 500); // La transparence est de 70% },function() { // et $(this).animate({ opacity: 1.0 }, 500); // La transparence est de 100% }); $('.img_container').each(function() { $(this).show(function() { // Affiche l'apercu en grand $(this).animate({ opacity: 0.7 }, 500); // La transparence est de 70% },function() { // et $(this).animate({ opacity: 1.0 }, 500); // La transparence est de 100% }); $('.croix').show(); // Affiche la croix de fermeture $('.img_container').show(); // Affiche le bloc d'apercu }); });
Adns -
Hum Ok essaye avec ce bout de JS la pour voir
sans toucher au html
$('.loupe').click(function() { // Quand on clique sur la preview $('.img_container').attr('src',$('jquery-reel').attr('src')); //On change l'image du "zoom" par celle du "mini" $('.preview_big').show(); // Affiche l'apercu en grand $(this).animate(function() { $(this).animate({ opacity: 0.7 }, 500); // La transparence est de 70% },function() { // et $(this).animate({ opacity: 1.0 }, 500); // La transparence est de 100% }); $('.img_container').each(function() { $(this).show(function() { // Affiche l'apercu en grand $(this).animate({ opacity: 0.7 }, 500); // La transparence est de 70% },function() { // et $(this).animate({ opacity: 1.0 }, 500); // La transparence est de 100% }); $('.croix').show(); // Affiche la croix de fermeture $('.img_container').show(); // Affiche le bloc d'apercu }); });
Adns-
-
-
Ce code fonctionne
$('.loupe').click(function() { // Quand on clique sur la preview $('#big').attr('src',$('#jquery-reel-1310559285054').attr('src')); //On change l'image du "zoom" par celle du "mini" $('.preview_big').show(); // Affiche l'apercu en grand $(this).animate(function() { $(this).animate({ opacity: 0.7 }, 500); // La transparence est de 70% },function() { // et $(this).animate({ opacity: 1.0 }, 500); // La transparence est de 100% }); $('.img_container').each(function() { $(this).show(function() { // Affiche l'apercu en grand $(this).animate({ opacity: 0.7 }, 500); // La transparence est de 70% },function() { // et $(this).animate({ opacity: 1.0 }, 500); // La transparence est de 100% }); $('.croix').show(); // Affiche la croix de fermeture $('.img_container').show(); // Affiche le bloc d'apercu }); });
Le problème c'est que l'id de référence (jquery-reel-1310559285054) change à chaque rechargement de la page.
Il te faut donc trouver un autre moyen de récupéré l'image courante
Comme par exemple en remplacant
$('#big').attr('src',$('#jquery-reel-1310559285054').attr('src'));
par
$('#big').attr('src',$('.jquery-reel').attr('src'));
Ainsi on ne se réfère plus à l'id mais à la classe de l'objet..
Adns -
-
-
