Question

So, I’m using this lovely image swap fellow:

jQuery Image Swap Gallery

You can see a demo of it in action on my site here: http://hannahnelsonteutsch.com/v2/art-piece.php

The problem is, with the #main_image img

<div id="main_image" class="grid_7">
    <img class="wide" src="zImages/arrows-2.jpg" />
</div>

note the class=”wide”. there are two classes that need to be applied dynamically to the images, once they’re “swapped”: “wide” and “tall”, based on whether we’re using an image that is in portrait or landscape.

The nice thing, which I have a hunch that a superior coder could make use of, is that the thumbnails for each image already have the correct class assigned to them:

<img class="tall" src="zImages/arrows-1.jpg" />
<img class="wide" src="zImages/arrows-2.jpg" />
<img class="wide" src="zImages/arrows-3.jpg" />
<img class="tall" src="zImages/arrows-4.jpg" />
<img class="tall" src="zImages/arrows-5.jpg" />

Here is the jQuery that is generating the image-swap:

$(document).ready(function() {
    // Image swap on hover
    $("#details img").hover(function(){
        $('#main_image img').attr('src',$(this).attr('src').replace());
        // This is my failed attempt to assign  
        // the correct class to the #main_img img:
        $('#main_image img').attr('class',$('#details img').attr('class').replace(this));
    });
    // Image preload
    var imgSwap = [];
     $("#details img").each(function(){
        imgUrl = this.src.replace();
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

Note two things:

1. The original tutorial has this line of code:

   $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
   

   which i’ve replaced with this:

   $('#main_image img').attr('src',$(this).attr('src').replace());
   

   the key being the .replace(‘thumb/’, ”) vs .replace().

   We’re using CSS to shrink the images which significantly speeds up image load times upon hover. i.e. the images have already been loaded because we’re using the same image for the thumbs and main image.

2. my own attempt to answer this question has not worked

   $('#main_image img').attr('class',$('#details img').attr('class').replace(this));
   

So, that’s where I’m at. Anyone have any ideas to solve this ?

Thanks so much for your time.

Cheers,
Jon

Answer 1

You need to use the $(this) selector so jquery knows which image you are hovering over. Also you should probably use mouseenter instead of hover as you only need to verify the mouse position once. Finally, got rid of replace() in your function as that wasn’t doing anything. By using attr and changing the src or class you are replacing the value automatically. Here’s a draft I set up of your page: http://jsfiddle.net/AjBDg/2/