Image viewer built with CSS JS_javascript skills

This is a simple image viewer built using CSS JS. Click on the thumbnail to view the large image. The description of each image can be displayed separately. The display position of the large image uses a fixed width and height. The excess part is hidden. Click to enlarge the image. Can be viewed at full size, compatible with: IE, Firefox, Opera.

JS part

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 true;
} }

xhtml

Description of the first large image

• 
  < img src="The address of the first small picture" alt="" />

.
.
.

See the demo file download at the end of the article for CSS code

The current effect

Because the display position of the large image is a fixed size, but the size of each image is different, the result of running the above code is not ideal. In addition, click on the large image to view the full size code. A good method is used here. LightBox effect.

Add in the above JS code:

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

The lightbox needs to have the address of the large image in the A tag. .
Add the lightbox code to the head area.

In the above xhtml code add:

Final effect

Download all demo files

Thanks to hooline and Lokesh Dhakar