horizontal-timeline.zip

 

content 위젯 스킨이구요, 정확하게는 수평형 타임라인 스킨입니다.

아직 위젯 설정 옵션 등을 충실히 반영하지 않은 초기 버전이에요. (기능상에 큰 문제는 없습니다만...)

설정에서 컬러셋 옵션에 따라 연혁을 구현할 수 있는 히스토리 형태, 그리고 일반 게시물을 모아서 볼 수 있는 도큐멘트 형태 두 개정도만 활성화되어 있습니다.

(참고로 히스토리 형태는 https://xetown.com/lakepark/292144의 1번 항목에 따라 content.class.php을 수정하시고 게시판 확장변수 1번을 연월일 형태로 만들어줘야 구현됩니다!)

 

그나저나, 이게 지금 무료포인트마켓에 내놓을 수 있을지 걱정스러운 상태입니다.

타임라인에서 날짜 차이가 가장 짧은 것을 기준(60px)으로 그에 비례해서 다른 구간들이 벌어지게 되어 있는 형태인데, 날짜 차이가 최소 간격에 비해 지나치게 많이 나는 경우에는 모양이 어그러지는 경우가 있거든요.

 

혹시 시간되시는 분 계시면 테스트해시고 검토도 해주시면 좋을 것 같습니다.

활용하는 데 문제는 없는지타임라인의 최대 간격을 한정하는 방법이 있을지, 그리고 모바일에서 스와이프가 잘 되는지 등등에 대해서요.

 

암튼 위젯 스킨 압축파일과 더불어 현재 위젯 스킨의 스샷도 첨부해봅니다. 간단히 소개하면 다음과 같습니다.

 

0. 위젯 컨테이너 윗쪽에 타임라인이 있고, 화살표 좌우키 또는 스와이프로 이동해서 컨텐츠를 보는 방식입니다.

 

1. 일단 가라로 만들어뒀던 게시판을 활용해서 제목이랑 날짜를 가운데 박고 양 옆으로 장식을 줘봤습니다. 썸네일은 ratio로 추출했을 때 가로사이즈가 240px 이상이거나 가로세로 비율이 16:9보다 더 넓으면 가운데 정렬로 뽑도록 했구요.

01.jpg

 

2. 제목 텍스트에 태그가 있으면 색깔이 나오도록 해봤습니다. 섬네일 가로사이즈 비율이 16:9보다 작은 경우엔 본문 요약 옆으로 나오게 했고 홀수 번째 컨텐츠에선 오른쪽 정렬입니다.

03.jpg

 

3. 짝수 번째 컨텐츠에선 섬네일이 왼쪽으로 정렬됩니다.

02.jpg

 

4. 모바일로 보면, 반응형이어서 섬네일이 다시 가운데로 정렬됩니다.

04.jpg 

Atachment
첨부

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • profile
    스와이프 어떻게 하는건지 궁금하네요
  • profile profile
    저도 그냥 무료 템플릿 가져다 쓴 거여서...
  • ?
    초보인 제가봐도 관심이 가는 군요.
  • ? profile
    시간 되시면 사용해보시고 피드백 좀 해주세요.
  • profile
    적용해볼만한 사이트가 없어서.... 피드백은 못해드리지만.... ㅠㅠ
    Codyhouse에서는 과거->현재 순으로 본거같았는데 사진상으로보면 최근->과거 순이네요?
    선택이 가능한건지.. 아님 게시물 순서따라서인가...?
  • profile profile
    위젯 스킨 설정에서 문서 정렬 순서를 바꿀 수 있으니까요.
    다만, 연혁 형태에서는 확장변수를 사용하기 때문에 스킨 소스 안에서 확장변수 기준으로 정렬하도록 했어요. 물론 과거->현재 순으로 바꾸는 것도 가능하구요 ^^
    댓글 감사드려요~!
  • profile
    완성단계시군요 ^^ 테스트 해봤는데

    pc버전에서 다음 글로 넘어가고 싶을 떄 작은 점을 클릭하는 방법밖에는 없더군요

    이전 다음 버튼이 있거나 스와이프 기능을 pc버전에서도 활성화 시키시는 것이 어떨지?

    그리고 특정 게시판은 글이 하나밖에 안나오는 현상도.. 화살표는 계속 on 되어있구요 @_@
  • profile profile
    pc버전 스와이프는 브라우저 가로 사이즈가 1100px 미만일 때부터 활성화하도록 돼 있는데, 이 부분을 해제하든가 해야겠군요. 아니면 말씀대로 페이지 넘김 버튼을 만들든가요.

    사실 마지막 문제는 정말 종잡을 수가 없어요.ㅜㅠ 아마도 게시물간 최소 간격에 비해 다른 간격들이 기하급수적으로 차이가 난다든가 하면 그런 현상이 나타나는 것 같더라구요. 이걸 모두 같은 간격으로 처리를 하든가, 아니면 최대 간격 설정하는 법을 찾든가 해야겠어요ㅠㅠ

    피드백 감사합니다. ^^/
  • profile profile
    심심해서 js파일을 열어봤는데 .events의 width를 구하는 공식이 매우 복잡하군요 ㅋㅋ

    날짜를 식으로 변환해서 첫날짜와 끝날짜의 거리값을 계산한 후

    최소 간격으로 나눈 뒤 반올림 한 값을 지정간격으로 곱하는 블라블라


    아마 날짜값을 파싱하는데서 오리지널 버전과 차이가 나는 것 같아요
  • profile profile
    codyhouse의 오리지널 버전을 수정한 건 main.js 226번째줄의 function daydiff(first, second) 함수인데요.
    때때로 간격이 좁아질 경우 포인트들이 중첩되는 문제가 있어서 다른 사용자가 올려놓은 팁을 적용시킨 거였어요.^^

    그나저나 proro님, 혹시 실례가 안 된다면 거리값에 최대치를 제한하는 방법이 있을까요? 포인트의 left 픽셀값이 누적치로 설정돼 있어서인지, 아무튼 제 능력으로는 계산법을 만들지 못하겠더라구요. 원제작자도 언젠가부터 피드백을 받지 않고 있는 터여서 힘이 듭니다ㅠㅠ
  • profile profile
    아, 아닙니다. 생각해봤는데 역시 결례인 것 같네요. 시간 나는대로 열심히 연구해볼게요 ^^
  • profile profile
    ㄷㄷ 이걸 이제 봤네요 왜 알림이 안왔지 -_-;

    저도 그때 봤을 때 코드가 워낙 복잡해서 건드릴 수 있을지 모르겠습니다 ㅠ

    한번 시간날 때 뜯어볼게요
  • profile profile
    마음만으로도 감사합니다. 혹여라도 부담 갖지 마시고 그냥 잊어버리세요 ;)
    몇 번 해보다가 안 되면 그냥 포기하려구요 ㅎㅎ
  • ?
    잘 작동 됩니다.
    수직형 타임라인과 수평형 타임라인 둘다 참 좋은 위젯인것 같습니다.
    감사합니다.
  • ? profile
    테스트 감사합니다~ 그래도 아직 js 적용에 문제가 있어서 고쳐야 할 부분이 많아요;;;;
  • profile ?
    간단한 스타일시트 수정 하는데도 적지않은 시간 소요가 되는것으로 알고 있는데 100% 완성 단계에는 많은 시간과 노력으로 만들어 지는것 같습니다.
    무료로 받아서 이렇게 사용해 볼수 있다라는것 만으로도 많이 만족 합니다.
    감사합니다.