JQuery Lightbox untuk Komik

by Taufik Nurrohman

HTML

<ul class="img-gallery" data-width="300" data-height="200">
    <li><a href="http://3.bp.blogspot.com/-pKzBtgbevrE/T4lePB1-bEI/AAAAAAAACfw/Gh85bcEEGNY/s300/iframe-preloader.png">Judul Halaman 1</a></li>
    <li><a href="http://3.bp.blogspot.com/-pKzBtgbevrE/T4lePB1-bEI/AAAAAAAACfw/Gh85bcEEGNY/s200/iframe-preloader.png">Judul Halaman 2</a></li>
    <li><a href="http://3.bp.blogspot.com/-pKzBtgbevrE/T4lePB1-bEI/AAAAAAAACfw/Gh85bcEEGNY/s1600/iframe-preloader.png">Judul Halaman 3</a></li>
    <li><a href="http://3.bp.blogspot.com/-pKzBtgbevrE/T4lePB1-bEI/AAAAAAAACfw/Gh85bcEEGNY/s300/iframe-preloader.png">Judul Halaman 1</a></li>
    <li><a href="http://3.bp.blogspot.com/-pKzBtgbevrE/T4lePB1-bEI/AAAAAAAACfw/Gh85bcEEGNY/s200/iframe-preloader.png">Judul Halaman 2</a></li>
    <li><a href="http://3.bp.blogspot.com/-pKzBtgbevrE/T4lePB1-bEI/AAAAAAAACfw/Gh85bcEEGNY/s1600/iframe-preloader.png">Judul Halaman 3</a></li>
    <li><a href="http://3.bp.blogspot.com/-pKzBtgbevrE/T4lePB1-bEI/AAAAAAAACfw/Gh85bcEEGNY/s300/iframe-preloader.png">Judul Halaman 1</a></li>
    <li><a href="http://3.bp.blogspot.com/-pKzBtgbevrE/T4lePB1-bEI/AAAAAAAACfw/Gh85bcEEGNY/s200/iframe-preloader.png">Judul Halaman 2</a></li>
    <li><a href="http://3.bp.blogspot.com/-pKzBtgbevrE/T4lePB1-bEI/AAAAAAAACfw/Gh85bcEEGNY/s1600/iframe-preloader.png">Judul Halaman 3</a></li>
    <li><a href="http://3.bp.blogspot.com/-pKzBtgbevrE/T4lePB1-bEI/AAAAAAAACfw/Gh85bcEEGNY/s300/iframe-preloader.png">Judul Halaman 1</a></li>
    <li><a href="http://3.bp.blogspot.com/-pKzBtgbevrE/T4lePB1-bEI/AAAAAAAACfw/Gh85bcEEGNY/s200/iframe-preloader.png">Judul Halaman 2</a></li>
    <li><a href="http://3.bp.blogspot.com/-pKzBtgbevrE/T4lePB1-bEI/AAAAAAAACfw/Gh85bcEEGNY/s1600/iframe-preloader.png">Judul Halaman 3</a></li>
    <li><a href="http://3.bp.blogspot.com/-pKzBtgbevrE/T4lePB1-bEI/AAAAAAAACfw/Gh85bcEEGNY/s300/iframe-preloader.png">Judul Halaman 1</a></li>
    <li><a...

CSS

body {
  padding:15px;
  background-color:whitesmoke;
}

.img-show {
  width:400px;
  margin:5px auto;
  background-color:black;
  border:2px solid black;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  position:relative;
  overflow:hidden;
}

.img-show .img-holder {
  background-color:white;
}

.img-show .img-holder.loading {
  background:white...

JavaScript

$(function() {
    var alphabet = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
    $('.img-gallery').each(function() {
        var w = $(this).data("width"),
            h = $(this).data("height"),
            viewport = $('html, body'),
            fadeSpeed = 400, // Kecepatan efek fading
            resizeSpeed = 600; // Kecepatan efek pelebaran/penyusutan
        $(this).addClass('img-nav').wrap('<div class="img-show" style="width:' + w + 'px;"></div>');
        var $firstNav = $('li:first a', this),
            current = $firstNav.attr('href'),
            $parent = $(this).parents('.img-show');
        $firstNav.addClass('active');
        $parent.prepend('<div class="img-holder" style="height:' + h + 'px;"></div>');
        $parent.find('.img-holder').addClass('loading').html('<img class="transparent" src="' + current + '" alt="Loading..."/>');
        $parent.find('img.transparent').css('opacity', 0).load(function() {
            $parent.animate({width:$(this).width()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {
                $(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);
            });
        });
        
        $('a', this).each(function(i) {
            $(this).attr("title", $(this).text());
            $(this).html(alphabet[i]);
        }).on("click", function() {
            var $activeNav = $(this).parents('.img-gallery').find('a.active'),
                $activeParent = $(this).parents('.img-show');
            $activeNav.removeClass('active');
            viewport.scrollTop($activeParent.offset().top-40);
            $(this).addClass('active').parents('.img-show').find('.img-holder').html('<img class="transparent" src="' + this.href + '" alt="Loading..."/>');
            $parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {
               ...