CODEWITHSUNDEEP
javascriptjquery
Tom Perkins
Tom Perkins

Reputation: 499

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:imgsizer: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

Upvotes: 0

Views: 515

Answers (4)

Muhammad Usman
Muhammad Usman

Reputation: 12503

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

Upvotes: 2

scessor
scessor

Reputation: 16125

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

Upvotes: 1

Gus
Gus

Reputation: 7349

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);

Upvotes: -1

Digital Plane
Digital Plane

Reputation: 38294

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

Upvotes: 1

Related Questions