축소 이미지를 만드는 jQuery 플러그인

jQuery 플러그인을 처음 만들었습니다.
갤러리 사이트 등에서 사진을 표시할 때 사용할 수 있는 플러그인이다.
■ 얻은 결과

jQuery 코드는 다음과 같습니다.
jquery.mk_thumbnail.js


;(function($){
    $.fn.mk_thumbnails = function(options){

        return this.each(function(){
            var opts = $.extend({}, $.fn.mk_thumbnails.defaults, options);

            var thumbnailSet = $(this).find('a').wrap('<section>');
            var thumbnail = $(this).wrapInner('<div>').children().addClass('thumbnailSet');

            var mk_thumbnail = function(){
                var thumbnail_w,
                    thumbnailSet_w = $('#thumbnail').width()-1,
                    section_w,
                    margin = thumbnailSet_w*0.01;

                section_w = (thumbnailSet_w/opts.thumbnail_count);
                thumbnail_w = section_w - (margin*2 + 2 + opts.padding*2);

                $('.thumbnailSet section, .thumbnailSet a').css({
                    'width': thumbnail_w,
                    'height': thumbnail_w
                });
                $('.thumbnailSet a').css({
                    'display': 'table-cell',
                    'vertical-align': 'middle',
                });
                $('.thumbnailSet section').css({
                    'background': '#FFF',
                    'border': '1px solid #CCC',
                    'box-shadow': '1px 1px 1px #CCC',
                    'float': 'left',
                    'margin': margin,
                    'padding': opts.padding
                });
                $('.thumbnailSet').find('img').css({
                    'max-width': '100%',
                    'height': 'auto'
                });

                };

            mk_thumbnail();
            $(window).on("resize",function(){
                setTimeout(function(){
                    mk_thumbnail();
                }, 300);
            });     
        });
    };

    $.fn.mk_thumbnails.defaults = {
        padding: 5,
        thumbnail_count: 4
    };

})(jQuery);

사용 방법

플러그인 가져오기

먼저 플러그인을 읽습니다.<head>에 jQuery 및 플러그인을 설치합니다.
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.mk_thumbnails.js"></script>
</head>

<divid="thumbnail" > 축소판 그림을 표시하려는 그림을 둘러싸기

다음은 HTML에 축소판을 표시하려는 이미지를 기술합니다.

    <a href=""><img src="img/IMG_1758.jpg" alt="" /></a>
    <a href=""><img src="img/IMG_1764.jpg" alt="" /></a>
    <a href=""><img src="img/IMG_1798.jpg" alt="" /></a>
    <a href=""><img src="img/IMG_1799.jpg" alt="" /></a>
    <a href=""><img src="img/IMG_1758.jpg" alt="" /></a>
    <a href=""><img src="img/IMG_1764.jpg" alt="" /></a>
    <a href=""><img src="img/IMG_1798.jpg" alt="" /></a>
    <a href=""><img src="img/IMG_2123.jpg" alt="" /></a>

<div id="thumbnail"></div>로 둘러싸여 배열된 이미지입니다.

<div id="thumbnail">
    <a href=""><img src="img/IMG_1758.jpg" alt="" /></a>
    <a href=""><img src="img/IMG_1764.jpg" alt="" /></a>
    …（略）
</div>

마지막으로 jQuery 코드는 다음과 같습니다.

<div id="thumbnail">
    <a href=""><img src="img/IMG_1758.jpg" alt="" /></a>
    …（略）
</div>
<script>
    $(function(){
        $('#thumbnail').mk_thumbnails();
    });
</script>
</body>

id="thumbnail"분배된 요소
mk_thumbnails () 함수를 실행하고 있습니다.
이렇게 지정합니다.
그림이 4장씩 나란히 표시됩니다.또한 그림에 5px의 흰색 모서리가 있는 상태에서 축소판을 표시합니다.

옵션 지정

기본적으로 5px 흰색 모서리가 있는 이미지는 가로 4폭으로 표시되지만, 옵션을 지정하면 흰색 모서리의 너비와 이미지 배열 수를 변경할 수 있습니다.
옵션 지정mk_thumbnails()은 다음과 같습니다.

<script>
    $(function(){
        $('#thumbnail').mk_thumbnails({
            padding: 10,
            thumbnail_count: 5
        });
    });
</script>

위의 예에서 흰색 10px의 이미지는 각각 5장씩 나란히 표시됩니다.index.html의 내용을 전체적으로 보면 다음과 같다.
※ 이미지의 링크 주소는 필요한 값을 기술하십시오.
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>thumbnail</title>
  <link rel="stylesheet" media="screen" href="css/thumbnail.css" />
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.mk_thumbnails.js"></script>
</head>
<body>
    <div id="thumbnail">
        <a href=""><img src="img/IMG_1758.jpg" alt="" /></a>
        <a href=""><img src="img/IMG_1764.jpg" alt="" /></a>
        <a href=""><img src="img/IMG_1798.jpg" alt="" /></a>
        <a href=""><img src="img/IMG_1799.jpg" alt="" /></a>
        <a href=""><img src="img/IMG_1758.jpg" alt="" /></a>
        <a href=""><img src="img/IMG_1764.jpg" alt="" /></a>
        <a href=""><img src="img/IMG_1798.jpg" alt="" /></a>
        <a href=""><img src="img/DSC_2123.jpg" alt="" /></a>
    </div>
<script>
    $(function(){
        $('#thumbnail').mk_thumbnails({
            padding: 10,
            thumbnail_count: 5
        });
    });
</script>
</body>
</html>

이미지를 클릭할 때 램프처럼 확대해서 표시하는 등 이런 기능이 있으면 더욱 좋다.
그래서 기능 확장이 다시 시작되었다.

Reference

이 문제에 관하여(축소 이미지를 만드는 jQuery 플러그인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/k_kinoshita0104/items/e251c52c2bb080761c0f

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.