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

<pre><code> $(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);

    }

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