jQuery 강좌 | Plugins > NailThumb - 썸네일(Thumbnail) 만들어주는 플러그인

글 목록을 나열할 때 요약글과 함께 썸네일(Thumbnail)을 보여주는 경우가 많습니다. 글만 있는 것보다 보기 좋고 시선을 끌기 때문입니다.

작은 이미지를 만들어 썸네일로 사용할 수도 있지만, 큰 이미지를 자동으로 작게 만들어 보여줄 수도 있습니다. 이를 쉽게 구현해주는 것이 NailThumb입니다. 사용법도 간단하고, 많은 옵션이 있어 다양하게 썸네일을 나타낼 수 있습니다.

플러그인을 다운로드 받고 압축을 풀면 다음과 같은 파일들이 있습니다.

changelog.txt
jquery.nailthumb.1.1.css
jquery.nailthumb.1.1.js
jquery.nailthumb.1.1.min.css
jquery.nailthumb.1.1.min.js
jquery.nailthumb.less
license.txt

jquery.nailthumb.1.1.min.css과 jquery.nailthumb.1.1.min.js만 있으면 썸네일을 만들 수 있습니다.

간단한 예는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Plugins | nailthumb</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="jquery.nailthumb.1.1.min.js"></script>
    <link rel="stylesheet" href="jquery.nailthumb.1.1.min.css">
    <style>
      .my-thumb-1 {
        width: 200px;
        height: 200px;
      }
    </style>
    <script>
      $(document).ready(function() {
        $( '.my-thumb-1' ).nailthumb();
      });
    </script>
  </head>
  <body>
    <p>Original Image</p>
    <img src="mylego.png">
    <p>Thumbnail</p>
    <div class="my-thumb-1">
      <img src="mylego.png">
    </div>
  </body>
</html>

썸네일로 만들 이미지를 div로 감싸고 적당히 클래스 값을 부여한 다음 그 클래스에 width, height 속성을 넣어 원하는 크기로 만듭니다. 그리고, 그 클래스에 nailthumb() 함수를 적용시키면 이미지의 가운데를 보여주는 썸네일이 만들어집니다.

http://book.cmsfactory.net/jQuery/V01/Plugins/nailthumb/nailthumb-01.html

NailThumb은 다양한 옵션을 가지고 있다는 것이 장점입니다. 다음은 썸네일에 애니메이션 효과를 준 것입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Plugins | nailthumb</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="jquery.nailthumb.1.1.min.js"></script>
    <link rel="stylesheet" href="jquery.nailthumb.1.1.min.css">
    <style>
      .my-thumb-2 {
        width: 200px;
        height: 200px;
      }
    </style>
    <script>
      $(document).ready(function() {
        $( '.my-thumb-2' ).nailthumb({
          replaceAnimation:'animate',
        });
      });
    </script>
  </head>
  <body>
    <p>Original Image</p>
    <img src="mylego.png">
    <p>Thumbnail</p>
    <div class="my-thumb-2">
      <img src="mylego.png">
    </div>
  </body>
</html>

이미지가 축소되면서 썸네일이 만들어집니다.

http://book.cmsfactory.net/jQuery/V01/Plugins/nailthumb/nailthumb-02.html

Category

Created on 2014-01-18 07:32 | Updated on 2015-07-17 00:48

이 글을 공유하기

Kakao

Book navigation