내정보

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

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

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

무료

5.0점 / 총 39명 참여
  • 구매자 165
  • 소개  
  • 설치경로  
  • 지원환경  
  • 라이선스 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://www.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://www.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

댓글 '81'

프로필 사진 profile
없음 2017.02.20 19:18 댓글 별점
감사합니다 +_+ 바라던게 눈앞에 똬악! 있네욤 ^0^
프로필 사진 profile
崠駐 2017.02.23 15:56 댓글 별점
감사합니다.
프로필 사진 profile
만키로군 2017.03.21 14:49 댓글 별점
좋은 자료 감사합니다.
프로필 사진 profile
이브이 2017.03.31 17:41 댓글 별점
우와 ㅠㅠ 무료! 감사합니다
프로필 사진 profile
wcs**** 2017.04.22 19:48 댓글 별점
제가 한참 찾던 건데 너무 감사합니다.
프로필 사진 profile
이온디 2017.04.25 14:25 댓글 별점
@윤삼님 여기서 댓글에서 프로필이미지를 띄울려면 어떻게 하나요?
프로필 사진 profile
윤삼 2017.04.25 14:41 댓글 별점
소스 열어보시면 금방 아실 수 있을 거예요~
프로필 사진 profile
이온디 2017.04.25 14:52 댓글 별점
{@
$member_info = $comment->member_srl;
$profile_image = $memberInfo->profile_image;
}
{$member_info}{$profile_image}{$profile_image->file}
{$memberInfo['profile_image']}

{@
$oMemberModel = &getModel('member');
//$profile_image = $oMemberModel->getProfileImage($member_info['member_srl']);
$profile_image = $oMemberModel->getProfileImage($comment->member_srl);
}
{$profile_image}

뭔가 팁들을 조합해서 해보는데 잘 안되네요 @_@;
프로필 사진 profile
xe왕초보 2017.04.28 16:34 댓글 별점
이건 별도의 위젯이 있어야 되는거죠? 이 파일만 받아서는 못 쓰는건가요?
프로필 사진 profile
윤삼 2017.04.28 18:18 댓글 별점
Content 위젯, Content 확장 위젯, Content 특정글 출력 위젯 등의 스킨 폴더에 넣으시고 해당 위젯들의 스킨으로 활용하시면 됩니다.
프로필 사진 profile
개무식 2017.06.05 06:07 댓글 별점
감사히 잘쓰고 있습니다.
궁금한게 있어서 댓글 남깁니다.

한방향으로만 고정할수 없는지요?
그렇게 할려면 어떻게 해야 되는지 궁금합니다.
프로필 사진 profile
윤삼 2017.06.05 06:42 댓글 별점
css 파일들에 @media only screen and~~ 로 시작하는 스타일들이 있는데, 찾아서 모두 삭제해보세요.
@media only screen and (min-width: 640px) {
~~~~~~~~~~~~~
}
이라면, 브라우저의 넓이가 640 이상일 때 어러저렇게 하라는 뜻이거든요.
프로필 사진 profile
개무식 2017.06.06 03:24 댓글 별점
친절하게 가르쳐 주셔서 고맙습니다 _(__)_
열심히 공부해 보겠습니다.
프로필 사진 profile
산소아빠 2017.06.05 16:32 댓글 별점
정말 엄청난 위젯 감사합니다 너무 아름답네요
혹시 확장변수도 사용할 수 있도록 하려면 어떻게 해야 할까요? 다음버전에 추가해주실 생각없으신지요
프로필 사진 profile
산소아빠 2017.06.05 16:35 댓글 별점
아 댓글 읽다보니 생각난건데 혹시 컨텐츠 확장위젯에 설치하면 확장변수값도 쓸 수 있는건가요?
프로필 사진 profile
윤삼 2017.06.05 18:05 댓글 별점
1. 수직형 타임라인에서 별도의 날짜 형식 확장변수를 지정해 조직 연혁 등으로 활용하는 방식에 관해선 https://www.xetown.com/lakepark/292144 를 참조해주세요.

2. 컨텐츠 위젯에서 그 외의 확장변수를 활용하시려면, 아래 링크에 있는 댓글 대화를 참조해서 원하시는 대로 스킨을 커스텀해서 사용하시면 될 겁니다.
https://www.xetown.com/qna/312301

3. 컨텐츠 확장 위젯은 안 써봐서 모르겠는데, 아마 스킨으로 활용 가능하기는 할 겁니다.
프로필 사진 profile
산소아빠 2017.06.05 20:05 댓글 별점
그렇군요 한번 도전해보겠습니다 두근두근하네요 ㅎ
세심한 답변 감사드립니다.
프로필 사진 profile
비누남어 2017.06.05 21:55 댓글 별점
윤삼님! 오랜만에 다시와보니 많이 업데이트가 되었네요~^^ 정말 멋지십니다. 한가지 질문을 드리자면 년도별로 내용이 많을 경우 카테고리가 적용되면 좋을 것 같은데 혹, 지원이 안되는건가요? 제홈에서 테스트시 [탭형태 설정]에서 상단탭으로 설정하면 백지상태가 되더군요~
프로필 사진 profile
윤삼 2017.06.05 22:37 댓글 별점
아 네;; 시간 날 때 카테고리별 보기 기능 지원을 검토해보겠습니다. 현재로선 지원이 안 될 겁니다. (사실 저도 기억이 가물가물해요ㅠ)
프로필 사진 profile
비누남어 2017.06.05 22:59 댓글 별점
네~ 기대하고 있겠습니다. 화이팅~^^
프로필 사진 profile
플루오린 2017.08.11 18:21 댓글 별점
감사합니다~^^
프로필 사진 profile
토순이와아빠 2017.08.17 08:45 댓글 별점
좋은 자료 감사합니다.
프로필 사진 profile
튜닝셀프 2017.09.01 20:38 댓글 별점
카페24웹호스팅 실망... 이거 뇌리에 박히는데요? ㅋㅋㅋ
프로필 사진 profile
uglyduck 2017.09.02 01:06 댓글 별점
오 이런 멋진 기능을...감사합니다!
프로필 사진 profile
사르나트 2017.10.01 23:22 댓글 별점
감사합니다 잘쓰겠습니다
프로필 사진 profile
달콤한인생 2017.10.07 23:55 댓글 별점
어어어엄청 감사히 쓰겠습니다!
프로필 사진 profile
다이제 2017.10.12 18:27 댓글 별점
카페24실망이 계속 생각나네요 ㅋㅋㅋ 제가 카페24쓰는데..ㅠㅠ
프로필 사진 profile
누구니이넌 2017.10.18 10:44 댓글 별점
좋은자료입니다 감사해요
프로필 사진 profile
바므노르 16시간 전 댓글 별점
이렇게좋은스킨이 무료라니 후딱가져가봅니다 ^^
프로필 사진 profile
바므노르 15시간 전 댓글 별점
ㅇ리방향배치는 설정하는 버튼이없는것같은데 css에서수정을해야하나용?
프로필 사진 profile
윤삼 14시간 전 댓글 별점
설정 내용에 없으면 직접 커스터마이징 하시면 됩니다~
서버에 요청 중입니다. 잠시만 기다려 주십시오...