겔러리 자동 프레임 v 0.0.1

Gellery Frame

잠깐! XE를 처음 만나신 분들은 여기를 먼저 봐주세요.

질문 사항은 여기에 올려주세요.

위젯 컨셉

선택된 모듈들의 첨부파일 중 이미지 목록을 가져와 다양한 겔러리 형식으로 화려하게 표현할 수 있는 위젯입니다.

위젯 데모 1

위젯 데모 2

위젯 데모 3

위젯 설치 하기

비나무님의 FTP 업로드 강의

위젯 기능

1. 1. 첨부 이미지 선택 : 여러개의 모듈에 등록 된 이미지를 원하는 갯수만큼 랜덤하게 가져올 수 있고 한번에 보여지는 이미지 수도 지정할 수 있습니다.
2. 2. 가운데 보여질 이미지와 네비게이션 바에 보여질 이미지의 사이즈를 지정할 수 있습니다.
3. 3. 슬라이더의 움직임을 다양하게 선택할 수 있으며 이동 속도도 제어할 수 있습니다. 또한 마우스 오버 시 멈추게 할 수 있습니다.
4. 4. 슬라이더가 자동으로 움직이게 할 수 있습니다.
5. 5. 이미지 클릭하면 해당 이미지가 첨부된 게시글로 이동하게(or not) 할 수 있습니다.
6. 6. 슬라이더 위의 지정된 위치에 오버레이를 출력(하고, 첨부된 게시글의 제목, 내용, 그리고 작성자(작성일)을 출력할 수 있으며 폰트, 사이즈, 색상도 조절 가능합니다.

위젯 옵션

1. 1. 대상 모듈 : 선택하신 모듈에 등록된 글을 대상으로 합니다.
2. 2. 썸네일 생성 방법 : 썸네일 생성 방법을 선택할 수 있습니다.(기본값: crop) (crop : 꽉 채우기, ratio : 비율 맞추기)
3. 3. 테마 컬러 : 버튼 등의 색을 지정하는 테마를 선택합니다. (기본값: dark)
4. 4. 네비게이터 위치 : 네비게이터의 위치를 지정합니다. (기본값: bottom)
5. 5. 클릭하면 해당 게시글 이동 : 클릭하면 해당 게시글 이동 기능을 사용할지 선택합니다. (기본값: yes)
6. 6. 랜덤 : 이미지를 랜덤으로 가져옵니다. (기본값: no)
7. 7. 마우스오버 시 멈춤 : 마우스오버 시 멈추게 합니다. (기본값: yes)


8. 8. 이미지 가로크기 : 출력될 이미지의 가로크기를 정하실 수 있습니다. (기본값: 500px)
9. 9. 이미지 세로크기 : 출력될 이미지의 세로 크기를 지정할 수 있습니다. (기본값: 200px)
10. 10. 섬네일 이미지 가로크기 : 출력될 섬네일 이미지의 가로크기를 정하실 수 있습니다. (기본값: 50px)
11. 11. 섬네일 세로크기 : 출력될 섬네일 이미지의 세로 크기를 지정할 수 있습니다. (기본값: 50px)
12. 12. 총 이미지 수 : 선택된 모듈에서 가져오는 총 이미지 수 (기본값: 15개)


13. 13. 이동 효과 : 슬라이드 되는 효과를 설정합니다.
14. 14. 자동 스크롤 주기 : 자동 스크롤 주기를 설정합니다. (기본값: 3000 (3초))
15. 15. 자동 스크롤 소요시간 : 자동 스크롤 되는 소요시간입니다. (기본값: 300 (0.3초))
16. 16. 배경색 : 작성자 글자색입니다.(기본값: 투명)


17. 17. 제목, 내용 배경색 : 제목, 내용 배경색입니다.(기본값: 투명)
18. 18. 제목, 내용 배경 투명도 : 제목, 내용 배경 투명도를 선택합니다. (기본값: 0.5)
19. 19. 제목, 내용 보이기 : 헤당 글의 제목과 내용을 보여줄지 선택합니다. (기본값: yes)
20. 20. 제목, 내용 위치 : 헤당 글의 제목과 내용을 어디에 보여줄지 선택합니다. (기본값: 아래)


21. 21. 제목 글자색 : 제목 글자색입니다.(기본값: 투명)
22. 22. 제목 길이 자르기 : 제목이 길경우 설정하신 길이로 잘라지고 ".." 가 붙습니다. (기본값: 14자)
23. 23. 제목 폰트 크기 : 제목글자의 크기를 설정합니다. (기본값: 10px, css 형식의 사이즈 모두 OK)
24. 24. 제목 폰트 : 제목 폰트를 설정합니다. (기본값: "나눔고딕 web", "NanumGothic", "NanumGothicOTF", "나눔고딕", "Malgun Gothic","Trebuchet MS","Lucida Grande", "Tahoma", "Helvetica", "Arial",sans-serif, css 형식의 font-family)


25. 25. 내용 글자색 : 내용 글자색입니다.(기본값: 투명)
26. 26. 내용 길이 자르기 : 내용이 길경우 설정하신 길이로 잘라지고 ".." 가 붙습니다. (기본값: 100자)
27. 27. 내용 폰트 크기 : 내용글자의 크기를 설정합니다. (기본값: 10px, css 형식의 사이즈 모두 OK)
28. 28. 내용 폰트 : 내용 폰트를 설정합니다. (기본값: "나눔고딕 web", "NanumGothic", "NanumGothicOTF", "나눔고딕", "Malgun Gothic","Trebuchet MS","Lucida Grande", "Tahoma", "Helvetica", "Arial",sans-serif, css 형식의 font-family)


29. 29. 작성자 글자색 : 작성자 글자색입니다.(기본값: 투명)
30. 30. 작성자 폰트 크기 : 작성자글자의 크기를 설정합니다. (기본값: 10px, css 형식의 사이즈 모두 OK)
31. 31. 작성자 폰트 : 작성자 폰트를 설정합니다. (기본값: "나눔고딕 web", "NanumGothic", "NanumGothicOTF", "나눔고딕", "Malgun Gothic", "Trebuchet MS","Lucida Grande", "Tahoma", "Helvetica","Arial",sans-serif, css 형식의 font-family)

사용 주의 사항

위젯 설정값을 "0" 으로 설정하고 싶으실때는 "0px"로 적어주시면 됩니다.

제작 참조

* jQuery plugin GalleryView (http://spaceforaname.com/galleryview)를 이용하여 xe widget화 하였음을 명시합니다.
* jquery-1.3.2.js
* jquery.mousewheel.js
* jcarousellite_1.0.1.js

개발자의 다른 프로그램 wizardXE 는 여기에서 확인하세요.