[티스토리꾸미기] 블로그 전반적인 수정 작업 005

오랫만에 블로그에 글을 올리네요.

음.. 뭔가 한달에 최소 10개씩은 올리고 싶은데..

회사를 가든.. 집에 있든 뭔가 그리도 할께 많은지 모르겠습니다.

오늘도 역시 내 멋대로 블로그를 꾸미는 작업을 할 예정입니다.

 

이 부분은 저의 메인화면입니다.

총 40개의 인기 순위에 올라와 있는 리스트가 보입니다.

이 리스트는 티에디션에서 설정할 수 있는데요.

갤러리형 첫번째 아이템으로 쉽게 만들 수 있습니다.

지금은 40개에서 28개로 줄었는데요.

원래는 40개도 거뜬하겠지 했는데.. 정말 많기는 하더군요...

위에 사진대로 길어도 너무 길더군요.

그래서 이번엔 저 갤러리 리스트를 바꿔 볼 예정입니다.

이게 리스트중 하나의 아이템입니다.

사진을 보시면 아시겠지만

글이 너무 길어서 전체적으로 길어보입니다.

그래서 글자에 제안을 두기 원합니다~

function setBrush()
{
      $("#ttCanvas .tt-span-3 .tt-post-summary a" ).html($("#ttCanvas .tt-span-3 .tt-post-summary a" ).html().substring(0,40));
}

 

그래서 40자로 변경하였구요..

와 같이 바뀌었습니다..

두번째로 해결해야할 문제는 가로열이 항상 4개로 픽스되어있다는 점입니다.

화면이 넓을때는 최대 6개, 화면에 맞추어서 내려갈 수 있도록 변경시키려합니다.

일단 소스에 주석을 달아서 올려볼께요.

var url = location.href;
url = url.substring(url.indexOf(".com/")+5, url.length);
if(url == "") setMainAlbumListInit()

function setMainAlbumListInit()
{
	// 컨텐츠 레이아웃 최대 확장
	$("#ttCanvas").css("width", "100%");
	$("#ttCanvas > div").css("width", "100%");
	$(".tt-component").css("width", "100%");
	$(".tt-component > div").css("width", "100%");

	 // 아이템 글자 40자로 제안
	$("#ttCanvas .tt-span-3 .tt-post-summary a" ).html($("#ttCanvas .tt-span-3 .tt-post-summary a" ).html().substring(0,40));

	var colCount = 28; //아이템 갯수, 한개의 li에 들어갈 Div 갯수

	// ul > li > div 순서로 구성                
	// 레이아웃을 구성하는 엘리먼트 정의
	var mainPhotoListLinks = $(".tt-wrap-item");
	var contantsArea = $(mainPhotoListLinks).find(".tt-span-12");
	var contant = $(contantsArea).find(".tt-span-3");

	var s ='', lastPosition=0;
	for(var i = 0; i < contant.length; i++)
	{
		if(i%colCount == 0){
			if(i == 0) s+= '
'
			else  s+= '
'
			lastPosition = i+colCount;
		}
		
		//기존에 4개씩 끊기위하여 사용하였던 클래스 제거
		$(contant[i]).removeClass("tt-last");
	
		// 각 아이템 엘리먼트 복사 및 Text로 저장
		s+= $(contant[i]).clone().wrap('
').parent().html();
			if(i == lastPosition){
			s+= '
'
		}
	}

	// 작성된  Text  붙여넣기	
	$(mainPhotoListLinks).empty().html(s);
	contantsArea = $(mainPhotoListLinks).find(".tt-span-12");
	$(contantsArea).css("width","100%");

	// 화면에 맞추어	아이템 가운데 정렬하기
	mainResize();
}

function mainResize() {
	var contantsArea = $(".tt-wrap-item").find(".tt-span-12");
	var countCount = 6;
	if($(window).width() < 1001)
	{
		countCount = 6;

		//화면 사이즈별 한줄에 나타는 아이템 수				
		if($(window).width() < 918) countCount = 5;
		if($(window).width() < 765) countCount = 4;
		if($(window).width() < 612) countCount = 3;
		if($(window).width() < 456) countCount = 2;
		if($(window).width() < 306) countCount = 1;
				
		var cal = $(contantsArea).find(".tt-span-3").width()*(countCount);
		cal = cal+(17*(countCount));

		$("#ttCanvas").css("width", cal + "px");
	}
	else
	{
		//아이템 사이즈가 화면사이즈에 구애를 받지 않을때
		$("#ttCanvas").css("width", "920px");
	}
}

나름 열심히 주석처리는 해봤는데, 괜찮은 설명이었기를 바랍니다.

위의 소스대로 작성을 하면 

와 같이 화면에 뿌려집니다.

물론 고정된 사이즈에서 반응형으로 웹브라우저 사이즈에 맞게 아이템 정렬이 되구요.

웹소스를 고치는데 많은 도움이 되었다면 좋겠네요 ^^