Edit in JSFiddle

<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>

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 url('data:image/gif;base64,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') no-repeat 50% 160px;
}

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

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

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

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

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

$('.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;
    });
    
});