2014-05-11 5 views
3

을 선택했을 때 팝업으로 표시되는 축소판 이미지 예를 들어 이미지 목록을 가질 수 있는지 궁금한데, 그 중 하나를 선택하면 이미지보기가 다른 것보다 크게 보입니다. 다른 것들과 썸네일 이미지에서 다른 썸네일을 선택하면 커다란 이미지가 내가 선택한 등으로 대체됩니다. 그러나 javascript (및 html)에서? 그렇다면 코드 구조는 무엇을 할 것입니까? 및 JQuery와 또는 유사한 자바 스크립트 코드 생성기와 같은 물건을 사용하지 않고, 내가(자바 스크립트)

감사

답변

0

자신에 의해 수동으로 수행 라이트 박스 jQuery 플러그인을 살펴보고 싶다. 그것은 당신이 이런 일을 의미합니까

http://www.lokeshdhakar.com/projects/lightbox2/?u=91

+0

감사하지만 내 질문을 수정; 나는 외부 플러그인이나 jquery없이 그것을하고 싶다는 말을 잊어 버렸고, 직접 (코드) 직접 해보고 싶다. –

0

찾고있는 무엇을 할 수 있는가? (또는 적어도 올바른 궤도에)

JSFiddle

HTML :

<a href="http://placehold.it/500">http://placehold.it/500</a> 
<a href="http://placehold.it/510">http://placehold.it/510</a> 
<a href="http://placehold.it/520">http://placehold.it/520</a> 
<a href="http://placehold.it/530">http://placehold.it/530</a> 
<a href="http://placehold.it/540">http://placehold.it/540</a> 
<a href="http://placehold.it/550">http://placehold.it/550</a> 
<a href="http://placehold.it/560">http://placehold.it/560</a> 
<a href="http://placehold.it/570">http://placehold.it/570</a> 
<a href="http://placehold.it/580">http://placehold.it/580</a> 
<a href="http://placehold.it/590">http://placehold.it/590</a> 
<a href="http://placehold.it/600">http://placehold.it/600</a> 

<div id="popup"><img src="" alt=""/></div> 

자바 스크립트 :

var a = document.getElementsByTagName("a"), 
popup = document.getElementById("popup"), 
img = document.getElementsByTagName("img")[0]; 

for(i = 0; i < a.length; i++) 
{ 
    a[i].onclick = function(){ 
     popup.style.display="block"; 
     img.src = this.href; 
     img.alt = this.innerHTML; 
     return false; 
    } 
} 
관련 문제