Edit in JSFiddle

$(function() {

    var lastIdx = $(".thumb-container img").length - 1;
    var nowPos;
    var info;

    // 이미지 리사이징 op
    function resize($image){
        var windowH      = $(window).height()-130;
        var windowW      = $(window).width()-120;
        var theImage     = new Image();
        theImage.src     = $image.attr("src");
        var imgwidth     = theImage.width;
        var imgheight    = theImage.height;

        if((imgwidth > windowW)||(imgheight > windowH)){
            if(imgwidth > imgheight){
                var newwidth = windowW;
                var ratio = imgwidth / windowW;
                var newheight = imgheight / ratio;
                theImage.height = newheight;
                theImage.width= newwidth;
                if(newheight>windowH){
                    var newnewheight = windowH;
                    var newratio = newheight/windowH;
                    var newnewwidth =newwidth/newratio;
                    theImage.width = newnewwidth;
                    theImage.height= newnewheight;
                }
            }
            else{
                var newheight = windowH;
                var ratio = imgheight / windowH;
                var newwidth = imgwidth / ratio;
                theImage.height = newheight;
                theImage.width= newwidth;
                if(newwidth>windowW){
                    var newnewwidth = windowW;
                    var newratio = newwidth/windowW;
                    var newnewheight =newheight/newratio;
                    theImage.height = newnewheight;
                    theImage.width= newnewwidth;
                }
            }
        }
        $image.css({'width':theImage.width+'px','height':theImage.height+'px'});
    }
    // cl
    // 화면 크기에 따른 리사이징 이벤트 op
    $(window).on("resize", function() {
        var $img = $(".image-box img");
        if ($img[0] === undefined)
            return;
        resize($img);
    });
    //cl
    // 썸네일 클릭시 이미지 표시 op
    $(".thumb-container > img").on("click", function() {

        nowPos = $(this).index();
        info = $(this).data("url");
        $(".image-container").css("z-index", "10");
        $(".thumb-wrapper").css("z-index", "9");
        $(".loading").show();
        var imgURL = $(this).data("url");
        $("<img>").on("load", function() {
            $(".loading").hide();
            $(".image-box").empty();
            $(".status").hide().text(info).fadeIn(800);

            $(this).appendTo(".image-box");
            resize($(this));
            $(this).fadeIn(800);
            $(".image-container").animate({ "height": "100%" },500,function() {

                // 화살표 표시
                if (nowPos == 0)
                    $(".right").fadeIn(800);
                else if (nowPos == lastIdx)
                    $(".left").fadeIn(800);
                else
                    $(".right").add(".left").fadeIn(800);

                // 썸네일 높이 0으로 조정
                $(".thumb-wrapper").css("height", 0);
            });
        }).attr("src", imgURL);
    });
    // cl
    // 이미지 클릭시 썸네일 표시 op
    $(document).on("click", ".image-box > img", function() {

        $(".image-container").css("z-index", "9");
        $(".thumb-wrapper").css("z-index", "10");

        $(".status").hide().text("status").fadeIn(800);
        $(".thumb-wrapper").animate({
            "height": "100%",
        }, 800, function() {

            $(".image-container").css("height", 0);
        });

    });
    //cl

    // 좌로 이동
    $(".left").on("click", function() {
        if (nowPos == 0)
            return;
        nowPos--;
        var nextURL = $(".thumb-container").children().eq(nowPos).data("url");
        info = $(".thumb-container").children().eq(nowPos).data("url");
        $(".loading").show();
        $("<img>").on("load", function() {
            var $this = $(this);
            $(".loading").hide();
            $(".image-box img").stop().fadeOut(800, function() {
                $(".status").hide().text(info).fadeIn(800);
                $(".image-box").empty();
                $this.appendTo(".image-box");
                resize($this);
                $this.fadeIn(800);
                $(".right").fadeIn(300);
                if (nowPos == 0)
                    $(".left").fadeOut(300);
            });
        }).attr("src", nextURL);
    });

    // 우로 이동
    $(".right").on("click", function() {
        if (nowPos == lastIdx)
            return;
        nowPos++;
        var nextURL = $(".thumb-container").children().eq(nowPos).data("url");
        info = $(".thumb-container").children().eq(nowPos).data("url");
        $(".loading").show();
        $("<img>").on("load", function() {
            var $this = $(this);
            $(".loading").hide();
            $(".image-box img").stop().fadeOut(800, function() {
                $(".status").hide().text(info).fadeIn(800);
                $(".image-box").empty();
                $this.appendTo(".image-box");
                resize($this);
                $this.fadeIn(800);
                $(".left").fadeIn(300);
                if (nowPos == lastIdx)
                    $(".right").fadeOut(300);
            });
        }).attr("src", nextURL);
    });
});

<div class="container">
    <div class="thumb-wrapper">
        <div class="thumb-container">
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/800x451"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/500x602"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/350x453"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/800x454"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/500x605"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/350x456"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/800x457"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/500x608"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/350x459"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/220x460"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/800x451"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/500x602"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/350x453"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/800x454"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/500x605"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/350x456"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/800x457"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/500x608"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/350x459"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/220x460"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/800x451"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/500x602"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/350x453"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/800x454"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/500x605"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/350x456"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/800x457"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/500x608"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/350x459"/>
            <img src="http://placehold.it/75x75" data-url="http://placehold.it/220x460"/>
        </div>
    </div>
    <div class="image-container">
        <span class="left">◀</span>
        <span class="right">▶</span>
        <div class="image-box"></div>
    </div>
    <div class="tooltip-container">
        <div class="tooltip">
            <span class="site">&copy; TAKU.KR</span>
            <span class="status">status</span><img class="loading" src="http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/loading.gif" style="display: none;"/>
        </div>
    </div>
</div>

* {
  margin: 0;
  padding: 0;
}
html {
  background-color: #111;
}
body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.container {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.thumb-wrapper {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #111;
  left: 0;
  right: 0;
  bottom: 0;
}
.thumb-container {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  top: 0;
  font-size: 0;
  padding-bottom: 30px;
  overflow-y: scroll;
}
.thumb-container img {
  margin: 4px 2px 0px 2px;
  opacity: 0.5;
  cursor: pointer;
  transition: all .5s;
}
.thumb-container img:hover {
  opacity: 1;
}
.image-container {
  position: fixed;
  box-sizing: border-box;
  width: 100%;
  height: 0%;
  bottom: 0;
  left: 0;
  background-color: #151515;
  overflow-y: hidden;
}
.left,
.right {
  position: absolute;
  display: none;
  font-size: 20px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: gray;
  top: 50%;
  margin-top: -15px;
  cursor: pointer;
}
.left {
  left: 3px;
}
.right {
  right: 3px;
}
.image-box {
  width: 100%;
  height: 100%;
  padding-top: 50px;
  text-align: center;
  font-size: 0;
  background-color: #222;
}
.image-box img {
  display: none;
  cursor: pointer;
}
.tooltip-container {
  position: fixed;
  width: 100%;
  font-size: 0;
  text-align: center;
  bottom: 0;
  z-index: 999;
}
.tooltip {
  position: relative;
  display: inline-block;
  background-color: #000;
  width: 95%;
  min-width: 500px;
  height: 30px;
  color: #fff;
  font-size: 15px;
  line-height: 30px;
  border-radius: 10px 10px 0 0;
  text-align: center;
}
.site {
  position: absolute;
  left: 10px;
}
.status {
  position: relative;
  display: inline-block;
}
.loading {
  margin-left: 5px;
}