내정보

Guest 님
보유포인트
0
  • 재구매 할인
    30%
  • 컨텐츠 환불
    100%
  • 평점 포인트
    10%
  • 포인트 자동책정
    0%
콘텐츠 수 313

수직형 타임라인 - Content 위젯 스킨 v.0.6.5

최초 등록일: 2016.05.18 조회수 : 3440

무료

5.0점 / 총 57명 참여
  • 구매자 259
  • 소개  
  • 설치경로  
  • 지원환경  
  • 라이선스 XPM License (재배포 금지) 
  • 분류 위젯
  • 제작자 윤삼
  • 다운로드
    vertical-timeline-0.6.zip 8.23KB (잔여일 : -, 잔여횟수 : -)
    vertical-timeline-0.6.1.zip 7.99KB (잔여일 : -, 잔여횟수 : -)
    vertical-timeline-0.6.2.zip 8.4KB (잔여일 : -, 잔여횟수 : -)
    vertical-timeline-0.6.4.zip 8.41KB (잔여일 : -, 잔여횟수 : -)
    vertical-timeline-0.6.5.zip 8.66KB (잔여일 : -, 잔여횟수 : -)

 

- Content 위젯, Content 확장 위젯, Content 특정글 출력 위젯 등에 활용하면 좋습니다.

- 0.6.2 버전으로 위젯 스킨이 안정화된 것으로 보입니다. 특별한 문제가 없는 한 당분간은 업데이트가 없을 것으로 예상됩니다.

 

v.0.6.5 (2017.04.09)

  1. 히스토리+말풍선 형태의 css 파일 이름을 history2.css로 수정(MIST님)
  2. 댓글 출력의 쿼리를 getCommentPageList로 변경. 미리 볼 수 있는 댓글 개수를 5개로 제한

 

v.0.6.4 (2016.06.08)

  1. cd-link-area의 margin-top을 20px로 고정

 

v.0.6.3

  1. 댓글 리스트 부분에서 '미리 보기 닫기'를 '댓글 목록 닫기'로 수정

 

v.0.6.2

  1. '댓글 미리 보기의 slideToggle'을 '댓글 미리 보기 slideDown'과' 미리 보기 닫기 slideUp'으로 구분 및 대체
  2. 모바일에서 slideToggle 및 slideDown/slideUp 스크립트를 show/hide로 간소화

 

v.0.6.1

  1. 제목 크기 조정 및 (히스토리 형태의 경우) 날짜 크기와 스타일 조정
  2. 링크에 transition 및 text-shadow 효과 적용
  3. 댓글 미리 보기에 slideToggle 스크립트 적용, 리스트 더 보기에 펼침 속도 조정

 

v.0.6

  1. 히스토리 형태에 말풍선 효과를 첨가한, '히스토리+말풍선 형태'를 출력하실 수 있습니다. 스킨 설정 > 컬러셋에서 선택하시면 됩니다.
  2. 히스토리 형태와 히스토리+말풍선 형태에서 날짜 크기를 좀 더 키웠습니다. 기존 15px에서 각각 16px와 18px로 바꿨습니다.

 

v.0.5

  1. 반응이 나쁘지 않은 거 같아 추가 작업을 해봤습니다. 대신 이번에는 퍼블릭 라이센스에서 XPM 라이센스로~! (XPM License 는 Xetown Point Market License 를 뜻하며, 구매자만 사용할 수 있도록 재배포를 금지합니다. 그 외의 조항은 MIT License를 따릅니다.)
  2. 연혁 등에 사용할 수 있는 히스토리 형태와 커뮤니티에서 활용 가능한 커뮤니케이션 형태로 나누어 스킨 적용이 가능하도록 했습니다. 스킨 설정의 컬러셋 항목에서 선택할 수 있습니다. (하단의 미리보기 참조)
  3. 앞선 버전과 달리 위젯의 전체 너비는 90%로, 최대 1024px이 넘지 않도록 했습니다. 또한 600px이 아니라 640px 이하가 되면 양방향에서 일방향으로 출력 형태가 바뀌게 됩니다.
  4. font awesome 아이콘을 적용했습니다. https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css 이곳에서 불러오도록 지정했는데, 사용자 서버의 로딩 속도에 비해 얼마간 늦게 로딩되는 경향이 있습니다. 로딩 개선을 위해선 font awesome 아이콘을 서버에 저장해두시기를 권장합니다. (https://xetown.com/qna/283241 의 댓글 참조)
  5. 스킨 설정에서 댓글 출력을 지정하고 게시물에 댓글이 있으면, 댓글 미리 보기가 가능하도록 했습니다. 대댓글 여부에 따라 계층형 구조를 띠도록 했습니다. 댓글 본문을 클릭하면 해당 댓글로 바로 이동합니다. (하단의 미리보기 참조)
  6. 커뮤니케이션 형태에서는 게시물 작성자의 프로필 이미지를 불러오도록 했습니다. 프로필 이미지가 없는 경우에는 닉네임의 첫 두 글자를 출력하도록 했습니다. (하단의 미리보기 참조)
  7. 게시물 제목에 딸린 추천 아이콘은 '엮인글 수 표시' 옵션을 체크했을 경우에 나타나도록 했습니다. (요즘 트랙백 사용하는 경우 거의 없죠?)
  8. 디자인 부분에서 적잖은 수정이 있었습니다. 전반적으로 페북의 향기가 느껴질 수 있습니다. 처음엔 저도 몰랐습니다;;;

 

특징

  1. 본 스킨은 codyhouse의 vertical timeline을 참조하여 제작되었습니다. 다만, XE 레이아웃 등과의 충돌을 피하기 위하여 스타일을 간소화했으며, 애니메이션 효과 역시 제거했습니다.
  2. 반응형으로 구동됩니다. 모바일에서도 사용할 수 있습니다. 웹브라우저의 가로 크기가 600px 640px를 넘을 땐 중앙의 수직선을 따라 li 요소가 양방향으로 배치되며(첫 번째 미리보기 참조), 그 이하일 땐 좌측의 수직선에 맞춰 일방향으로 배치됩니다(두 번째 미리보기 참조).
  3. 스킨 설정 중 다음 항목들에 영향을 받지 않습니다.
    • 추출 대상: 내용형태, 탭형태, HTML 출력 방식, 가로 이미지 수
    • 목록 상세 설정: 표시항목의 순서, 엮인글수 표시
  4. 문서 등록일($item->getRegdate("Y-m-d"))을 확장변수로 출력하면 연혁 형태를 표현하는 데 적합할 수 있습니다. 이에 대한 방법은 https://xetown.com/lakepark/292144 를 참고해주세요.

 

미리보기

  1. 컬러셋 설정에서 히스토리 형태, 히스토리+말풍선 형태, 커뮤니케이션 형태를 선택할 수 있습니다.
    0.jpg

     

  2. 히스토리 형태, 쌍방향 배치 스샷입니다. 버튼 디자인을 개선했고, 아이콘도 정비했습니다.
    1-1.jpg
     
  3. 히스토리 형태, 일방향 배치 스샷입니다. thumb-up 모양의 아이콘과 추천수는 엮인글수 표시 옵션을 켰을 때 나옵니다. 여러 가지 옵션 항목을 해제하면 연혁 형태 페이지 효과를 보실 수 있을 겁니다. 단, 그때엔 날짜와 관련된 확장변수를 지정하고 소스 수정을 해야 합니다.
    1-2.jpg
     
  4. 히스토리+말풍선 형태, 양방향 배치 스샷입니다. 히스토리 형태에 비해 날짜 크기를 18px로 키웠고, 말풍선 디자인 효과를 두드러지게 하기 위해 양방향에선 날짜를 박스와 반대 방향에 두었습니다.
    4-1.jpg
     
  5. 히스토리+말풍선 형태, 일방향 배치 스샷입니다.
    4-2.jpg
     
  6. 커뮤니케이션 형태, 쌍방향 배치 스샷입니다. 프로필 이미지를 넣어봤습니다. 프로필 이미지가 없는 회원의 경우엔 닉네임의 첫 두 글자가 출력됩니다.
    2-1.jpg
     
  7. 커뮤니케이션 형태, 일방향 배치 스샷입니다. 댓글 기능과 함께 하면 더 좋겠죠?
    2-2.jpg
     
  8. '댓글 미리 보기' 버튼을 누르면 댓글 리스트가 출력됩니다. 내용 글자 수의 1/2만 출력하도록 설정되어 있습니다.
    3-1.jpg
     
  9. 대댓글까지 계층형으로 출력됩니다.
    3-2.jpg

 

profile 사물이 거울에 보이는 것보다 가까이 있음

댓글 '118'

프로필 사진 profile
윤삼 2019.02.13 17:09 댓글 별점
글쎄요, 왜 그럴까요ㅜ 저는 작성자여서 그런지 잘 다운로드 되긴 하는데요;;; XETOWN 관리자님께 여쭤보시는 건 어떨런지요.
프로필 사진 profile
adlib 2019.02.17 01:43 댓글 별점
유용하게 잘쓰겠습니다.
프로필 사진 profile
엔젤 2019.02.18 14:39 댓글 별점
감사합니다. 최곱니다. ^^
프로필 사진 profile
baybay 2019.04.16 03:31 댓글 별점
지금 잘 쓰고 있습니다 ^^ 다음 버전에선 말풍선의 꼭지를 fontawesomd으로 붙여 버리셔도 될 듯 합니다
프로필 사진 profile
baybay 2019.04.16 09:55 댓글 별점
게시판에서 읽기 권한 부여되지 않은 비회원이 덧글까지 같이 출력되는군요 이 부분이 개선되었으면 합니다 ^^ 감사합니다
프로필 사진 profile
윤삼 2019.04.16 11:36 댓글 별점
비밀 댓글이 아니라, 권한 없는 비회원에게 댓글이 노출된다는 말씀이신 거죠?
살펴봐야겠네요ㅜ
프로필 사진 profile
baybay 2019.04.16 13:33 댓글 별점
네 그렇습니다 각 게시판에서 비회원이나 선택하지 않은 그룹은 덧글이 안보여야 하는데 위젯 페이지에서 해당 덧글이 모두 표시 되더라구요 ㅠㅠ 힘내세요 윤삼님 ㅠㅠ
프로필 사진 profile
윤삼 2019.04.16 14:22 댓글 별점
보내주신 쪽지는 잘 받았습니다.
답장을 보냈는데 수신 허용을 안 하신 건지 보내기가 안 되네요ㅜ

기억을 더듬어보니 처음 만들었을 때 댓글의 일부 글자만 미리보기해주는 형식이어서 댓글 열람 권한을 고려하지 않았던 것 같습니다.
그러다보니 댓글을 그냥 가져오는 함수를 적용했고 관련 문제가 생긴 것 같아요.
오늘내일 중으로 시간내서 보완 작업해보도록 하겠습니다~
프로필 사진 profile
baybay 2019.04.17 09:07 댓글 별점
아 제가 쪽지 수신을 허용하지 않은 설정이었습니다 죄송합니다
윤삼님 감사 합니다 ^^ 좋은 하루 되세요!!!
프로필 사진 profile
쿠키쨈 2019.04.16 11:18 댓글 별점
아직안써봤지만 감사히 잘쓰겠습니다.
프로필 사진 profile
공사처리 2019.05.04 05:47 댓글 별점
잘쓰겠습니다!~감사합니다
프로필 사진 profile
에띤시로 2019.05.11 18:13 댓글 별점
익스플로러 하위 몇까지 지원되나요 ㅠㅠ 9에서는 화면이 약간 틀어지네요ㅜ
프로필 사진 profile
윤삼 2019.05.16 19:55 댓글 별점
작업 당시 IE11까지 호환성 체크를 했던 것으로 기억합니다.
안타깝지만 하위 버전 호환은 앞으로도 계획에 포함하지 않을 생각입니다.
프로필 사진 profile
RayHur 2019.06.27 09:08 댓글 별점
라이믹스 1.9.9.2 버전에서 이미지가 출력이 안되네영
프로필 사진 profile
윤삼 2019.10.03 17:23 댓글 별점
_communication.html과 _history.html 내에

<img src="{$item->getThumbnail($widget_info->thumbnail_width,$widget_info->thumbnail_height,$widget_info->thumbnail_type)}" /> 이라는 부분이 있을 텐데요.

이거를
<img src="{$item->getThumbnail()}" />로 바꿔보세요.
프로필 사진 profile
자이엘로 2019.10.03 11:15 댓글 별점
정말 좋은 자료 감사합니다. 지금 라이믹스 최종 버전인데, 썸네일이 안나오네요. 방법 좀 부탁 드립니다.
프로필 사진 profile
윤삼 2019.10.03 17:23 댓글 별점
_communication.html과 _history.html 내에

<img src="{$item->getThumbnail($widget_info->thumbnail_width,$widget_info->thumbnail_height,$widget_info->thumbnail_type)}" /> 이라는 부분이 있을 텐데요.

이거를
<img src="{$item->getThumbnail()}" />로 바꿔보세요.
프로필 사진 profile
tkfkdgo 2019.10.18 01:54 댓글 별점
무료자료 감사합니다
요긴하게 사용할게요
서버에 요청 중입니다. 잠시만 기다려 주십시오...