skin/board/gallery/list.skin.php 반응형으로 수정해보기

그누보드 기본 gallery 스킨의 list.skin.php 이미지 나열부분 자바스크립트로 반응형으로 수정하는 코드입니다.

    <script>

      $(function() {

        var bo_gallery_cols = <?= isset($bo_gallery_cols) && is_numeric($bo_gallery_cols) ? $bo_gallery_cols : 4 ?>;

        $('.gall_img').attr('style', '');

        $('.gall_img > a').each(function(idx, el) {

          var img_url = $(this).find('>img').attr('src');

          $(this).css({

            display: 'block',

            position: 'relative',

            width: '100%',

            backgroundImage: 'url(' + img_url + ')',

            paddingTop: '60%',

            backgroundPosition: 'center',

            backgroundRepeat: 'no-repeat',

            backgroundSize: 'cover',

            border: '1px solid #ccc',

            borderRadius: '4px'

          });

        });

        $('.gall_img > a > img').hide();

        $('.gall_img > a > .no_image,.gall_img > a > .is_notice').attr('style', '').css({

          position: 'absolute',

          left: '0px',

          top: '0px',

          width: '100%',

          height: '100%',

          display: 'flex',

          alignItems: 'center',

          justifyContent: 'center'

        });

        function gall_ul() {

          var ww = $(window).width();

          var new_bgcs = 4;

          //-----------------------{{{ 이부분을 넓이에 맞게 수정하세요

          if (ww >= 992) {

            new_bgcs = 4;

          } else if (ww >= 768) {

            new_bgcs = 3;

          } else if (ww >= 576) {

            new_bgcs = 2;

          } else {

            new_bgcs = 1;

          }

          //-----------------------

          if (bo_gallery_cols == new_bgcs) return;

          bo_gallery_cols = new_bgcs;

          // 클레스 제거

          var remove_class = 'box_clear';

          for (var i = 0; i <= 10; i++) {

            remove_class += ' col-gn-' + i;

          }

          $('#gall_ul .gall_li').removeClass(remove_class);

          //클레스 추가

          var add_row_class = 'col-gn-' + bo_gallery_cols;

          $('#gall_ul .gall_li').addClass(add_row_class);

          $('#gall_ul .gall_li').each(function(idx, el) {

            var $this = $(this);

            if (idx && (idx % bo_gallery_cols == 0)) {

              $this.addClass('box_clear');

            }

          });

        }

        gall_ul();

        $(window).resize(function() {

          gall_ul();

        });

      });

    </script>

    <!-- 페이지 -->

    <?php echo $write_pages; ?>

    <!-- 페이지 -->