북클럽 스킨 - 커버 갤러리 (설명 및 버그 수정)

홈 화면에 주로 사용되는 커버 갤러리에 대해 살펴보았습니다.

(뭐가 뭔지 매번 적용해서 보고 수정하고 하는게 자증나서..ㅋ 공부하는 차원으로...)

 

커버 갤러리1	커버 갤러리2
한 화면 노출 글 수: PC (5), Mobile (2) (그 이상은 슬라이더로 처리됨)	한 화면 노출 글 수: PC (3), Mobile (1) (그 이상은 슬라이더로 처리됨)
표시 항목: 이미지 + 제목	표시 항목: 이미지 + 제목 + 본문3줄 + 댓글 수 + 작성일
CSS 클래스명: cover-thumbnail-3	CSS 클래스명: cover-thumbnail-4

 

위는 북클럽 스킨의 목록 스타일로 제공되는 커버 갤러리1과 2의 비교 표입니다.

 

각기 스타일도 다르고 아이템의 크기도 다르니 잘 살펴보시고 필요에 따라 적당히 골라 사용하시면 되겠습니다.

 

 

그리고 아래는 이 목록들과 관련해서 제가 찾은 버그들과 각 해결책입니다.

 

 

커버 갤러리1 - 창 크기를 줄였을 시 슬라이더로 변환 안됨

 

애초부터 작은 화면으로 접속했으면 괜찮은데, 큰 화면에서 작은 화면으로 줄일 경우 슬라이더 변환도 안되고, 가로로 페이지를 뚫고 길게 나오는 증상이 발견되었네요.

 

헤결책은, 스킨에 업로드된 script.js 파일의 내용 중 function coverSlider(){...} 함수의 내용을 아래 내용으로 덮어 줍니다.

function coverSlider(){
	var $element = $(".cover-thumbnail-3, .cover-thumbnail-4");

	$element.each(function(){
		var $cover = $(this),
			$list = $cover.find("ul"),
			$item = $cover.find("li"),
			itemOuter = $item.outerWidth(),
			itemLength = $item.length,
			viewLength = Math.round($cover.width()/itemOuter),
			num = 0;

		$list.wrap('<div class="slide-wrap"></div>');
		$item.css({
			"width": itemOuter,
			"padding-left": Math.abs(parseInt($list.css("margin-left"))),
		});
		$list.width(itemOuter*itemLength);
		if ( viewLength < itemLength ){				
			$cover.append('<button type="button" class="prev">이전</button><button type="button" class="next">다음</button>');
		}

		$cover.on("click", ".prev", function(){
			if ( $list.is(":animated") ) return false;
			viewLength = Math.round($cover.width()/itemOuter);

			if ( num > 0 ){
				num = num > itemLength-viewLength ? itemLength-viewLength-1 : num-1;
				$list.animate({ "left": -itemOuter*num }, 300 );
			}
		});
		$cover.on("click", ".next", function(){
			if ( $list.is(":animated") ) return false;
			viewLength = Math.round($cover.width()/itemOuter);

			if ( num < itemLength-viewLength ){
				num++;
				$list.animate({ "left": -itemOuter*num }, 300 );
			}
		});

		$cover.on("touchstart", function(){
			var touch = event.touches[0];
			touchstartX = touch.clientX,
			touchstartY = touch.clientY;
		});

		$cover.on("touchend", function(){
			if( event.touches.length == 0 ){
				var touch = event.changedTouches[event.changedTouches.length - 1];
				touchendX = touch.clientX,
				touchendY = touch.clientY,
				touchoffsetX = touchendX - touchstartX,
				touchoffsetY = touchendY - touchstartY;

				if ( Math.abs(touchoffsetX) > 10 && Math.abs(touchoffsetY) <= 100 ){
					if (touchoffsetX < 0 ){
						$cover.find(".next").click();
					} else {
						$cover.find(".prev").click();
					}
				}
			}
		});

		$(window).resize(function(){
			$cover.find("ul, li").width("");
			itemWidth = $item.width();
			itemOuter = $item.outerWidth();
			var viewLength = Math.round($cover.width()/itemOuter);

			$item.css({
				"width": itemOuter,
				"padding-left": Math.abs(parseInt($list.css("margin-left"))),
			});
			$list.css({
				"width": itemOuter*itemLength,
				"left": (num > viewLength ? -itemOuter*viewLength : -itemOuter*num)
			});

			if ( viewLength >= itemLength ){
				$cover.find("button").remove();
				$list.css("left", 0);
			} else {
				if ( !$cover.find("button").length ){
					$cover.append('<button type="button" class="prev">이전</button><button type="button" class="next">다음</button>');
				}
			}
		});

	});
};

수정된 줄은 하이라이트 되어 있습니다.

 

또는, 잘 모르시겠으면 그냥 아래 파일을 다운받아 스킨에 업로드 해줘도 됩니다.

 

script.js

0.01MB

 

커버 갤러리2 - 글 제목이 중복해서 나옴

 

관리 > 스킨편집 > html 편집에서,

<s_cover name='cover-thumbnail-4'> 로 찾아서 그 밑에를 잘 보시면 
<span class="title"></span> 이게 두번 있어요. (실수겠죠?) 

아래처럼 <!-- ... --> 로 감싸서 주석처리해주거나 아예 지워버리시면 됩니다. 

<!-- <span class="title"></span> --> 
<s_cover_item_article_info> <span class="title"></span>