CSS LightBox Gallery
Ini adalah Lightbox yang diciptakan dengan menggunakan CSS3, sangat elegan, sederhana dan dapat menampilkan gambar kecil (Thumbnail) ke gambar yang lebih besar dengan sebuah popup gambar, setelah meng-klik gambar thumnail tersebut.
Demo :
Letakan cursor pada gambar thumbnail, kemudian klik...More Detail :
Berikut ini Kode lengkap untuk membuat CSS LightBox Gallery :
<html>
<head>
<!---------------------------------------------- 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-keyframe-lightbox.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.
=================================================================== */
/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
/* tabindex="1" in the link code to fix the 'focus persist' problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
body {padding:0; margin:0; width:100%; height:100%}
a.lightBox, .frame {behavior:url(oneBox/trigger.htc)}
a.lightBox {display:block; float:left; outline:0; padding:5px; border:1px solid #ddd; margin:20px; cursor:pointer;}
a.lightBox img {float:left;}
.oneBox {display:table; position:fixed; top:0; left:-9999px; width:100%; height:100%; z-index:500;}
.oneBox .back {display:block; position:fixed; top:0; left:-9999px; width:100%; height:100%; background:#000; z-index:-1; opacity:0.6; filter: alpha(opacity=60);}
.oneBox .holder {position:relative; z-index:100; text-align:center; display:table-cell; vertical-align:middle; opacity:0;
-webkit-transition: opacity 1.5s;
-moz-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;
}
.oneBox .frame {display:inline-block; margin:0 auto; padding:15px 15px 0 15px; background:#fff; position:relative; text-align:left; font-family:arial, sans-serif;
-ms-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
.oneBox .frame img {width:100%;}
a.lightBox:active {direction:ltr;}
a.lightBox:active ~ .oneBox {left:0;}
a.lightBox:active ~ .oneBox .back {left:0;}
a.lightBox:active ~ .oneBox p {display:block; text-align:right; font:bold 15px/20px arial, sans-serif;}
a.lightBox:focus ~ .oneBox {left:0;}
a.lightBox:focus ~ .oneBox .back {left:0;}
a.lightBox:focus ~ .oneBox .holder {opacity:1;}
a.lightBox:focus ~ .oneBox p {clear:left; display:block; font:bold 12px/18px verdana, arial, sans-serif; color:#666; padding-top:5px;}
a.lightBox ~ .oneBox .frame div {float:left;}
a.a1:focus ~ .oneBox .frame div:before {content:url("bw1.jpg");}
a.a2:focus ~ .oneBox .frame div:before {content:url("bw7.jpg");}
a.a3:focus ~ .oneBox .frame div:before {content:url("bw2.jpg");}
a.a4:focus ~ .oneBox .frame div:before {content:url("bw4.jpg");}
a.a5:focus ~ .oneBox .frame div:before {content:url("bw6.jpg");}
a.a6:focus ~ .oneBox .frame div:before {content:url("bw5.jpg");}
a.a7:focus ~ .oneBox .frame div:before {content:url("bw3.jpg");}
a.lightBox:focus ~ .oneBox .frame div:after {width:32px; height:32px; content:url("close2.png"); position:absolute; right:15px; top:15px; cursor:pointer;}
a.a1:focus ~ .oneBox .frame p:before {content:"image #1";}
a.a2:focus ~ .oneBox .frame p:before {content:"image #2";}
a.a3:focus ~ .oneBox .frame p:before {content:"image #3";}
a.a4:focus ~ .oneBox .frame p:before {content:"image #4";}
a.a5:focus ~ .oneBox .frame p:before {content:"image #5";}
a.a6:focus ~ .oneBox .frame p:before {content:"image #6";}
a.a7:focus ~ .oneBox .frame p:before {content:"image #7";}
a.a1:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"A street entertainer\A This is a photograph I took during a recent visit to Bath where there are many street entertainers.";}
a.a2:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"Cannon wheel\A Part of a cannon at Windsor Castle.";}
a.a3:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"Another street entertainer\A Again taken during a visit to Bath.";}
a.a4:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"Clovelly, North Devon\A A cobbled path down to the sea front at Clovelly.";}
a.a5:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"Spanish dancers\A A holiday in Nerja, Costa del Sol and dancers doing the Argentine Tango.";}
a.a6:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"A seaside cottage\A One of the many beautiful cottages in Boscastle North Cornwall.";}
a.a7:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"A street entertainer\A Yet another entertainer on the streets of Bath.";}
.clear {clear:both;}
</style>
</head>
<body>
<!----------------------------------------------Kode HTML--------------------------------------------------->
<div id="info">
<br />
<a class="lightBox a1" tabindex="1"><img src="oneBox/bw1t.jpg" /></a>
<a class="lightBox a2" tabindex="1"><img src="oneBox/bw7t.jpg" /></a>
<a class="lightBox a3" tabindex="1"><img src="oneBox/bw2t.jpg" /></a>
<br class="clear" />
<a class="lightBox a4" tabindex="1"><img src="oneBox/bw4t.jpg" /></a>
<a class="lightBox a5" tabindex="1"><img src="oneBox/bw6t.jpg" /></a>
<a class="lightBox a6" tabindex="1"><img src="oneBox/bw5t.jpg" /></a>
<a class="lightBox a7" tabindex="1"><img src="oneBox/bw3t.jpg" /></a>
<div class="oneBox">
<div class="back"></div>
<div class="holder">
<div class="frame">
<div></div>
<p></p>
</div>
</div>
</div>
<br class="clear" />
<br />
</div> <!-- end of info -->
</body>
</html>
<head>
<!---------------------------------------------- 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-keyframe-lightbox.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.
=================================================================== */
/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
/* tabindex="1" in the link code to fix the 'focus persist' problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
body {padding:0; margin:0; width:100%; height:100%}
a.lightBox, .frame {behavior:url(oneBox/trigger.htc)}
a.lightBox {display:block; float:left; outline:0; padding:5px; border:1px solid #ddd; margin:20px; cursor:pointer;}
a.lightBox img {float:left;}
.oneBox {display:table; position:fixed; top:0; left:-9999px; width:100%; height:100%; z-index:500;}
.oneBox .back {display:block; position:fixed; top:0; left:-9999px; width:100%; height:100%; background:#000; z-index:-1; opacity:0.6; filter: alpha(opacity=60);}
.oneBox .holder {position:relative; z-index:100; text-align:center; display:table-cell; vertical-align:middle; opacity:0;
-webkit-transition: opacity 1.5s;
-moz-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;
}
.oneBox .frame {display:inline-block; margin:0 auto; padding:15px 15px 0 15px; background:#fff; position:relative; text-align:left; font-family:arial, sans-serif;
-ms-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
.oneBox .frame img {width:100%;}
a.lightBox:active {direction:ltr;}
a.lightBox:active ~ .oneBox {left:0;}
a.lightBox:active ~ .oneBox .back {left:0;}
a.lightBox:active ~ .oneBox p {display:block; text-align:right; font:bold 15px/20px arial, sans-serif;}
a.lightBox:focus ~ .oneBox {left:0;}
a.lightBox:focus ~ .oneBox .back {left:0;}
a.lightBox:focus ~ .oneBox .holder {opacity:1;}
a.lightBox:focus ~ .oneBox p {clear:left; display:block; font:bold 12px/18px verdana, arial, sans-serif; color:#666; padding-top:5px;}
a.lightBox ~ .oneBox .frame div {float:left;}
a.a1:focus ~ .oneBox .frame div:before {content:url("bw1.jpg");}
a.a2:focus ~ .oneBox .frame div:before {content:url("bw7.jpg");}
a.a3:focus ~ .oneBox .frame div:before {content:url("bw2.jpg");}
a.a4:focus ~ .oneBox .frame div:before {content:url("bw4.jpg");}
a.a5:focus ~ .oneBox .frame div:before {content:url("bw6.jpg");}
a.a6:focus ~ .oneBox .frame div:before {content:url("bw5.jpg");}
a.a7:focus ~ .oneBox .frame div:before {content:url("bw3.jpg");}
a.lightBox:focus ~ .oneBox .frame div:after {width:32px; height:32px; content:url("close2.png"); position:absolute; right:15px; top:15px; cursor:pointer;}
a.a1:focus ~ .oneBox .frame p:before {content:"image #1";}
a.a2:focus ~ .oneBox .frame p:before {content:"image #2";}
a.a3:focus ~ .oneBox .frame p:before {content:"image #3";}
a.a4:focus ~ .oneBox .frame p:before {content:"image #4";}
a.a5:focus ~ .oneBox .frame p:before {content:"image #5";}
a.a6:focus ~ .oneBox .frame p:before {content:"image #6";}
a.a7:focus ~ .oneBox .frame p:before {content:"image #7";}
a.a1:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"A street entertainer\A This is a photograph I took during a recent visit to Bath where there are many street entertainers.";}
a.a2:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"Cannon wheel\A Part of a cannon at Windsor Castle.";}
a.a3:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"Another street entertainer\A Again taken during a visit to Bath.";}
a.a4:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"Clovelly, North Devon\A A cobbled path down to the sea front at Clovelly.";}
a.a5:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"Spanish dancers\A A holiday in Nerja, Costa del Sol and dancers doing the Argentine Tango.";}
a.a6:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"A seaside cottage\A One of the many beautiful cottages in Boscastle North Cornwall.";}
a.a7:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; content:"A street entertainer\A Yet another entertainer on the streets of Bath.";}
.clear {clear:both;}
</style>
</head>
<body>
<!----------------------------------------------Kode HTML--------------------------------------------------->
<div id="info">
<br />
<a class="lightBox a1" tabindex="1"><img src="oneBox/bw1t.jpg" /></a>
<a class="lightBox a2" tabindex="1"><img src="oneBox/bw7t.jpg" /></a>
<a class="lightBox a3" tabindex="1"><img src="oneBox/bw2t.jpg" /></a>
<br class="clear" />
<a class="lightBox a4" tabindex="1"><img src="oneBox/bw4t.jpg" /></a>
<a class="lightBox a5" tabindex="1"><img src="oneBox/bw6t.jpg" /></a>
<a class="lightBox a6" tabindex="1"><img src="oneBox/bw5t.jpg" /></a>
<a class="lightBox a7" tabindex="1"><img src="oneBox/bw3t.jpg" /></a>
<div class="oneBox">
<div class="back"></div>
<div class="holder">
<div class="frame">
<div></div>
<p></p>
</div>
</div>
</div>
<br class="clear" />
<br />
</div> <!-- end of info -->
</body>
</html>
Keterangan:
Text warna Merah: Sebagai gambar besar yang akan ditampilkan dalam Popup
Text warna Kuning: Title/ Judul gambar
Text warna Hijau: Deskripsi Gambar
Text warna Biru: Gambar kecil (Thumbnail)
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon