Javascript: en Cliquant sur les vignettes pour passer d'une image plus grande. La meilleure méthode?

J'ai été à la recherche d'un vraiment facile/moyen léger pour simplement être en mesure de cliquer sur les vignettes pour passer le src d'une image plus grande.

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

Les grandes images pour être échangée en aura la même largeur mais de hauteur différente. Sera-ce la cause de problèmes/il ya quelque chose que j'ai besoin d'ajouter cette fonctionnalité? Serait-il mieux de faire un div avec un background-image que les swaps et est à la hauteur de l'image la plus grande?

Aussi, quelqu'un a dit qu'il ne fonctionne qu'une fois (??)... J'avais besoin pour commencer sur une certaine image, et ensuite être capable de changer de 2-4 autres images, cliquez sur la vignette.

Merci pour les conseils!!! Je suis (évidemment) pas de Javascript écrivain.

InformationsquelleAutor McFly88 | 2009-10-28
  1. 6

    Vous devriez être en mesure de changer les images autant de fois que vous le souhaitez.

    Le morceau de code de référence remplace la source de l'image de #cible, avec le href d'un lien au sein d'un #thumbs div. Il 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 que la largeur et la hauteur, je suis assez sûr il y a quelques compatibilité inter-navigateur problèmes avec la façon dont les navigateurs gérer une largeur définie, mais ne définissent pas la hauteur, lorsque vous échanger les images.

    Dans firefox, les ouvrages suivants. Le bon vieux javascript, pas de 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>
    • Pour l'indéfini hauteur de la question, pensez-vous que mon idée sur l'utilisation d'un div de l'image de fond d'écran de swap au lieu de cela fonctionnerait mieux? Merci pour la réponse! Aussi, le jQuery, ne nécessite pas d' "inline", javascript, correct? Alors que ce serait son avantage?
    • Quelqu'un peut me dire comment modifier le premier code pour passer un div de l'image de fond d'écran à la place? Aurais-je modifier la classe de la div contenant ou pourrais-je changer l'image de fond d'écran directement en quelque sorte?
    • Depuis jQuery est juste reconditionné en javascript, il fait essentiellement la même chose, sauf que c'est de l'affectation de la "onclicks" dans le code. I. e. $("#thumbs un").cliquez sur( function() ... attribue cliquez sur les méthodes à chaque " une " dans la balise #thumbs div. Vous pouvez le faire avec du javascript aussi, à l'aide d'un getElementById et un getElementByTagName et puis en itérant si les résultats et ensuite ajouter des écouteurs d'événement.
    • Pour modifier une image de fond, vous pouvez modifier la ligne dans la fonction de lecture: document.getElementById("principal").classe.backgroundImage = 'url('+image.href+')'; Cela suppose que le principal est un div et non pas d'une img.
    InformationsquelleAutor Jeff B
  2. 2

    Cet exemple élimine les temps de chargement après en cliquant sur les miniatures:

    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/

    InformationsquelleAutor Luke Kalyan Brata Sarker