Lightbox Versi Colorbox

Assalamualaikum - underground404. Lamaa kita bertemu (lebay) tapi bener juga kalau saya lama tidak posting, huhu. Maav saya belom ada inspirasi untuk membuat postingan yg menggetarkan dunia blogger, wakakaka (ngimpi) tpi mungkin saja kalau mimpi saya tercapai Amiiieenn. Udah tau apa itu Lightbox?? Menurut situs wikipedia "Lightbox, adalah teknik JavaScript digunakan untuk menampilkan gambar besar dengan menggunakan modal dialog." yah memang benar seperti itu maksud dari lightbox wakak :D. Sudahkah tau anda tentang lightbox?? kalau saya sih taunya saat jalan jalan di situs2 besar / situs yg benar2 Hi tech (wow) udah an dlu penjelasannya. Demonya bisa dilihat gambar dibawah ini

Sudah tau?? Lightbox itu seperti itu, tpi itu versi colorbox, banyak versinya sih dari situs besar. Tapi yg versi ini gratis scriptnya, haha. Itung2 gak pake fulus. Toh ini juga gak mbuat lemot, cuman pakai 1script loader dan 1script induk jquerynya dan 1script jqueryselector + sama cssnya. Kalau dibandingkan dengan lightbox lainnya yang banyak menggunakan script.

#colorbox,#cboxOverlay,#cboxWrapper {
  position:absolute;
  top:0;
  left:0;
  z-index:9999;
  overflow:hidden;
}
#cboxOverlay {
  position:fixed;
  width:100%;
  height:100%;
}
#cboxMiddleLeft,#cboxBottomLeft {
  clear:left;
}
#cboxContent {
  position:relative;
}
#cboxLoadedContent {
  overflow:auto;
}
#cboxTitle {
  margin:0;
}
#cboxLoadingOverlay,#cboxLoadingGraphic {
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow {
  cursor:pointer;
}
.cboxPhoto {
  float:left;
  margin:auto;
  border:0;
  display:block;
}
.cboxIframe {
  width:100%;
  height:100%;
  display:block;
  border:0;
}
#cboxOverlay {
  background:#000;
}
#colorbox {}
#cboxTopLeft {
  width:14px;
  height:14px;
  background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat 0 0;
}
#cboxTopCenter {
  height:14px;
  background:url(https://sites.google.com/site/fowziey/colorbox_border.png) repeat-x top left;
}
#cboxTopRight {
  width:14px;
  height:14px;
  background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat -36px 0;
}
#cboxBottomLeft {
  width:14px;
  height:43px;
  background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat 0 -32px;
}
#cboxBottomCenter {
  height:43px;
  background:url(https://sites.google.com/site/fowziey/colorbox_border.png) repeat-x bottom left;
}
#cboxBottomRight {
  width:14px;
  height:43px;
  background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat -36px -32px;
}
#cboxMiddleLeft {
  width:14px;
  background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) repeat-y -175px 0;
}
#cboxMiddleRight {
  width:14px;
  background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) repeat-y -211px 0;
}
#cboxContent {
  background:#fff;
  overflow:visible;
}
#cboxLoadedContent {
  margin-bottom:5px;
}
#cboxLoadingOverlay {
  background:url(https://sites.google.com/site/fowziey/colorbox_loading_background.png) no-repeat center center;
}
#cboxLoadingGraphic {
  background:url(https://sites.google.com/site/fowziey/colorbox_loading.gif) no-repeat center center;
}
#cboxTitle {
  position:absolute;
  bottom:-25px;
  left:0;
  text-align:center;
  width:100%;
  font-weight:bold;
  color:#7C7C7C;
}
#cboxCurrent {
  position:absolute;
  bottom:-25px;
  left:58px;
  font-weight:bold;
  color:#7C7C7C;
}
#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow {
  position:absolute;
  bottom:-29px;
  background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat 0px 0px;
  width:23px;
  height:23px;
  text-indent:-9999px;
}
#cboxPrevious {
  left:0px;
  background-position:-51px -25px;
}
#cboxPrevious.hover {
  background-position:-51px 0px;
}
#cboxNext {
  left:27px;
  background-position:-75px -25px;
}
#cboxNext.hover {
  background-position:-75px 0px;
}
#cboxClose {
  right:0;
  background-position:-100px -25px;
}
#cboxClose.hover {
  background-position:-100px 0px;
}
.cboxSlideshow_on #cboxSlideshow {
  background-position:-125px 0px;
  right:27px;
}
.cboxSlideshow_on #cboxSlideshow.hover {
  background-position:-150px 0px;
}
.cboxSlideshow_off #cboxSlideshow {
  background-position:-150px -25px;
  right:27px;
}
.cboxSlideshow_off #cboxSlideshow.hover {
  background-position:-125px 0px;
}

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='https://underground404.googlecode.com/svn/branches/jquery.colorbox.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[

$(document).ready(function(){

  $("a.color-elastic").colorbox();
  $("a.color-fade").colorbox({transition:"fade"});
  $("a.color-slideshow").colorbox({slideshow:true});
  $(".color").colorbox();
  $(".color-video").colorbox({iframe:true, innerWidth:425, innerHeight:344});
  $(".color-iframe").colorbox({width:"80%", height:"80%", iframe:true});
  $(".color-inline").colorbox({width:"50%", inline:true, href:"#Description"});

  $("#click").click(function(){ 
    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and   this message will still be here.");
    return false;
  });
});

//]]>
</script>

Pemanggilan Colorbox

1. Satu Gambar (Single Image)

<a class='color' href="IMAGE URL" title="IMAGE CAPTION"> <img height='90' width='120' src="IMAGE URL"/> </a>

Height dan Widthnya bisa disesuaikan gambar.
2. Beberapa Gambar elastic Effect (Gallery Image)

<a class="color-elastic" href="IMAGE_01 URL" rel="GALLERYTITLE" title="IMAGE_01 CAPTION"> <img height="90" src="IMAGE_01 URL" width="120" /> </a> <a class="color-elastic" href="IMAGE_02 URL" rel="GALLERYTITLE" title="IMAGE_02 CAPTION"> <img height="90" src="IMAGE_02 URL" width="120" /> </a>

Height dan Widthnya bisa disesuaikan gambar.
3. Beberapa Gambar fade Effect (Gallery Image)

<a class="color-fade" href="IMAGE_01 URL" rel="GALLERYTITLE" title="IMAGE_01 CAPTION"> <img height="90" src="IMAGE_01 URL" width="120" /> </a> <a class="color-fade" href="IMAGE_02 URL" rel="GALLERYTITLE" title="IMAGE_02 CAPTION"> <img height="90" src="IMAGE_02 URL" width="120" /> </a> <a class="color-fade" href="IMAGE_03 URL" rel="GALLERYTITLE" title="IMAGE_02 CAPTION"> <img height="90" src="IMAGE_03 URL" width="120" /> </a>

Height dan Widthnya bisa disesuaikan gambar.
4. Slideshow

<a class="color-slideshow" href="IMAGE_01 URL" rel="GALLERYTITLE" title="IMAGE_01 CAPTION"> <img height="90" src="IMAGE_01 URL" width="120" /> </a> <a class="color-slideshow" href="IMAGE_02 URL" rel="GALLERYTITLE" title="IMAGE_02 CAPTION"> <img height="90" src="IMAGE_02 URL" width="120" /> </a> <a class="color-slideshow" href="IMAGE_03 URL" rel="GALLERYTITLE" title="IMAGE_03 CAPTION"> <img height="90" src="IMAGE_03 URL" width="120" /> </a>

Height dan Widthnya bisa disesuaikan gambar.
5. Pemanggilan Video / Vidio

<!--For Youtube--> <a class='color-video' href="YOUTUBE EMBED CODE URL" title="VIDEO TITLE"> <img border='0' height='90' width='120' src="YOUTUBE LOGO URL"/> </a> <!--Same for Vimeo--> <a class='color-video' href="VIMEO EMBED CODE URL" title="VIDEO TITLE"> <img border='0' height='90' width='120' src="VIMEO LOGO URL"/> </a> <!--OR use simple link--> <a class='color-video' href="YOUTUBE/VIMEO EMBED CODE URL" title="VIDEO TITLE">WATCH THE VIDEO</a>

Height dan Widthnya bisa disesuaikan gambar.
6. Content Colorbox
Mungkin belom pada tau ini caranya?? seumpanya content tertentu yg disembunyikan, kemudian cara memunculkannya dengan sebuah tombol ataupun sebuah link. <a class="color-inline" href='#Description'>Klik to View</a>

<div style='display:none'> <div id='Description' style='padding:10px; background:#fff;'> <p>Lorem ipsum dolor sit amet, ullamcorper adipiscing meus incassum, paulatim abigo erat, tation populus, melior nulla immitto hendrerit. Pneum abigo magna blandit diam ad commoveo. In in neque tum tum, esca, quis nisl. </p> </div> </div>

Kata yang berwarna lime harus sama.
7. Iframe

<a class="color-iframe" href='WEB URL'>CLICK TO VIEW</a>