Image Viewer _ javascript techniques built with CSS + JS

The Image Viewer built by CSS + JS is a simple image Viewer built by CSS + JS. You can click the thumbnail to view the large image and view the description of each image separately, the position of the big chart is fixed in width and height. The excess part is hidden. Click the big chart to view the full size. Compatibility: IE, Firefox, and Opera.

JS Section

Function showPic (whichpic ){
If (document. getElementById ){
Document. getElementById ('holder'). 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 big image

• 
  

.
.
.

For CSS code, see the demonstration file download at the end of the article.

Current results

Because the position of the big image is fixed, but the size of each image is different, the running result of the above Code is not ideal. You need to click the big picture to view the full size code, here we use a good LightBox effect.

Add the following to the above JS Code:

Document. getElementById ('showlightbox'). href = whichpic. href;

Lightbox needs to have A big image address in label ..
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