CSS JS_javascript 기술로 구축된 이미지 뷰어

CSS JS를 사용하여 만든 간단한 이미지 뷰어입니다. 큰 이미지를 보려면 썸네일을 클릭하세요. 큰 이미지의 표시 위치는 고정된 너비와 높이를 사용합니다. 부분이 숨겨져 있습니다. 이미지를 확대하려면 클릭하세요. 전체 크기로 볼 수 있으며 IE, Firefox, Opera와 호환됩니다.

JS 부분

function showPic(whichpic) {
if(document.getElementById) {
document.getElementById('placeholder').src = whichpic.href
if(whichpic.title);
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic. childNodes[0].nodeValue;
} return false
} else {
return
} }

xhtml

첫 번째 큰 이미지에 대한 설명

• 
  < ; img src="첫 번째 작은 그림의 주소" alt="" />

.
.
.

문서 끝 부분에 있는 CSS 코드 데모 파일 다운로드를 참조하세요

현재 효과

큰 이미지의 표시 위치는 고정되어 있지만 이미지마다 크기가 다르기 때문에 위 코드를 실행한 결과는 이상적이지 않습니다. 또한, 큰 이미지를 클릭하면 전체 크기의 코드를 볼 수 있습니다. .여기에는 LightBox 효과가 사용됩니다.

위의 JS 코드를 추가하세요:

document.getElementById('ShowLightBox').href = whichpic.href;

라이트박스의 A 태그에는 큰 이미지의 주소가 있어야 합니다. .
헤드 부분에 라이트박스 코드를 추가하세요.

위 xhtml 코드에 다음을 추가하세요.

최종효과

모든 데모 파일 다운로드

hooline님과 Lokesh Dhakar님께 감사드립니다