JQuery Lightbox untuk Komik

Tambahan ekstra fungsi untuk navigasi next & prev.

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 {
  background-color:#E3E0D1;
  padding:30px 50px;
  font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
  text-transform:uppercase;
}

a {
  color:black;
}

.img-show {
  width:400px;
  margin:50px 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 url('http://reader-download.googlecode.com/svn/trunk/comic-page-navigation/img/loading.gif') no-repeat 50% 300px;
}

.img-show .img-holder img {
  display:block;
}

.img-show .img-nav {
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

.img-show .img-nav li {
  margin:2px 2px 0px 0px;
  padding:0px 0px;
  float:left;
  display:inline;
  list-style:none;
}

.img-nav li a {
  display:block;
  background-color:#ccc;
  color:black;
  padding:3px 7px;
  font:normal 12px Georgia,Serif;
  font-style:italic;
  text-decoration:none;
}

.img-nav li a.active {
  background-color:#900;
  color:white;
}

.img-gallery {display:none}

nav {
  font-size:30px;
  text-align:center;
}

nav a {text-decoration:none}

JavaScript

$(function() {
    $('.img-gallery').each(function() {
        var w = $(this).data("width"),
            h = $(this).data("height"),
            viewport = $('html, body'),
            fadeSpeed = 400,
            resizeSpeed = 600;
        $(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) {
            i = i + 1;
            $(this).attr("title", $(this).text());
            $(this).html(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() {
                $parent.animate({
                    width: $(this).width()
                },...