이미지 스위처 만들기

기본적으로 매우 간단한 이미지 전환기를 만들려고합니다. 기본적으로 목록의 항목을 클릭하면 div의 그림이 변경됩니다.이미지 스위처 만들기

나는 작동하지 않습니다. 이 코드를 작동시키는 방법에 대한 해결책을 가르쳐 주시겠습니까?

<head> 
    <style> 
     li img { height: 30px; border: 1px dashed blue;} 
     .main_image { border: 1px solid black; height: 500px; width: 500px; } 
    </style> 
    <script type="text/javascript"> 
    $('li img').click(function() { 
     $('#main').attr('src', $(this).attr('src')); 
    }); 
    </script> 
</head> 
<body> 
    <div class="main_image"> 
     <img id="main" src="" /> 
    </div> 

    <ul> 
     <li> 
      <img src="http://placehold.it/200x300" alt="Image Name" /> 
     </li> 
     <li> 
      <img src="http://placehold.it/300x400" alt="Image Name" /> 
     </li> 
    </ul> 
</body>

출처

2011-11-15 Vinicius Santana

축소판 갤러리가있어서 미리보기 이미지를 클릭하면 "마스터"이미지를 업데이트하고 싶습니까? –

그건 작동합니다 - http://jsfiddle.net/y3m4w/, 단지 이미지의 크기를 강제로 CSS를 사용 – rickyduck

rickyduck ... 재미있는 내 코드 jsfiddle에서 일한. 내 localhost 또는 온라인으로 내 서버 중 하나에서 작동하지 않는 ... :( –

당신은 테스트하지

$("li img").click(
    function(){ 
     var imgSrc = $(this).attr("src"); 
     $("img#main").attr("src", imgSrc); 
    } 
);

같은 것을 사용할 수 있지만 :)
샤이을 작동합니다.

출처

2011-11-15 16:36:09

마크 업 :

<div class="gallery"> 
    <img src="http://placehold.it/600x450" alt="" class="main" /> 
    <ul class="thumbnails"> 
    <li><a href="http://placehold.it/600x450"><img src="http://placehold.it/100x75" alt="" /></a></li> 
    <li><a href="http://placehold.it/600x450"><img src="http://placehold.it/100x75" alt="" /></a></li> 
    <li><a href="http://placehold.it/600x450"><img src="http://placehold.it/100x75" alt="" /></a></li> 
    ... 
    </ul> 
</div>

그리고 자바 스크립트 :

$('.gallery').each(function() { 
    var gallery = this; 
    $('.thumbnails a', gallery).click(function (e) { 
     e.preventDefault(); 
     $('img.main', gallery).attr('src', $(this).attr('href')); 
    }); 
});

이 위처럼 gallery의 클래스와 <div>에 싸여있는 메인 이미지/썸네일 조합에 대해 작동합니다 마크 업.

예를 들어 동일한 페이지에 여러 개의 갤러리가있을 수 있으며 위의 jQuery 스 니펫은 각각 독립적으로 작동합니다.

출처

2011-11-15 16:39:40

이미지 스위처 만들기

답변

관련 문제