내정보

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

수평형 타임라인 - Content 위젯 스킨 v.0.3

최초 등록일: 2016.06.26 조회수 : 702

무료

5.0점 / 총 13명 참여
  • 구매자 67
  • 소개  
  • 설치경로  
  • 지원환경  
  • 라이선스 XPM License (재배포 금지) 
  • 분류 기타
  • 제작자 윤삼
  • 다운로드
    horizontal-timeline-0.1.zip 17.11KB (잔여일 : -, 잔여횟수 : -)
    horizontal-timeline-0.2.zip 12.33KB (잔여일 : -, 잔여횟수 : -)
    horizontal-timeline-0.3.zip 13.31KB (잔여일 : -, 잔여횟수 : -)

 

content 위젯 스킨이구요, 정확하게는 수평형 타임라인 스킨입니다. v.0.1~v.0.2의 테스트를 거쳐 무료 포인트 마켓에 올리게 되었습니다. ^^/

(proto님이 색상을 발랄하게 해볼 것을 권유하셨지만, 능력 부족으로 그냥 우중충하게 내놓게 됐습니다. 사용자분들이 커스텀해주세요)

 

특징

  1. 개요
    : 일반 문서의 타임라인은 물론, 사이트나 단체의 연혁을 구현하기에 적합합니다.
    : 반응형입니다. 화면 사이즈가 1100px 이하면 스와이프로 컨텐츠 이동이 가능하기 때문에 (구형 스마트폰이 아니라면) 모바일에서 사용하는 데 지장이 없습니다.
  2. 설정
    : 위젯 스킨 설정에서 컬러셋 옵션에 따라 (1)일반 게시물을 모아서 볼 수 있는 도큐멘트 형태, (2)연혁을 구현할 수 있는 히스토리 형태를 선택할 수 있습니다.
    : 주의!!! 히스토리 형태는 https://www.xetown.com/lakepark/292144의 1번 항목에 따라 content.class.php을 수정하시고 2번 항목에 따라 게시판 확장변수 1번을 연월일 형태로 만들어줘야 구현됩니다(안 그러면 에러 나요). 그 외의 소스는 스킨 파일에 내장되어 있습니다.
  3. 설정
    : 위젯 스킨 설정에서 다음 항목들에는 영향을 받지 않습니다.
    : 내용형태, 탭형태, HTML 출력 방식, 가로 이미지 수, 페이지 수, 게시판 이름 표시, 댓글수 표시, 엮인글수 표시, 분류 표시, 아이콘 표시, new 표시 시간, RSS 설정 등
    : 다음 버전이 나오게 된다면 게시판 이름, 댓글수, 엮인글수, 분류, 아이콘 등은 활성화해볼 생각이 있습니다.
  4. 인터페이스
    : 게시물의 시간 간격에 따라 '상단 네비게이션' 바의 타임라인이 대응합니다.
    : 네비게이션 바의 타임라인 '단추'와 하단의 '컨텐츠'가 서로 대응합니다.
    : 네비게이션 바의 화살표 '단추'를 클릭하면 타임라인 '구간 이동'이 가능합니다.
    : 화살표 '좌우키'를 누르면 인접한 '컨텐츠로 바로 이동'됩니다.
  5. 스타일링
    : 제목 텍스트에 태그가 있으면 색깔이 나오도록 스타일링 되어 있습니다. 도큐멘트 형태에선 coral, 히스토리 형태에선 orangeRed 입니다.
    : 섬네일 형식은 ratio로 최적화되어 있습니다(물론 crop으로 해도 무방합니다). 섬네일 가로사이즈 비율이 16:9보다 넓거나 가로 사이즈가 240px보다 크면 가운데 정렬, 240px보다 작거나 16:9 비율보다 좁은 경우엔 본문 요약의 좌측 또는 우측으로 나오게 됩니다.
    : 스킨 설정에서 섬네일 출력을 설정했지만 해당 문서에 섬네일이 없는 경우엔, 사이트 레이아웃에 등록된 로고 이미지가 출력됩니다. 로고 이미지 출력이 필요 없는 경우엔 _document.html의 69번째줄, _history.hrml의 59번째줄을 주석 처리하거나 삭제하면 됩니다.

 

옵션 설정

- js 폴더에 있는 main.js 파일을 열어 타임라인 스킨 작동에 관한 옵션을 변경할 수 있습니다.

option.jpg

  1. eventOffset :  처음 시작할 때 타임라인 '단추'의 left 픽셀 사이즈를 말합니다.
  2. endlessStart : 첫 단추의 위치 이전부터 타임'라인'의 색깔을 채울 것인지를 선택합니다. true면 라인 맨 왼쪽부터 색깔이 채워지고, false면 첫 단추 위치부터 색깔이 채워집니다.
  3. navToSlide : 화살표 단추를 '클릭'했을 때 효과입니다. true면 네비게이션 바에서 이동을 하게 되고, false면 하단의 컨텐츠가 슬라이드 이동하게 됩니다.
  4. rotate : 타임라인 '날짜'를 기울여서 표시할 것인지를 말합니다. true면 -40도만큼 기울어서 출력되고 false면 일반적인 가로쓰기로 출력됩니다.
  5. height : 타임라인 부분(네비게이션 바)의 세로 높이도 조절할 수 있습니다.
  6. distanceDay ~ distanceYear : 일별, 월별, 연도별 최소 간격을 설정할 수 있습니다. 특히, distanceDay는 연이은(consecutive) 타임라인 요소들의 최소 간격이기도 합니다.
  7. maxDistanceTimes : 일별, 월별, 연도별 최대 간격을 제한하는 기준값입니다.

 

스크린샷

  1. 도큐멘트 형태 : 프로필 이미지와 함께 출력됩니다. 섬네일 가로 사이즈가 240px이 넘거나 16:9 비율보다 넓은 경우 가운데 정렬됩니다.
    01.jpg
     
  2. 도큐멘트 형태: 우측 화살표를 누르거나 우->좌 방향으로 스와이프하면 다음 컨텐츠로 슬라이드 이동합니다. 제목에 태그 단어가 있을 경우 coral 색상으로 출력해줍니다. 섬네일 가로사이즈가 좁으면 본문 요약의 좌측으로 정렬됩니다.
    02.jpg
     
  3. 도큐멘트 형태: 프로필 이미지가 없는 경우엔 그 자리에 닉네임 첫 두 글자가 출력됩니다.
    03.jpg
     
  4. 도큐멘트 형태: 모바일로 보면 프로필 이미지, 닉네임, 날짜 등이 제목 아래로 출력됩니다. 섬네일은 사이즈 구분 없이 가운데 정렬됩니다.
    04.jpg
     
  5. 히스토리 형태: 도큐멘트 형태와 대동소이하지만, 제목 영역 좌우로 border 속성을 부여해서 단체 및 사이트의 발자취에 집중(?)하도록 했습니다(단, 출력 옵션에서 등록일을 제외하면 border 속성도 제외됩니다). 프로필 이미지는 출력되지 않습니다.
    05.jpg
     
  6. 히스토리 형태: 제목에 태그 단어가 있을 경우 orangeRed 색상이 출력됩니다. 섬네일 가로사이즈가 240px보다 작거나 16:9 비율보다 좁을 경우 본문 요약의 좌측으로 정렬됩니다.
    06.jpg
     
  7. 히스토리 형태: 위젯으로 불러온 컨텐츠는 홀짝 순번에 따라, 섬네일과 더보기 버튼 위치가 바뀔 수 있습니다. 물론 섬네일 가로사이즈가 기준값보다 작을 경우에 해당합니다.
    07.jpg
     
  8. 히스토리 형태: 모바일에서 볼 때 섬네일은 가운데로, 더보기 버튼은 우측으로 정렬됩니다.
    08.jpg

 

 

profile

댓글 '26'

프로필 사진 profile
세이나 2016.06.26 16:05 댓글 별점
감사합니다. 잘 쓰겠습니다.
프로필 사진 profile
윤삼 2016.06.26 18:59 댓글 별점
매번 사용해주셔서 감사해요~
프로필 사진 profile
착한인연 2016.06.26 17:22 댓글 별점
잘 쓰겠습니다.
프로필 사진 profile
윤삼 2016.06.26 19:00 댓글 별점
감사합니다. 부족한 점 있으면 일러주세용~
프로필 사진 profile
ito 2016.06.26 18:48 댓글 별점
감사히 잘쓰겠습니다!!
프로필 사진 profile
윤삼 2016.06.26 19:01 댓글 별점
잘 써주시면 이쪽이야말로 감사입니다!!
프로필 사진 profile
jmjim 2016.06.26 20:33 댓글 별점
감사합니다.
프로필 사진 profile
nado0124 2016.06.27 09:07 댓글 별점
멋진 자료 고맙게 잘 사용하겠습니다.
프로필 사진 profile
proto 2016.06.27 11:44 댓글 별점
대박자료 드디어 완성하셨군요^^ 추천합니다
프로필 사진 profile
윤삼 2016.06.27 13:44 댓글 별점
같이 고심해주신 덕분에 힘낼 수 있었어요! 감사합니다 ^^/
프로필 사진 profile
proto 2016.06.27 14:31 댓글 별점
저는 한게 없습니다 ㅠ 도움을 못드려서 죄송할 따름.. 다음에 기회가 된다면 진짜 공동작업을 ^^
프로필 사진 profile
윤삼 2016.06.27 14:57 댓글 별점
그럼, 다음을 기약하며 건배~ (읭?)
프로필 사진 profile
Sunup 2016.06.28 17:06 댓글 별점
너무 멋진 기능 감사드립니다.
프로필 사진 profile
구름이 2016.06.29 15:44 댓글 별점
감사합니다.
잘 사용하겠습니다.null,null,null 이렇게 표시가 되는데.. (물론 올려주신 링크 참고해서 소스 수정도 했습니다.) 질문은 쪽지로 드려야 될런지요..어떻게 해야 될까요?^^;;
프로필 사진 profile
윤삼 2016.06.29 16:12 댓글 별점
null 표시는 위젯 설정 변경 후 나타나긴 하는데, 저장 버튼 누르고 나면 이용하는 데 지장은 없지 않나요?
(부끄러우신 게 아니라면ㅋ 여기서 물어보셔도 됩니당ㅎㅎ)
프로필 사진 profile
구름이 2016.06.29 18:22 댓글 별점
content.class.php 수정 -> 스킨파일 수정은 못했습니다.. 안해도 되나요? 링크글의 소스랑 좀 다른거 같기도해 놔뒀습니다. -> 게시판 생성및 사용자 정의 날짜형식 항목 추가 -> 게시글 임의 추가 -> 위젯 페이지 생성후 테스트 해봤으나..물론 저장까지 했구요.
출력이 안되네요. 다른 컨텐츠 위젯 스킨은 작동하구요..
프로필 사진 profile
윤삼 2016.06.29 18:50 댓글 별점
네, 스킨은 딱히 수정하지 않으셔도 됩니다. 링크에서 1번과 2번 항목만 체크해두시면 되거든요.
암튼 별탈없이 설정하신 것 같은데, 안 되는 이유를 저도 잘 모르겠네요ㅠ
혹시 날짜형식의 확장변수가 사용자정의들 중에서 1번 순번으로 되어 있나요?
오늘 밤 늦게야 집에 들어가는데 그때 php파일이랑 해서 저도 다시 한번 점검해보도록 하겠습니다.
프로필 사진 profile
구름이 2016.06.29 19:04 댓글 별점
확장 변수는 게시판 생성후 일자(연월일) 형식으로 하나만 생성 해뒀습니다.
xe 버전은 1.8.20입니다
프로필 사진 profile
윤삼 2016.06.30 00:33 댓글 별점
예, 그렇게 하시면 돼요;;;
xe 버전이나 php 버전도 크게 관련은 없을 것 같구요.

현재로선 아무 문제가 없는 것 같으니 파일 수정 부분이나 위젯 설정 부분을 처음부터 다시 점검하는 수밖에는 없을 것 같습니다.
- 혹시 몰라서 제가 쓰는 content.class.php도 첨부해놨습니다.한번 비교해보세요. (첨부하니까 확장자가 phps로 자꾸 바뀌네요)
- 확장변수는 한 개만 생성하셨다니 문제 없을 것 같고, 컬러셋에서 '히스토리 형태'로 설정되어 있는지도 확인해주세요.

이렇게 해도 안 된다면, (귀찮으시겠지만) 자유게시판이나 질문/답변 게시판에 진행과정을 스샷으로 남겨주시겠어요?

스킨을 만들긴 했지만, 저로서도 별 능력자가 아니어서 단박에 도움 드리지 못하는 점 죄송합니다ㅠ
정 안 되면 php 수정 없이 위젯 스킨만으로 확장변수 구현하는 방도를 찾아보도록 할게요.
프로필 사진 profile
구름이 2016.07.01 10:46 댓글 별점
글 남겼습니다.
https://www.xetown.com/qna/315490
프로필 사진 profile
지구침략자 2016.07.10 09:47 댓글 별점
와~~우~~ 멋집니다...!
프로필 사진 profile
YJ쭌네 2016.07.30 12:26 댓글 별점
굿!
프로필 사진 profile
무기차 2016.11.28 06:05 댓글 별점
감사합니다.잘쓸께요^^
프로필 사진 profile
식이 2017.01.21 07:11 댓글 별점
와.. 이런게 있을줄이야..! 잘 쓰겠습니다.
프로필 사진 profile
sampo 2017.04.28 16:26 댓글 별점
매번 좋은 자료 너무나 감사드립니다^^
프로필 사진 profile
이브이 2017.04.28 20:48 댓글 별점
감사합니다 잘쓸게요 ㅠㅠㅠㅠㅠ
서버에 요청 중입니다. 잠시만 기다려 주십시오...