jQuery Image Changer: Alt tags

Javascript isn't my strongest suit so please bear with me.

I've got an image changer on a website that someone has built for me. It changes a large image depending on which thumbnail is clicked (http://mitre.mitrebluelight.co.uk/shop/buy/footwear/cold-wet-weather).

I've got the ALT tags showing for the large image and the thumbnails, but I'm trying to get the script to change not only the large image SRC, but also the ALT tag.

Here's the script:

$(".small-images li a").click(function(){
    var $target = $(this).attr('href');

    $(".large-image img").fadeOut('fast',function(){
        $(".large-image img").attr('src',$target)
    $(".large-image img").fadeIn('fast');   
})

And here's the HTML (please note, if some tags look unusual it's because I'm using ExpressionEngine as a CMS):

                    <div class="large-image">{exp:imgsizer:size image="/assets/media/{image_large}" width="389" height="250" alt="{image_large_title}"}</div><!-- End of div: large-image -->
                <div style="display:none;">
                    {images}
                        {exp:imgsizer:size image="/assets/media/{filenm}" width="389" height="250" alt="{image_title}"}
                    {/images}
                </div>
                <div class="small-images">
                    <h5>More images:</h5>
                    <ul>
                        {images}
                            <li><a href="{exp:im开发者_开发知识库gsizer:size image="/assets/media/{filenm}" width="389" height="250" justurl="yes"}" {image_switch="|||class='last'"}>{exp:imgsizer:size image="/assets/media/{filenm}" width="89" height="89" alt="{image_title}"}</a></li>
                        {/images}
                    </ul>
                </div><!-- End of div: small-images -->

Any help is appreciated!

Regards,

Tom

---

Use $(".large-image img").attr('alt','your-alt'); as you used for src, well you had other errors in code, here is the fixed code:

$(".small-images li a").click(function(e){ 
     e.preventDefault(); // to prevent default action

     var $target = $(this).attr('href');

    $(".large-image img").fadeOut('fast',function(){
        $(".large-image img").attr('src',$target);
        $(".large-image img").attr('alt','your-alt');
        $(".large-image img").fadeIn('fast');  
    }); 
});

Make sure to use it when DOM is ready or use document.ready

---

Do you want to use the alt attribute of the image inside of the link? Try this:

$(".small-images li a").click(function(){
    var $target = $(this).attr('href');
    var alt = $(this).find("img").attr('alt');

    $(".large-image img").fadeOut('fast',function(){
        $(".large-image img").attr('src',$target).attr('alt',alt);
    $(".large-image img").fadeIn('fast');   
})

---

You want to change the alt attribute of an image tag? Add following code:

$(".large-image img").attr('alt', 'new alt text');

Alltogether it could be:

$(".small-images li a").click(function(){
    var $target = $(this).attr('href');
    var $alt = $(this).find('img').attr('alt');  // get alt attribute of next image

    $(".large-image img").fadeOut('fast',function(){
        $(".large-image img").attr('src',$target);
        $(".large-image img").attr('alt',$alt); // set alt attribute
        $(".large-image img").fadeIn('fast');   
    });

---

You are already using the anchor's href attribute to set the images src, so you can use $('img', this) to find the alt of the image that has been clicked on and do the same.

$(".small-images li a").click(function(){
    var target = $(this).attr('href');
    var alt = $('img', this).attr('alt') ;
    $(".large-image img").fadeOut('fast',function(){
        $(this).attr('alt',alt) ;
        $(this).attr('src',target);
        $(this).fadeIn('fast');
    }) ;
}) ;

Although you can. you don't need to use $ for variables in javascript, simply var target is enough.

Edit - updated version following suggestions from @Usman's answer

(function($) {
    $(document).ready(function() {
        $(".small-images li a").click(function(){
            e.preventDefault() ;
            var target = $(this).attr('href');
            var alt = $('img', this).attr('alt') ;
            $(".large-image img").fadeOut('fast',function(){
                $(this).attr('alt',alt) ;
                $(this).attr('src',target);
                $(this).fadeIn('fast');
            }) ;
        }) ;
    }) ;
})(jQuery);