jQueryサムネイルギャラリーの動作にぶつかった

Question

jQueryを使用して簡単なサムネイルビューアを作成しようとしています。ここでコードが行く：

 $(function(){ 
     $("ul.thumbnails li").click(function(e){ 
     var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image 
     var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL 
     $("img.featured").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag) 
     }); 

     <div class="image-gallery"> 

    <img class="featured" src="big.jpg"> 

    <ul class="thumbnails"> 

    <li id="thumb01"> 
     <a href="big.jpg"><img src="small.jpg"></a> 
    </li> 
    <li id="thumb02"> 
     <a href="big.jpg"><img src="small.jpg"></a> 
    </li> 
    <li id="thumb03"> 
     <a href="big.jpg"><img src="small.jpg"></a> 
    </li> 
</ul> 

.thumbnails li { 
margin: 0; 
padding: 5px 5px 0 5px; 
list-style: none; 
float: left; 
overflow: hidden; 
} 

thumbnails li img { 
width: 50px; 
height: 50px; 
margin: 0; 
padding: 0; 
float: left; 
} 

私は、サムネイルをクリックすると、ブラウザではなく、単にjQueryを使ってのimg srcを変更するのでフル画像に直進します。しかし、私は<li>の中のどこかをクリックすると動作します。

私はこれが単純でなければならないことは知っていますが、どこが間違っているのか分かりません。 http://www.sohtanaka.com/web-design/examples/image-rotator/のような他のギャラリーを勉強しようとしましたが、見つからないものは見つかりませんでした。

私は本当にあなたたちからいくつかの助けを使用することができます:)

Answer 1

あなたがリンクをクリックすると、画像に行くからブラウザを停止する必要があるため、この問題が発生しました。現在のイベントアクションを停止するpreventDefault関数を使用してこれを行うことができます。この場合、「クリック」します。

$(function(){ 
    $("ul.thumbnails li").click(function(e){ 
    var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image 
    var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL 
    $("img.featured").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag) 

    e.preventDefault(); //Stop browser default behaviour 

    }); 

Answer 2

新しいソースを設定した後、デフォルトのブラウザの動作を妨げるために、クリック機能return false;を確認してください。