Cara Membuat Lightbox Responsive Terbaru Lebih Keren
Wednesday, November 12, 2014
Add Comment
Blogger sendiri memiliki fitur lighbox, namun lightbox bawaan blogger menurut saya tidak begitu keren :D, dengan begitu sobat dapat memanfaatkan lightbox ini agar lebih keren.
Silahkan lihat Demo Lightbox
Jika tertarik untuk membuatnya, silahkan gunakan kode - kode berikut:
Kode CSS
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}
#cboxWrapper{max-width:none}
#cboxOverlay{position:fixed;width:100%;height:100%}
#cboxMiddleLeft,#cboxBottomLeft{clear:left}
#cboxContent{position:relative}
#cboxLoadedContent{overflow:hidden!important;-webkit-overflow-scrolling:touch}
#cboxTitle{margin:0}
#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}
#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}
.cboxPhoto{border:0;width:100%!important;height:auto!important;margin-bottom:-5px;}
.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}
#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}
#cboxOverlay{background:#000}
#colorbox{outline:0}
#cboxContent{margin-top:20px;background:#000}
.cboxIframe{background:#fff}
#cboxError{padding:50px;border:1px solid #ccc}
#cboxLoadedContent{border:5px solid #000;background:#fff}
#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc;visibility:hidden}
#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}
#cboxLoadingGraphic{background:url(http://www.jacklmoore.com/colorbox/example3/images/loading.gif) no-repeat center center}
#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0}
#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}
#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}
#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(http://www.jacklmoore.com/colorbox/example3/images/controls.png)no-repeat top left;width:28px;height:65px;text-indent:-9999px}
#cboxPrevious:hover{background-position:bottom left}
#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(http://www.jacklmoore.com/colorbox/example3/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}
#cboxNext:hover{background-position:bottom right}
#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(http://www.jacklmoore.com/colorbox/example3/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}
#cboxClose:hover{background-position:bottom center}
Kode Javascript
Tempatkan diatas </body>
<script src='http://yourjavascript.com/311412413010/jquery-colorbox-min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"auto"});
});
//]]>
</script>
Kode HTML
Untuk penyimpanan gambar dipostingan, silahkan gunakan kode HTML dibawah ini:
<a class="group3" href="URL GAMBAR BESAR" title="Title Gambar Di Sini"><img alt="thumbnail" src="URL GAMBAR KECIL" width="200" height="130" title="Title Gambar Di Sini"/></a>
Source: Kompiajaib.com
0 Response to "Cara Membuat Lightbox Responsive Terbaru Lebih Keren"
Post a Comment
Silahkan berkomentar sesuai topik yang dibahas. tidak diperbolehkan menyertakan link hidup, jika melanggar komentar akan dihapus. :)