갤러리 목록 출력 수 조정 > 시즌3 테마 설정 및 가이드

갤러리 목록에 출력되는 가로행의 아이템 출력 수는 (1200px 이상 기준) 기본 3개입니다.

이 출력 수를 조정하는 방법에 대해 설명하도록 하겠습니다.

/skin_bs/board/gallery/list.skin.html 파일 아래의 소스(521줄 정도)에서 출력수가 조정됩니다.

    var gutter = 17;
    var min_width = 170;
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.gallery-item',
            gutterWidth: gutter,
            isAnimated: true,
            columnWidth: function( containerWidth ) {
	            var windowSize = $(window).width();
				if (windowSize > 1199) {
					var box_width = (((containerWidth - 2*gutter)/3) | 0) ;
					if (box_width < min_width) {
						box_width = (((containerWidth - gutter)/3) | 0);
					}
				} else if (windowSize <= 1199 && windowSize > 766) {
					var box_width = (((containerWidth - 1*gutter)/2) | 0) ;
					if (box_width < min_width) {
						box_width = (((containerWidth - gutter)/2) | 0);
					}
				} else if (windowSize <= 766 && windowSize > 566) {
					var box_width = (((containerWidth - 1*gutter)/2) | 0) ;
					if (box_width < min_width) {
						box_width = (((containerWidth - gutter)/2) | 0);
					}
				} else {
					var box_width = (((containerWidth - 0*gutter)/1) | 0) ;
					if (box_width < min_width) {
						box_width = (((containerWidth - gutter)/1) | 0);
					}
				}

				if (box_width < min_width) {
					box_width = containerWidth;
				}

				$('.gallery-item').width(box_width);

				return box_width;
            }
        });
    });

해당 소스는 목록에서 무한스크롤 사용일 때(447줄 정도)와 아닐 때(521줄 정도)가 구분지어 사용되는 점 참고 바랍니다.

var box_width = (((containerWidth - 2*gutter)/3) | 0) ;

위의 코드에서 3은 아이템 출력 수 2는 사이 홈을 말합니다.

만약 4개로 출력을 원한다면 var box_width = (((containerWidth - 3*gutter)/4) | 0) ; 와 같이 변경하면 되겠습니다.

var gutter = 17; 는 간격의 폭을 var min_width = 170; 는 아이템의 최소 폭 값을 지정합니다.

간격에 수정을 원한다면 두 값을 조정합니다.

windowSize는 브라우저의 폭을 말하며 각각의 폭에 맞춰 출력됩니다.