Permuter l'image src avec jquery

J'ai une grande image et petits pouces, je suis en train d'échanger leurs src uns avec les autres. Ici, je suis l'évolution de pouce img dans bottleWrapper img, mais je veux échanger leurs src. Svp aider!

HTML

<div class="bottlesWrapper">
  <img src="bottle1.png" />
</div>

<div class="thumbs">
   <img src="bottle2.png" />
</div>

SCRIPT

<script>
$('.thumbs a').each(function() {
    $(this).click(function() {
       var aimg = $(this).find("img")

      $('.bottlesWrapper img').fadeOut('fast',function(){
         $(this).attr('src', $(aimg).attr('src')).fadeIn('fast');
      });

    });
});
</script>

MODIFIER

Merci à tous 🙂

J'ai effectivement oublié de donner une information que j'ai plusieurs pouces, cette réponse vous convient le mieux! Merci à vous tous pour votre précieux apports!

$('.thumbs img').click(function() {
    var thmb = this;
    var src = this.src;
    $('.bottlesWrapper img').fadeOut(400,function(){
        thmb.src = this.src;
        $(this).fadeIn(400)[0].src = src;
    });
});
  • il n'y a pas une balise à l'intérieur de pouce
  • Voir aussi cet Échange galerie' exemple de la Conception Chimique: designchemical.com/blog/index.php/jquery/... ne serait pas difficile d'ajouter fadein/fadeout je suppose)
InformationsquelleAutor itsMe | 2013-03-29
  1. 6

    À SWAP les images comme:

    DÉMONSTRATION EN DIRECT

    $('.thumbs img').click(function() {
    var thmb = this;
    var src = this.src;
    $('.bottlesWrapper img').fadeOut(400,function(){
        thmb.src = this.src;
        $(this).fadeIn(400)[0].src = src;
    });
});

    Si vous avez plusieurs 'galeries' aime: http://jsbin.com/asixuj/5/edit

    • Nopes, c'est de nouveau changeant seulement les GRANDES img petite source de l'image.. je veux que pour eg. vous avez de l'image verte sur le dessus et quand u cliquez sur le noir img pouce, je veux noir de pouce à devenir rose et écran noir img en haut.. "Fondamentalement permuter les deux images" j'espère que je force confondre u
    • avez-vous vu mon edit? C'est exactement ce que fait
    • Cela fonctionne parfaitement! Merci 🙂
    • Niceeee..!!! 🙂 Merci à vous roXon
    • Hey .. u peut expliquer pourquoi [0]?
    • en jQuery, c'est comme $(this).attr('src') en JS c'est this.src donc, pour revenir $(this) natif JS élément de référence (this) vous utilisez [0] de sorte que vous pouvez faire: $(this)[0].src au lieu de $(this).attr('src') mais je garde $(this) au lieu d'utiliser this donc je ne peux faire la méthode jQuery .fadeIn(400)
    • démo: jsbin.com/ucibef/1/edit

    InformationsquelleAutor Roko C. Buljan
  2. 3

    ther est pas <a> balise dans votre question ..donc en supposant que son img.. sur cliquez de pouce img.. le bottlesWrapper obtiendrez swaped..

    essayer cette

    mis à jour

     $('.thumbs img').click(function() {
   var img=$(this).attr('src');

  $('.bottlesWrapper img').fadeOut('fast',function(){
     $(this).attr('src', img).fadeIn('fast');
  });

  $(this).fadeOut('fast',function(){
     var bottlersImg=$('.bottlesWrapper img').attr('src');
     $(this).attr('src', bottlersImg).fadeIn('fast');
  });

});

    NOTE: et vous n'avez pas besoin each boucle ... jquery dose à l'aide d'un sélecteur de classe fonctionne..

    • Ne fonctionne pas 🙁 Son uniquement la modification de la source de bottlesWrapper img, pas de pouces img
    • mise à jour de ma réponse... l'essayer
    • Merci beaucoup 🙂 Vraiment utile
    • bienvenue..:)..content, il a aidé
    InformationsquelleAutor bipen
  3. 1

    Essayer:

    $('.thumbs img').click(function() {
    var img_src = img.attr('src');

    $(this).fadeOut('fast',function(){
      $(this).attr('src', $('.bottlesWrapper img').attr('src')).fadeIn('fast');
    });

    $('.bottlesWrapper img').fadeOut('fast',function(){
       $(this).attr('src', img_src ).fadeIn('fast');
    });
});

    Vous devez joindre cliquez sur les événements à img balises à l'intérieur thumbs classe, puis de changer la source de l'image.

    • Nopes, il force le lieu de travail: Son seul changement de source de bottlesWrapper img, pas les pouces img
    • essayez la mise à jour de réponse...
    InformationsquelleAutor Anujith
  4. 1

    Que vous n'avez pas de <a> balise dans le .thumb votre code ne fonctionne pas du tout, au lieu d'essayer en cliquant sur le .thumb lui-même:

    $('.thumbs').click(function() {
    var thumbsimgSrc = $(this).find("img").attr('src');
    var bottleImgSrc = $('.bottlesWrapper img').attr('src');

    $(this).find("img").attr('src', bottleImgSrc);

    $('.bottlesWrapper img').fadeOut('fast').promise().done(function(){
       $(this).attr('src', thumbsimgSrc).fadeIn('fast');
    });
  });
});

    Et .thumb est lui-même une collection de sorte que vous n'avez pas besoin de parcourir .each() méthode.

    • Il Fonctionne.. Merci 🙂
    • Merci vous avez eu un coup d'oeil à celui-ci.
    • Merci u si beaucoup Jai 🙂
    InformationsquelleAutor Jai