Javascript: Cliquez sur les vignettes pour changer d'image plus grande. Meilleure méthode?

Je cherchais un moyen vraiment facile/léger de pouvoir cliquer sur les vignettes pour changer le src d'une image plus grande.Javascript: Cliquez sur les vignettes pour changer d'image plus grande. Meilleure méthode?

Voici ce que j'ai trouvé: http://snipplr.com/view/8688/jquery-image-swap/

Je n'ai pas fait encore essayé. Est-ce la meilleure solution?

Les images plus grandes à échanger auront la même largeur mais une hauteur différente. Cela causera-t-il des problèmes? Y a-t-il quelque chose que je dois ajouter pour cette fonctionnalité? Serait-il préférable de faire un div avec une image de fond qui permute et est la hauteur de la plus grande image?

Aussi, quelqu'un a dit que cela ne fonctionne qu'une fois (??) ... J'en aurais besoin pour commencer sur une certaine image, puis pouvoir passer à 2-4 autres images en cliquant sur la vignette.

Merci pour votre conseil! Je suis certainement (évidemment) aucun auteur Javascript.

Source

2009-10-28 McFly88

Vous devriez pouvoir changer d'image autant de fois que vous le souhaitez.

Le morceau de code que vous référence remplace la source d'image de #target, avec le href d'un lien dans une div #thumbs. Cela devrait fonctionner correctement.

<img id="target" src="images/main.jpg"> 

<div id="thumbs"> 
<a href="images/picture1_big.jpg"><img src="images/picture1_small.jpg"></a> 
<a href="images/picture2_big.jpg"><img src="images/picture2_small.jpg"></a> 
<a href="images/picture3_big.jpg"><img src="images/picture3_small.jpg"></a> 
</div>

Maintenant, dans la mesure où la largeur et la hauteur, je suis assez sûr qu'il ya des problèmes de compatibilité entre navigateurs avec la façon dont les navigateurs gèrent une largeur définie, mais une hauteur définie, lorsque vous échangez les images.

Dans Firefox, les travaux suivants. javascript ancienne plaine, non jquery:

<html> 

    <head> 

    <script type="text/javascript"> 
     function swap(image) { 
      document.getElementById("main").src = image.href; 
     } 
    </script> 

    </head> 

    <body> 

    <img id="main" src="images/main.jpg" width="50"> 

    <a href="images/picture1_big.jpg" onclick="swap(this); return false;"><img src="images/picture1_small.jpg"></a> 
    <a href="images/picture2_big.jpg" onclick="swap(this); return false;"><img src="images/picture2_small.jpg"></a> 
    <a href="images/picture3_big.jpg" onclick="swap(this); return false;"><img src="images/picture3_small.jpg"></a> 

    </body> 
</html>

Source

2009-10-28 23:46:31

Pour le problème de la hauteur indéfinie, pensez-vous que mon idée d'utiliser un fond d'image div pourrait plutôt fonctionner? Merci pour la réponse! De plus, le jQuery ne nécessite pas de javascript "inline", n'est-ce pas? Donc, ce serait son avantage? – McFly88

Quelqu'un peut-il me dire comment modifier le premier code pour changer une image de fond div à la place? Est-ce que je changerais la classe du div contenant ou pourrais-je changer directement l'image de fond? – McFly88

Puisque jQuery est juste reconditionné javascript, il fait essentiellement la même chose, sauf qu'il est en train d'assigner les "onclicks" dans le code. C'est à dire. $ ("# thumbs a"). click (function() ... assigne les méthodes click à chaque balise "a" dans la div #thumbs.Vous pouvez aussi le faire avec javascript, en utilisant un getElementById et un getElementByTagName, puis itérer les résultats, puis ajouter des écouteurs d'événement –

Cet exemple élimine le temps de chargement après avoir cliqué sur sur les vignettes:

HTML:

<div id="big-image"> 
    <img src="http://lorempixel.com/400/200/sports/1/"> 
    <img src="http://lorempixel.com/400/200/fashion/1/"> 
    <img src="http://lorempixel.com/400/200/city/1/"> 
</div> 

<div class="small-images"> 
    <img src="http://lorempixel.com/100/50/sports/1/"> 
    <img src="http://lorempixel.com/100/50/fashion/1/"> 
    <img src="http://lorempixel.com/100/50/city/1/"> 
</div>

Javascript:

$(function(){ 
    $("#big-image img:eq(0)").nextAll().hide(); 
    $(".small-images img").click(function(e){ 
     var index = $(this).index(); 
     $("#big-image img").eq(index).show().siblings().hide(); 
    }); 
});

http://jsfiddle.net/Qhdaz/2/

Source

2013-09-05 04:30:34

Javascript: Cliquez sur les vignettes pour changer d'image plus grande. Meilleure méthode?

Répondre

Questions connexes