CODEWITHSUNDEEP
jquery
Helen
Helen

Reputation: 87

JQuery - how can I change an image src on click of a link

I am using a JQuery gallery to display an image with an opaque sliding description. I need to add a list of links so that the user can override the image displayed on the click of a link. How can I override the gallery image on click of the link?

<script>
    $(document).ready(function () {
        //Execute the slideShow
        slideShow();
    })

    function slideShow() {
        $('#gallery a').css({ opacity: 0.0 });
        $('#gallery a:first').css({ opacity: 1.0 });
        $('#gallery .caption').css({ opacity: 0.7 });
        $('#gallery .caption').css({ width: $('#gallery a').find('img').css('width') });
        $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
            .animate({ opacity: 0.7 }, 400);
        setInterval('gallery()', 6000);
    }

    function gallery() {
        var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));

        var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery a:first') : current.next()) : $('#gallery a:first'));

        var caption = next.find('img').attr('rel');
        next.css({ opacity: 0.0 })
            .addClass('show')
            .animate({ opacity: 1.0 }, 1000);

        current.animate({ opacity: 0.0 }, 1000)
            .removeClass('show');

        $('#gallery .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ height: '1px' }, { queue: true, duration: 300 });

        $('#gallery .caption').animate({ opacity: 0.7 }, 100).animate({ height: '100px' }, 500);

        $('#gallery .content').html(caption);
    }
</script>

<div id="gallery">
    <a href="#" class="show">
        <img src="images/storm2.jpg" alt="text in here" title="" width="480" height="260"
             rel="<h3>Description</h3>description goes in here "
    </a> <a href="#">
        <img src="images/storm1.jpg" alt="text in here" title="" width="480" height="260"
             rel="<h3>Description 2</h3>" />
    </a>...... ...... ......
    <div class="caption">
        <div class="content">
        </div>
    </div>
</div>
<div class="clear">
</div>

Upvotes: 2

Views: 13659

Answers (2)

Mike
Mike

Reputation: 2587

jQuery('#link').click(function() {
   jQuery('#image').attr('src',jQuery(this).attr('alt'));
}

This Method is sort of a Hack where you cheat a bit and store the src-path into the alt tab of the link.

If you want to do it by the book, I suggest you seperate logic from visuals. For instance, you create an array like follows:

myArray['link1'] = 'url1';
myArray['link2'] = 'url2';

The Array Key would be the same as the id tag of the link:

<a id="link1" href="foo">bar</a> etc...

If you do it this way, JavaScript changes as follows:

jQuery('#link').click(function() {
   jQuery('#image').attr('src',myArray[this.id]);
}

Upvotes: 1

Sampson
Sampson

Reputation: 268444

$("a.mylink").click(function(event){
  $("img.myimage").attr("src","image2.jpg");
});

Loading the source from the link is very easy as well:

$("a.mylink").click(function(event){
  event.preventDefault();
  var newSRC = $(this).attr("href");
  $("img.myimage").attr("src", newSRC);
});

Upvotes: 9

Related Questions