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;을 확인하십시오.