Sujet Précédent Sujet Suivant

Afficher image selon référence en Javascript

Résolu/Fermé
nova-gaia Messages postés 218 Date d'inscription mercredi 12 août 2009 Statut Membre Dernière intervention 21 juillet 2016 - Modifié par nova-gaia le 13/07/2011 à 11:23
nova-gaia Messages postés 218 Date d'inscription mercredi 12 août 2009 Statut Membre Dernière intervention 21 juillet 2016 - 13 juil. 2011 à 15:56
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 vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
13 juil. 2011 à 15:46
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 mercredi 12 août 2009 Statut Membre Dernière intervention 21 juillet 2016 23
Modifié par nova-gaia le 13/07/2011 à 15:59
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 vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
13 juil. 2011 à 11:28
Bonjour,

Le code html correspondant pourrait nous être utile ;)

Adns
0
Réponse 3 / 6
nova-gaia Messages postés 218 Date d'inscription mercredi 12 août 2009 Statut Membre Dernière intervention 21 juillet 2016 23
13 juil. 2011 à 11:30
Oups j'ai oublié désolé
0
Réponse 4 / 6
nova-gaia Messages postés 218 Date d'inscription mercredi 12 août 2009 Statut Membre Dernière intervention 21 juillet 2016 23
13 juil. 2011 à 11:31 
<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 mercredi 12 août 2009 Statut Membre Dernière intervention 21 juillet 2016 23
13 juil. 2011 à 11:46
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 vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
13 juil. 2011 à 11:48
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 mercredi 12 août 2009 Statut Membre Dernière intervention 21 juillet 2016 23
13 juil. 2011 à 11:55
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 vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
13 juil. 2011 à 11:58
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 mercredi 12 août 2009 Statut Membre Dernière intervention 21 juillet 2016 23
13 juil. 2011 à 13:24
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 vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
13 juil. 2011 à 13:57
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 mercredi 12 août 2009 Statut Membre Dernière intervention 21 juillet 2016 23
13 juil. 2011 à 14:07
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 vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
13 juil. 2011 à 14:12
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 vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
13 juil. 2011 à 14:20
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 mercredi 12 août 2009 Statut Membre Dernière intervention 21 juillet 2016 23
13 juil. 2011 à 14:30
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 mercredi 12 août 2009 Statut Membre Dernière intervention 21 juillet 2016 23
Modifié par nova-gaia le 13/07/2011 à 14:33
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

Blocage sur tableau Excel par la mention "La référence n'est pas valide
OBP-P75 -
DjiDji59430 -

1 réponse
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
=Si la cellule A1 a du texte = B1 devient couleur
jsecours -
huhh -

8 réponses
PIX
plart -
jordane45 -

1 réponse