Afficher image selon référence en Javascript

Résolu
nova-gaia Messages postés 218 Date d'inscription   Statut Membre Dernière intervention   -  
nova-gaia Messages postés 218 Date d'inscription   Statut Membre Dernière intervention   -
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: 
$('.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.

A voir également:

6 réponses

Réponse 1 / 6
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   153
 
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
1
nova-gaia Messages postés 218 Date d'inscription   Statut Membre Dernière intervention   23
 
Je sais pour les images manquantes.

OUIIIIIIIIIIIIII!!!!!

SA FONCTIONNE MERCI BEAUCOUP ENFIN!!!!
0
Réponse 2 / 6
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   153
 
Bonjour,

Le code html correspondant pourrait nous être utile ;)

Adns
0
Réponse 3 / 6
nova-gaia Messages postés 218 Date d'inscription   Statut Membre Dernière intervention   23
 
Oups j'ai oublié désolé
0
Réponse 4 / 6
nova-gaia Messages postés 218 Date d'inscription   Statut Membre Dernière intervention   23
  
<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>
0
nova-gaia Messages postés 218 Date d'inscription   Statut Membre Dernière intervention   23
 
Voilà je vous laisse regarder. Une idée?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   153
 
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
0
nova-gaia Messages postés 218 Date d'inscription   Statut Membre Dernière intervention   23
 
J'ai mis des class parce que je comptait les utiliser plusieurs dans la page. Je pense que l'exemple doit être physique sur une page web. Je vous envoie un lien pour que vous puissiez voir le résultat je pense que sur code simple il n'est pas simple de s'imaginer ce que je souhaiterai avoir.
0
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   153
 
En théorie les classes sont faites pour le CSS et les ID pour le javascript (enfin c'est mon avis) :)
0
nova-gaia Messages postés 218 Date d'inscription   Statut Membre Dernière intervention   23
 
Voici le lien pour le slider:

https://pmm.ch/index.php/fr/component/content/?id=65&Itemid=204
0
Réponse 6 / 6
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   153
 
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
0
nova-gaia Messages postés 218 Date d'inscription   Statut Membre Dernière intervention   23
 
Non, ça ne change pas ne change pas l'image d'aperçu pour le zoom. Si jamais le "zoom" sont des fichiers séparés dans un sous dossier nommé "big" en JPG. Une idée?
0
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   153
 
Le principe que je cherche à appliquer est bon il suffit de l'adapter à ton cas ;)

je fais des test sur le lien que tu m'a donné
0
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   153
 
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
0
nova-gaia Messages postés 218 Date d'inscription   Statut Membre Dernière intervention   23
 
J'ai suivi tes modifs je constate des changements. sauf que maintenant je n'ai plus d'aperçus. Je pense qu'il ne trouve pas le chemin de l'image. Comment je dois éditer ce bout de code pour qu'il aille chercher au bon endroit?

Merci d'avance pour ta réponse.
0
nova-gaia Messages postés 218 Date d'inscription   Statut Membre Dernière intervention   23
 
Ah mais attend, l'image qui est affichée, c'est l'image du 360 degré qui s'affiche? Donc il suffit que je change le chemin pour qu'il trouve le bon? C'est ça? Si oui tu peux me dire comment faire?

Merci d'avance
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse