JQuery - как я могу изменить изображение при нажатии на ссылку

Question

Я использую галерею JQuery для отображения изображения с непрозрачным скользящим описанием. Мне нужно добавить список ссылок, чтобы пользователь мог переопределить изображение, отображаемое при нажатии ссылки. Как я могу переопределить изображение галереи при нажатии на ссылку?

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

    }

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

Answer 1

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

Загрузка источника по ссылке также очень проста:

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

Answer 2

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

Этот метод является своего рода хаком, в котором вы немного обманываете и сохраняете путь src во вкладке alt ссылки.

Если вы хотите сделать это по книге, я предлагаю вам отделить логику от визуальных элементов. Например, вы создаете массив следующим образом:

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

Ключ массива будет таким же, как и тег id ссылки:

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

Если вы сделаете это таким образом, JavaScript изменится следующим образом:

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