JQuery Lightbox Sederhana

by Taufik Nurrohman

HTML

<div id="gallery">
    <a href="http://1.bp.blogspot.com/-nbdkpUFwK8U/T4O0nNYb_0I/AAAAAAAACek/hfNCDTzc2M4/s1600/1.jpg" title="Gambar Pertama">
        <img src="http://4.bp.blogspot.com/-W-w1TnmRGlY/T4OxvBNIfVI/AAAAAAAACd8/duI1nZNauxI/s1600/1.jpg" alt="thumb" />
    </a>
    <a href="http://4.bp.blogspot.com/-ol75f3LxZnA/T4O0ww0byuI/AAAAAAAACes/bfK-6c6W16E/s1600/2.jpg" title="Happy Fairy Tail">
        <img src="http://2.bp.blogspot.com/-RzuXxRrdnxM/T4Ox0FhVM9I/AAAAAAAACeE/XCynwt5_eUM/s1600/2.jpg" alt="thumb" />
    </a>
    <a href="http://4.bp.blogspot.com/-LmBW00wpooc/T4O1BkdHaqI/AAAAAAAACe0/8qTkMsR6chU/s1600/3.png" title="Fairy Tail Happy">
        <img src="http://4.bp.blogspot.com/--9dxP0aMbjo/T4Ox4SITu2I/AAAAAAAACeM/Hiq7d1UJTJE/s1600/3.png" alt="thumb" />
    </a>
    <a href="http://1.bp.blogspot.com/-Pc_V6Mt9agY/T4O1Km4PyiI/AAAAAAAACe8/q12NeCzbOzk/s1600/4.jpg" title="Gambar ke Empat">
        <img src="http://4.bp.blogspot.com/-vWczQ0NqRfs/T4Ox-kTsR-I/AAAAAAAACeU/dNXDw-KdZDU/s1600/4.jpg" alt="thumb" />
    </a>
    <a href="http://4.bp.blogspot.com/-8BAUZjuzeRw/T4O12P1qrOI/AAAAAAAACfE/Z7_RUQAWwe8/s1600/5.png" title="Lorem Ipsum">
        <img src="http://2.bp.blogspot.com/-smECiqiMvx0/T4OxshPX5hI/AAAAAAAACd0/Owe19Q4rw_k/s1600/5.png" alt="thumb" />
    </a>
    <a href="http://2.bp.blogspot.com/-i__KpC0CjVg/T4O1-EKQpiI/AAAAAAAACfM/yl-23gkVGbE/s1600/6.jpg" title="Tempe Goreng">
        <img src="http://4.bp.blogspot.com/-Zl0j-nKQkV8/T4OyBOJiq-I/AAAAAAAACec/57xp2BUMAXg/s1600/6.jpg" alt="thumb" />
    </a>
    <a href="http://www.google.co.id">Test Link</a>
</div>

CSS

body {background-color:#333;}

#gallery {overflow:hidden;padding:20px;}

#gallery a {
  display:block;
  float:left;
  margin:2px;    
}

#gallery a img {
  display:block;
  border:2px solid white;    
}

/* Lightbox */
#imgOverlay {
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  z-index:9997;
  background-color:black;
  opacity:0.8;
  display:none;
}

#closeLightbox {
  display:block;
  font:bold 14px Arial,Sans-Serif;
  color:white;
  text-decoration:none;
  position:absolute;
  top:20px;
  right:26px;
  z-index:9999;
  display:none;
}

#imgWrapper {
  position:absolute;
  top:70px;
  right:0px;
  left:0px;
  text-align:center;
  z-index:9999;
}

img#imgShow {
  margin:0px auto 70px;
  display:none;
}

img#lightboxLoader {
  display:block;
  margin:30px auto 0px;
}

#imgCap {
  position:absolute;
  top:10px;
  left:15px;
  color:white;
  z-index:9999;
}

JavaScript

$('body').css('overflow-y', 'scroll').append('<div id="imgOverlay"></div><div id="imgWrapper"></div><a href="#" id="closeLightbox" title="Tutup!">&#215;</a>');
$('#imgOverlay').css({
    'width':$(window).width(),
    'height':$(document).height()
});
$('a:has(img)').click(function() {
    $('#imgOverlay, #imgWrapper, #closeLightbox').show();
    $('#imgWrapper').append('<img id="imgShow" src="' + this.href + '" alt="' + this.title + '" />');
    $('body').append('<div id="imgCap">Loading...</div>');
    $('img#imgShow').load(function() {
        $(this).fadeIn(600);
        $('#imgCap').html(this.alt);
    });
    return false;
});

$('a#closeLightbox').click(function() {
    $(this).hide();
    $('img#imgShow, #imgCap').remove();
    $('#imgOverlay, #imgWrapper').fadeOut();
    return false;
});