Swap images with jQuery

[doolak]

Hi there,

I am trying to make a little image switcher for a portfolio page with jQuery, but I cannot get it work properly.

The portfolio looks like this (atm just 2 items for testing...):

I "just" want to receive the following: if one click one of the thumbnails, this image should be swapped with the main image of that portfolio item.

It works fine so far, I just cannot restrict it to one portfolio item - it changes always both items.

So i tried to safe the parent's class in var ref and add this to the selector which should be changed. The alert show the correct class, but it just does not work...

Here the HTML code:

<div class='references-item ref_1'>
<div class='galerie_images ref_1'>
<div class='galerie_image ref_1 pic_1'>
<img class='galerie_thumb' src='/pw/site/assets/files/1013/alusi_1.400x267n.jpg' />
</div>
<div class='galerie_image ref_1 pic_2'>
<img class='galerie_thumb' src='/pw/site/assets/files/1013/alusi_2.400x267n.jpg' width='160' />
</div>
<div class='galerie_image ref_1 pic_3'>
<img class='galerie_thumb' src='/pw/site/assets/files/1013/alusi_3.400x267n.jpg' width='160' />
</div>
<div class='clear'></div>
</div>
<p><span>Kunde: </span>Alusi    <span>Branche: </span>Kerzendesign</p>
</div>
<div class='references-item ref_2'>
<div class='galerie_images ref_2'>
<div class='galerie_image ref_2 pic_1'>
<img class='galerie_thumb' src='/pw/site/assets/files/1014/awi_1_gross.400x267n.jpg' />
</div>
<div class='galerie_image ref_2 pic_2'>
<img class='galerie_thumb' src='/pw/site/assets/files/1014/awi_3_gross.400x267n.jpg' width='160' />
</div>
<div class='galerie_image ref_2 pic_3'>
<img class='galerie_thumb' src='/pw/site/assets/files/1014/awi_2_gross.400x267n.jpg' width='160' />
</div>
<div class='clear'></div>
</div>
<p><span>Kunde: </span>AWI    <span>Branche: </span>Deutsche Automatenwirtschaft</p>
</div>

and here the jQuery I am using:

jQuery(function($){
$('.pic_2 img').click(function() {
var thmb = this;
var src = this.src;
var ref = $(this).parents().eq(1).attr('class');
alert (ref);
$(ref+'.pic_1 img').fadeOut(400,function(){
thmb.src = this.src;
$(this).fadeIn(400)[0].src = src;
});
});
});

jQuery(function($){
$('.pic_3 img').click(function() {
var thmb = this;
var src = this.src;
var ref = $(this).parents().eq(1).attr('class');
alert (ref);
$(ref+' .pic_1 img').fadeOut(400,function(){
thmb.src = this.src;
$(this).fadeIn(400)[0].src = src;
});
});
});

Has anybody an idea what's wrong? I would appreciate any help!

Cheers, Christian.

[doolak]

Got it...

The problem was the following part:

var ref = $(this).parents().eq(1).attr('class');
$(ref+' .pic_1 img').fadeOut(400,function(){

As the variable "var ref"would be e.g.  "galerie_images ref_2" it was resulting in the following script:

$(galerie_2 ref_2 .pic_1 img').fadeOut(400,function(){

...but it should be:

$(.galerie_2.ref_2 .pic_1 img').fadeOut(400,function(){

So I changed the CSS class in the HTML as follows:

before:

<div class='galerie_images ref_1'>

after:

<div class='galerie_images_ref_1'>

And the Javascript as follows:

var ref = $(this).parents().eq(1).attr('class');
        $('.'+ref+' .pic_1 img').fadeOut(400,function(){

Now it's working fine ;-)