텍스트큐브 블로그 메인페이지를 jQuery masonry로 만들기 1단계

이 블로그 메인 페이지
텍스트큐브에서는 커버페이지라고 하는 것에 jQuery masonry를 적용시키려고 한다.

masorny란 벽돌처럼 쌓는 것을 말하는데
jQuery masonry를 이용하면 기존에 이미지 게시판 형식의 것들의 아래와 같이 변한다.

사용자 삽입 이미지

jQuery masorny 적용 후


즉 CSS float로 박스로 렌더링된 것들을 벽돌을 쌓듯이 정렬이 가능하단 소리다.

다행이도 이를 위해서 택스트큐브의 플러그인 중 jParker님께서 만든 걸로 블로그 글에 포함된 이미지를 비율별로 추출해낼 수가 있는 상태.
따라서 단순하게 jQuery masonry 플러그인을 연동시키고 CSS로 이것저것 손봐주면 오른쪽과 같이 이쁘게 정렬시킬 수 있다.

일단 이 작업의 첫번째로 텍스트큐브 커버페이지에서 이미지를 뽑아 올 수 있도록 구성하였다.

사용자 삽입 이미지

masorny 적용전


앞으로 수정할 것은 다음과 같다.
  1. 이미지가 포함되어 있지 않은 글에 기본으로 표시되는 이미지를 삭제하고 글만 남기게 하기
  2. 글 내용 중 일부분을 추출할 수 있게 하기
  3. jQuery masonry 적용하기
  4. CSS 및 CSS3 요소를 적용하여 이쁘게 꾸미기


근데..
글 짤빵에 글 내용과 관련없는 여인네 사진들을 넣고 이렇게 뽑아보니 이건머..ㅋㅋㅋㅋ


PS :
masonry 1차 적용이 완료되었다.
이제는 CSS를 좀 디벼서 좀 이쁘께 꾸미는 일만 남았다.

사용자 삽입 이미지

1차 적용 완료

PS 2:
어느정도 완성이 된 2단계를 확인하려면 여기로~!!

최근 한달간 인기글

이 글의 관련글

tagged with  , , , ,
REPLY AND TRACKBACK RSS http://blog.nemesys.co.kr/tt/rss/response/817
REPLY AND TRACKBACK ATOM http://blog.nemesys.co.kr/tt/atom/response/817
TRACKBACK ADDRESS
이 글에는 트랙백을 보낼 수 없습니다
REPLY RSS http://blog.nemesys.co.kr/tt/rss/comment/817
REPLY ATOM http://blog.nemesys.co.kr/tt/atom/comment/817
비밀방문자 
wrote at 2011/10/25 10:53
관리자만 볼 수 있는 댓글입니다.
Nes 
wrote at 2011/10/25 12:46
안녕하세요.
바로 답변 들어갑니다ㅋ

이런 jQuery 플러그인을 적용하는 방법은 거의가 비슷한데요.
추천드리는 방법은

http://masonry.desandro.com/demos/basic-single-column.html

이쪽 페이지로 들어가셔서 소스를 찬찬히 살펴보시구요.

중요한 부분은

<script src="../js/jquery-1.6.2.min.js"></script>
<script src="../jquery.masonry.min.js"></script>
<script>
$(function(){

$('#container').masonry({
itemSelector: '.box'
});

});
</script>

소스인데요.

먼저 jQuery 플러그인을 삽입하시고 다음 marsonry를 삽입하시고
marsonry를 적용할 엘리먼트를 설정해주시면 됩니다.

위의 소스에서는 div에 box라는 class를 삽입한 후 적용한 것이구요.

소스를 보시면 적용하시는 데에는 큰 무리가 없을 겁니다.
비밀방문자 
wrote at 2011/10/26 09:42
관리자만 볼 수 있는 댓글입니다.
Nes 
wrote at 2011/11/11 12:58
넵~ 도움이 되셨으면 좋겠어요~
wrote at 2012/01/11 04:41
감사합니다
Nes 
wrote at 2012/01/30 22:02
멀요ㅋ
YYH 
wrote at 2012/06/20 10:16
주소좀 퍼가겠습니다^^
wrote at 2013/02/28 14:09
저는 이 jquery를 보면서 정말 해보고 싶었는데 PHP로 글에서 이미지를 뽑아오는 것인지 알고 싶습니다. 글을 뽑을 때 자바스크립트가 아닌 PHP를 사용했죠? 혹시 티스토리에서 해보셨는지도 알고 싶고요.
PS. 제가 알고 싶은 것이 많네요. 저는 소스를 적용하는 것을 주로 알거든요. 프로그래밍하는 법은 모르고요.
Nes 
wrote at 2013/02/28 14:56
일단 결론부터 말씀드리면
어떠한 형태이든 element 만 노출되면 이를 class 로 잡아내 masorny로 다 적용가능합니다.

여기서 중요한게
이렇게 벽돌모양으로 쌓게 하려면 썸네일의 세로높이가 달라야한다는건데요.
만약 티스토리 cover 페이지에서 에서 썸네일이 정사각형이 아닌 이미지 크기에 따라 뽑아올 수 있다면 큰 문제 없이 가능할 겁니다.


티스토리 스킨도 이렇게 저렇게 개인적으로 만져는 봤지만
cover페이지에서 썸네일을 각각 다른크기로 뽑을 수 있는지는 모르겠네요.

그리고
어짜피 적용하시는걸 아신다는거 자체가 프로그래밍을 하시는데 있어 큰 산 하나를 넘으신 겁니다.

활용을 하실 줄 아니 원리만 차근차근 배워나가심 되구요.

여담입니다만 원리를 알아도 활용을 못하는 케이스도 부지기수랍니다. ^^;
wrote at 2014/03/23 04:54
감사합니다
이름 / Name : *
비밀번호 / Password : *
홈페이지 / Homepage :
비밀글 / Secret :
*1  ... *496  *497  *498  *499  *500  *501  *502  *503  *504  ... *1128 
SNS + RSS Links
rss
다음 일간 이슈 검색어
Since 2006 Nes's Random Blogz
Total 11438344 T914 Y1209

5087

1506

google chart api graph

-30 days

today : 914

전체 (1128)
Nes이야기 (123)
하드웨어이야기 (260)
소프트웨어이야기 (27)
외국어이야기 (12)
IT/웹이야기 (248)
연예계/방송이야기 (140)
게임이야기 (96)
광고/제품이야기 (58)
여행/먹거리이야기 (45)
세상이야기 (98)
최근에 쓴 글
구글 딥마인드 알파고가 이세돌을 꺾은날, 애드센스로 ...
구글 설문지(구글 폼)에서 정규식으로 입력 내용 사전 ... (1)
유플러스 tv g 4k uhd 셋톱박스를 신모델인 tvg 우퍼2... (9)
신장의 야망 창조 전국입지전 - 삼국지 13의 재미를 뛰... (2)
구글 애널리틱스(Google Analytics) 보고서 및 대시보...
그래픽카드 견적을 뺀 이번 조립컴퓨터, 스카이레이크 ... (1)
기어s 웨어러블 요금제로도 올레 맴버쉽 포인트 사용이...
안드로이드 롤리팝 포팅 버전 기어s 3g 요금제 가입 후... (2)
tasker http post 기능을 활용해 스마트폰 이벤트를 sl...
삼국지13 간단 후기 - 역대 장수제 시리즈의 정점을 찍...
네이버 웹마스터도구에 블로그와 RSS 주소 등록 후 10...
네이버 웹마스터도구 개편이 불러온 검색로직 및 트래...
삼성 갤럭시 기어s 롤리팝 포팅 후기 및 앱 사용기 (1)
삼성 갤럭시 기어s에 안드로이드 롤리팝 올리기 성공! (3)
CPU 잡아먹는 어베스트 avast mft utility(mftutil.exe...
유플러스 TVG 롤리팝 업데이트 후기(via 기기교체!!) (1)
블로그 포스팅이 점점 줄어드는 이유
u+ tv g 롤리팝 업데이트를 하릴없이 기다리며 써본 간... (9)
허니버터칩은 과연 꼬꼬면의 숙명을 피할 수 있을 것인가? (3)
LG유플러스 U+ tvg 4K UHD 간단 사용기 및 신구형 셋톱... (2)
구글 애널리틱스 웹로그 분석 공인 전문가 자격 인증 ...
스마트폰 사용 패턴 통계 및 분석 with Tasker & Googl... (5)
갤럭시 기어1 - 루팅 및 안드로이드 null롬 올린 후 두... (1)
옵티머스G프로 킷캣 업데이트 후 폰트변경 - 나눔바른...
갤럭시 기어1 - 루팅 및 안드로이드 커스텀 롬 사용기 ... (5)
구글 애널리틱스 UA 업그레이드 이후 애드센스 통계 안...
스마트폰 화면 밝기 어둡게해 야밤에 시력 보호하는 방법 (1)
블루투스 휴대용 스피커 로지텍 UE Boom 간단 리뷰 및 ...
구글 스프레드시트가 canvas를 활용해 만들어졌다니!! (1)
구글 드라이브 스프레드시트(엑셀)의 놀라운 기능 impo...