2013-03-29 32 views
6

Ho una grande immagine e piccoli pollici, sto provando a scambiare i loro src l'uno con l'altro. Qui sto cambiando img thumb in bottleWrapper img, ma voglio scambiare il loro src. Aiuto di Pls!Scambia immagine src con jquery

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> 

EDIT

Grazie a tutti :)

realtà ho dimenticato di dare un'informazione che ho vari pollici, questo rispondere meglio! Grazie a tutti per i vostri preziosi input!

$('.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; 
    }); 
}); 
+1

non c'è un tag all'interno di pollici –

+0

Vedere anche questo esempio di 'Swap gallery' da Design Chemical: http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/ (non sarebbe difficile aggiungere fadein/fadeout immagino) –

risposta

6

To SWAP immagini mi piacciono:

LIVE DEMO

$('.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; 
    }); 
}); 

Se si dispone di più 'gallerie' mi piace: http://jsbin.com/asixuj/5/edit

+0

Nopes, questo sta cambiando di nuovo solo GRANDI img alla piccola sorgente di immagini ..Lo voglio per es. hai un'immagine verde in alto e quando clicchi su nero img thumb, voglio che il pollice nero diventi rosa e mostri il nero img in alto .. 'Fondamentalmente vuoi scambiare le due immagini' Spero di non confonderti – itsMe

+0

@itsMi hai visto la mia modifica? Fa esattamente questo –

+0

Questo funziona perfettamente! Grazie :) – itsMe

0

Prova:

$('.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'); 
    }); 
}); 

È necessario collegare cliccare eventi per img tag all'interno thumbs classe e quindi modificare l'origine dell'immagine.

+0

Nopes, funziona a fior di pelle :(La sua unica fonte mutevole di bottiglieWrapper img, non i pollici img – itsMe

+0

@itsMe, prova la risposta aggiornata ... – Anujith

2

ther è <a> tag nella tua domanda .. assumendo così il suo img .. su cl ick dei pollici img .. il bottlesWrapper otterrà swaped ..

provare questo

aggiornato

$('.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'); 
    }); 

}); 

NOTA: e non è necessario each dosi ciclo ... jquery che utilizzando un selettore di classe funziona ..

+0

Non funziona :(La sua unica fonte di flaconi di wrapper img, non di img pollici – itsMe

+0

aggiornato la mia risposta ... provalo – bipen

+0

Grazie mille :) Davvero utile – itsMe

1

Come non si dispone di un tag nel .thumb il codice non funziona affatto, invece prova a cliccare il .thumb stesso:

$('.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'); 
    }); 
    }); 
}); 

E .thumb è di per sé è una collezione in modo che non c'è bisogno di scorrere .each() metodo.

+0

Funziona .. Grazie :) – itsMe

+0

@itsMe Grazie hai dato un'occhiata a questo. – Jai

+0

Grazie mille Jai :) – itsMe