이 블로그 메인 페이지
텍스트큐브에서는 커버페이지라고 하는 것에 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단계를 확인하려면 여기로~!!

 

이 글의 관련글

Tags:

10 Comments

  1. 안녕하세요^^
    전 개인홈페이지에다가 벽톨처럼 이미지들이 정리되는걸 적용하고싶어서 검색하다가 jQuery Masonry에 대해 발견했어요.
    그래서 jQuery Masonry 설치법검색하다가 방문하게 됫습니다. 전 개인홈페이지에 벽돌쌓기스타일을 적용하고싶은데.
    겨우 스타일시스.. 글자랑여백정도만 바꾸는거밖에 못하는 수준이라서. 혼자 번역해서 해볼려다가… 어디에 . 어떻게 뭘 넣어야는건지
    몰라서 글 남겨요 ㅠㅠ 혹시 가능하시면..알려주실수잇나요.
    ㅠㅠ 제 메일은 iamhyejin2@gmail.com 입니다.

    1. 안녕하세요.
      바로 답변 들어갑니다ㅋ

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

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

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

      중요한 부분은



      소스인데요.

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

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

      소스를 보시면 적용하시는 데에는 큰 무리가 없을 겁니다.

  2. 저는 이 jquery를 보면서 정말 해보고 싶었는데 PHP로 글에서 이미지를 뽑아오는 것인지 알고 싶습니다. 글을 뽑을 때 자바스크립트가 아닌 PHP를 사용했죠? 혹시 티스토리에서 해보셨는지도 알고 싶고요.
    PS. 제가 알고 싶은 것이 많네요. 저는 소스를 적용하는 것을 주로 알거든요. 프로그래밍하는 법은 모르고요.

    1. 일단 결론부터 말씀드리면
      어떠한 형태이든 element 만 노출되면 이를 class 로 잡아내 masorny로 다 적용가능합니다.

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

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

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

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

      여담입니다만 원리를 알아도 활용을 못하는 케이스도 부지기수랍니다. ^^;

Leave a Reply

Your email address will not be published. Required fields are marked *