Web effects: CSS + JS Construction of the picture viewer
CSS + JS Construction of the picture viewer
This is a use of CSS + JS Construction of the simple picture viewer with thumbnail click to view map, can each picture showed the description of the display location of a fixed width and height in excess of hiding, click on the map to see full size, compatibility: IE, Firefox, Opera.
JS part
The following is quoted fragment:
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
The following is quoted fragment:
<div Id="album">
<div Id="pic">
<img Src="ç¬¬ä¸€å¼ å¤§å›¾çš„åœ°å€" alt="" id="placeholder" />
</ Div>
<p Id="desc"> first described Da map </ p>
<div Id="thumbs">
<ul>
<li> <a Onclick="return showPic(this);" href="ç¬¬ä¸€å¼ å¤§å›¾çš„åœ°å€" title="">
<img Src="ç¬¬ä¸€å¼ å°å›¾çš„地å€" alt="" /> </ a> </ li>
.
.
.
</ Ul>
</ Div>
</ Div>
CSS code, see end of article Demo Download
Now the effect of
Because the figure shows the location of a fixed size, but the size of each picture is different, so the results of running the code above is not ideal, but also click on the View larger size of the code entirely, a good here LightBox effect.
In the above code to join JS
Document.getElementById ( 'ShowLightBox'). Href = whichpic.href;
A lightbox need a big label, there are plans address. .
District head to join lightbox code.
In the above code into xhtml
The following is quoted fragment:
<div Id="pic"> <a href="ç¬¬ä¸€å¼ å¤§å›¾çš„åœ°å€" rel="lightbox" id="ShowLightBox">
<img Src="ç¬¬ä¸€å¼ å¤§å›¾çš„åœ°å€" alt="点击查看完全尺寸" id="placeholder" /> </ a>
</ Div>
Tags: css effects firefox, div effects
Leave a Reply