Css+js-built picture viewer _javascript Tips

This is a simple picture viewer built using CSS + JS, use thumbnail click to see a large image, you can display each picture description, the larger picture shows the location using fixed width and height, beyond the part of the hidden, click on the big picture can see the full size, Compatibility: 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

<div id= "album" >
<div id= "pic" >

</div>
<p id= "desc" > Description of the first big picture </p>
<DIV id= "Thumbs" >
<ul>
<li><a onclick= "Return Showpic" (this); "href=" The address of the first big picture "title=" >
</a></li>
.
.
.
</ul>
</div>
</div>

CSS code see the end of the article demo file download

Now the effect

Because the big picture display position is fixed size, but the picture each size is different, so the above code runs the result is not ideal, but also must add clicks the big picture to view the complete size code, here uses the good lightbox effect.

In the above JS code to add:

document.getElementById (' Showlightbox '). href = Whichpic.href;

Lightbox need to have a large image address in the a tag.
The head area adds the Lightbox code.

In the XHTML code above, add:

<div id= "pic" > <a href= "The address of the first big picture" rel= "Lightbox" id= "Showlightbox" >
</a>
</div>

Final effect

Download all demo files

Thanks to Hooline and Lokesh Dhakar.