JQuery - 如何通過點擊鏈接更改圖像src

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