div 내에서 이미지 스왑 onclick

Question

클릭 할 때 이미지를 바꾸고 싶지만 대체 된 이미지도 있습니다. 라이트 박스를 클릭하십시오. 다음은 첫 번째 이미지에 라이트 박스가있는 예제입니다. http://www.artdesigngroup.co/products/test.html

제 생각에는 주변 div에 "display"ID를 적용하고이 div 내의 이미지를 바꿔야합니다. 하지만 어떻게하면 라이트 박스를 만들 수 있을까요?

감사합니다.

Answer 1

이 문제를 처리하기 위해 구조를 다시 생각해 보겠습니다. 대부분의 작업은 스왑 기능을 롤링하는 대신 jQuery로 처리 할 수 ​​있습니다. 피들 (Fiddle)을 포함하여 질문 할 때 대답을 빨리 얻을 수있는 좋은 방법입니다. 여기에 attr 대신 jQuery 1.7의 prop 메서드를 사용해야합니다.

http://jsfiddle.net/txbqX/3/

jQuery를 사용하면

//when main image is clicked, show it in colorbox 
$('#foo a').colorbox(); 

//when thumb is clicked, set main image to it 
$('div#thumbs img').click(function() { 
    $('#foo a').prop('href', $(this).prop('src')); 
    $('#foo img').prop('src', $(this).prop('src')); 
    return false; //stop link from navigating 
}) 

간체 HTML

<div id="foo" > 
    <a href="http://www.artdesigngroup.co/images/tv-frames/01.jpg"> 
     <img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="304" height="304" name="Display" id="display" /> 
    </a> 
</div> 

<br /> 
<div id="thumbs"> 
    <img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="56" height="56" /> 
    <img src="http://www.artdesigngroup.co/images/tv-frames/02.jpg" width="56" height="56" /> 
    <img src="http://www.artdesigngroup.co/images/tv-frames/03.jpg" width="56" height="56" /> 
    <img src="http://www.artdesigngroup.co/images/tv-frames/04.jpg" width="56" height="56" /> 
    <img src="http://www.artdesigngroup.co/images/tv-frames/05.jpg" width="56" height="56" /> 
</div>