Click Lightbox Gallery

<!-----------------------START KODE CSS------------------------->
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/css3-clickbox-gallery.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
a, a:visited, a:hover, a:active, a:focus {}
a.clickbox, a.clickbox:visited, a.clickbox:hover {text-decoration:none; padding-left:10px; font:bold 20px/40px georgia, sans-serif; color:#00c;}
a.clickbox:hover {text-decoration:underline;}

a.clickbox img {display:block; border:0;}

a.clickbox + b {display:block;}

a.clickbox {float:left; display:inline;}

a.clickbox + .lightbox {position:absolute; left:-99999px; top:0; cursor:default; z-index:500;}
a.clickbox .lightbox {position:absolute; left:-99999px; top:0; cursor:default; z-index:500;}

a.clickbox + .lightbox .light {position:absolute; left:0; top:0; width:100%;}
a.clickbox + .lightbox .box {position:absolute; left:0; width:100%; text-align:center; height:300px; top:20px;}
/* trigger for IE6 */
a.clickbox:active, a.clickbox:focus {color:red}

a.clickbox:active + .lightbox {left:0; width:100%; height:100%;}
a.clickbox + .lightbox:hover,
a.clickbox:focus + .lightbox {position:fixed; left:0; width:100%; height:100%;}

a.clickbox + .lightbox:hover .light,
a.clickbox:active + .lightbox .light,
a.clickbox:focus + .lightbox .light {background:#000; width:100%; height:100%; filter: alpha(opacity=75);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75); opacity:0.75;
}

.clear {clear:left;}

a.clickbox + .lightbox i {display:block; width:100px; height:20px; position:fixed; right:-100px; top:0; z-index:500; color:#000; font:normal normal 14px/20px arial, sans-serif; text-align:center; background:#fff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

a.clickbox + .lightbox:hover i,
a.clickbox:active + .lightbox i,
a.clickbox:focus + .lightbox i {right:50%; margin-right:-50px; top:5px;}

a.clickbox + .lightbox + #close {display:block; position:fixed; width:100px; height:20px; overflow:hidden; right:-100px; top:10px; z-index:1000; background:url(clickbox/trans.gif); cursor:pointer;}

a.clickbox + .lightbox:hover + #close,
a.clickbox:active + .lightbox + #close,
a.clickbox:focus + .lightbox + #close {right:50%; margin-right:-50px; top:5px;}


#gallery {
display:inline-block;
position:relative;
overflow:hidden;
}
#gallery #fullsize {
width:480px;
height:480px;
overflow:scroll;
overflow-y:hidden;
margin-bottom:-18px;
}
#gallery #fullsize div {width:480px; height:480px; position:relative;}
#gallery #fullsize div img {display:block; margin:0 auto; border:0; padding:10px 10px 0 10px; background:#fff; border:1px solid #000; border-width:1px 1px 0 1px;}
#gallery #fullsize div a {display:block; top:20px; position:absolute; outline:0; z-index:500; background:url(https://sites.google.com/site/archivesiugi/javascr/clickboxtrans.gif);}
#gallery #fullsize div.vt a.left {height:360px; width:135px; position:absolute; left:105px;}
#gallery #fullsize div.vt a.right {height:360px; width:135px; position:absolute; left:240px;}
#gallery #fullsize div.hz a.left {height:270px; width:180px; position:absolute; left:60px;}
#gallery #fullsize div.hz a.right {height:270px; width:180px; position:absolute; left:240px;}

#gallery #fullsize div a.left:hover {background:url(https://sites.google.com/site/archivesiugi/javascr/clickboxprev.png) no-repeat left 20px;}
#gallery #fullsize div a.right:hover {background:url(https://sites.google.com/site/archivesiugi/javascr/clickboxnext.png) no-repeat right 20px;}

#gallery #fullsize div p {background:#fff; margin:0 auto; padding:10px; border:1px solid #000; border-width:0 1px 1px 1px; font-weight:normal; color:#444;}

#gallery #fullsize div.vt p {width:270px;}
#gallery #fullsize div.hz p {width:360px;}
</style>
<!-----------------------END KODE CSS--------------------------->


<!----------------------START KODE HTML------------------------->
<div id="info">

<h2>Click Lightbox Gallery</h2>
<h2>For Firefox, Opera, Safari, Chrome, IE8, SeaMonkey and Flock</h2>
<h2>Click the link below for the Clickbox Gallery</h2>
<br /><br />
<a class="clickbox" href="#url">Click Lightbox Gallery</a>
<b class="lightbox">
<b class="light"></b>
<b class="box">
<div id="gallery">
<div id="fullsize">
<div id="pic1" class="vt"><a class="left" href="#pic10"></a><img src="clickbox/pic1.jpg" alt="pic1" /><a class="right" href="#pic2"></a><p>Some descriptive text</p></div>
<div id="pic2" class="vt"><a class="left" href="#pic1"></a><img src="clickbox/pic2.jpg" alt="pic2" /><a class="right" href="#pic3"></a><p>Some more descriptive text</p></div>
<div id="pic3" class="hz"><a class="left" href="#pic2"></a><img src="clickbox/pic3.jpg" alt="pic3" /><a class="right" href="#pic4"></a><p>Another line of descriptive text</p></div>
<div id="pic4" class="vt"><a class="left" href="#pic3"></a><img src="clickbox/pic4.jpg" alt="pic4" /><a class="right" href="#pic5"></a><p>Some more descriptive text</p></div>
<div id="pic5" class="hz"><a class="left" href="#pic4"></a><img src="clickbox/pic5.jpg" alt="pic5" /><a class="right" href="#pic6"></a><p>This can be any text and as long as you like. It will wrap onto a second and third line if it is too long.</p></div>
<div id="pic6" class="vt"><a class="left" href="#pic5"></a><img src="clickbox/pic6.jpg" alt="pic5" /><a class="right" href="#pic7"></a><p>Further descriptive text</p></div>
<div id="pic7" class="hz"><a class="left" href="#pic6"></a><img src="clickbox/pic7.jpg" alt="pic5" /><a class="right" href="#pic8"></a><p>Some more descriptive text</p></div>
<div id="pic8" class="hz"><a class="left" href="#pic7"></a><img src="clickbox/pic8.jpg" alt="pic5" /><a class="right" href="#pic9"></a><p>Yet more descriptive text</p></div>
<div id="pic9" class="hz"><a class="left" href="#pic8"></a><img src="clickbox/pic9.jpg" alt="pic5" /><a class="right" href="#pic10"></a><p>Some more descriptive text</p></div>
<div id="pic10" class="hz"><a class="left" href="#pic9"></a><img src="clickbox/pic10.jpg" alt="pic5" /><a class="right" href="#pic1"></a><p>Some more descriptive text</p></div>
</div>
</div>
<i>CLOSE</i>
</b>
</b>
<div id="close">&nbsp;</div>
<br /><br /><br /><br />

</div> <!-- end info -->
<!------------------------END KODE HTML------------------------->