JavaScript Comic Page with Navigation Demo

http://www.dte.web.id

by Taufik Nurrohman

HTML

<ul class="img-gallery" data-width="160" data-height="200">
	<li><a href="http://lh4.googleusercontent.com/-SGdl7HOzsf0/Uol4KOj2GGI/AAAAAAAAIWY/6qy4SkKV28o/s1600/01.png">Halaman 1</a></li>
	<li><a href="http://lh5.googleusercontent.com/-_rv2Ih2FeVo/Uol4Qy3404I/AAAAAAAAIWg/0lh_Fcr-550/s1600/02.png">Halaman 2</a></li>
	<li><a href="http://lh5.googleusercontent.com/-z7-DOJwfpVU/Uol4YfaCXrI/AAAAAAAAIWo/151XfLonNVE/s1600/03.png">Halaman 3</a></li>
	<li><a href="http://lh5.googleusercontent.com/-kKvAPpngCGQ/Uol4fTHS21I/AAAAAAAAIWw/aETTxm7sxec/s1600/04.png">Halaman 4</a></li>
	<li><a href="https://lh4.googleusercontent.com/-EDE02b-gmyQ/Uol4jmL4vcI/AAAAAAAAIW4/BHP7o9U57cY/s1600/05.png">Halaman 5</a></li>
</ul>

CSS

body {
  background-color:#E3E0D1;
  padding:30px 50px;
  font:normal normal 12px/normal "Trebuchet MS",Trebuchet,Tahoma,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:0 1px 3px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  position:relative;
  overflow:hidden;
}

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

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

JavaScript

$('.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()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {
                $(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);
            });
        });
        return false;
    });
    
});