•  

    XE Photo Widgets 방문을 환영합니다.

    잠깐! XE를 처음 만나신 분들은 여기를 먼저 봐주세요.
    질문 사항은 여기에 올려주세요.
    유용하셨다면 WizardXE를 지원해 주세요!
    놀라지 마세요! 이 사이트의 모든 위젯은 플래쉬가 아닙니다.
    jQuery 플러그인(자바스크립트) 입니다.

    사이트 소개

    zirho Photo Widgets 는 다양하고 화려한 jQuery Plugin 을 활용하여 사용자의 취향에 맞는 포토 슬라이딩을 제공하기 위하여 개발되었습니다.


    1. 1. Flowing Pictures
      대상 모듈의 첨부 이미지를 흘러가는 모양으로 꾸밀 수 있는 도구입니다.

    2. 2. Gallery Frames
      대상 모듈의 첨부 이미지를 깔끔하고 멋진 겔러리 페이지로 꾸밀 수 있는 도구입니다.

    3. 3. Layouts
      직접 제작한 Layout 과 Textyle 용 skin을 공개 합니다.

    4. 4. BangBang All Together
      귀차니즘 만만세, 재미있는 위젯 롤러코스터, 물레방아 둥둥 //ㅂ// 등 다양한 움직임을 제공하며 매우 화려하고 플래쉬 같은 깔끔한 표현이 가능한 위젯입니다..



    개발자 소개

    지영재 zirho

    위젯 기획, 개발, 디자인
    http://www.zirho.co.kr
    zirho6@gmail.com





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

     
  •  

    Flowing Pictures v1.1.5

    잠깐! XE를 처음 만나신 분들은 여기를 먼저 봐주세요.
    질문 사항은 여기에 올려주세요.
    유용하셨다면 Flowing Pictures를 지원해 주세요!
    놀라지 마세요! 이 사이트의 모든 위젯은 플래쉬가 아닙니다.
    jQuery 플러그인(자바스크립트) 입니다.

    위젯 컨셉

    선택된 모듈들의 첨부파일 중 이미지를 가져와 랜덤(옵션)으로 보여주고 선택적으로 자동흐름, 버튼이동, 마우스 스크롤 이동 등을 지원하는 이미지 위젯입니다.

    위젯 데모 1

    위젯 데모 2

    위젯 설치 하기

    1. DOWNLOAD flowing_pictures v1.1.5

    2. 자신의 호스트 서버의
    "./widgets/flowing_pictures"
    위치에 위젯 업로드.


    비나무님의 FTP 업로드 강의

    3. 페이지에 위젯 직접 등록, 또는 관리자 페이지에서 위젯 코드 생성

    위젯 기능

    1. 1. 첨부 이미지 선택 : 여러개의 모듈에 등록 된 이미지를 원하는 갯수만큼 랜덤하게 가져올 수 있고 한번에 보여지는 이미지 수도 지정할 수 있습니다.
    2. 2. 보여질 이미지의 크기, 테두리 선 색상, 두께, 그리고 이미지의 간격을 지정할 수 있습니다.
    3. 3. 슬라이더의 움직임을 다양하게 선택할 수 있으며 이동 속도도 제어할 수 있습니다. 또한 마우스 오버 시 멈추게 할 수 있습니다.
    4. 4. 슬라이더가 자동으로 움직이게 할 수 있으며 마우스 휠을 사용하여 움직이게 할 수도 있습니다.
    5. 5. 이미지 클릭하면 해당 이미지가 첨부된 게시글로 이동하게 할 수 있습니다.
    6. 6. 슬라이더 이미지 아래쪽에 첨부된 게시글의 제목을 출력할 수 있으며 폰트, 사이즈, 색상도 조절 가능합니다.

    위젯 옵션

    1. 1. 대상 모듈 : 선택된 모듈에 등록된 글을 대상으로 합니다.
    2. 2. 썸네일 생성 방법 : 썸네일 생성 방법을 선택할 수 있습니다. (기본값: ratio)
    3. 3. 랜덤 : 이미지를 랜덤으로 가져옵니다. (기본값: no)
    4. 4. 마우스오버 시 멈춤 : 마우스오버 시 멈추게 합니다. (기본값: yes)
    5. 5. 이미지 가로크기 : 출력될 이미지의 가로크기를 정하실 수 있습니다. (기본값: 100px)

    6. 6. 이미지 세로크기 : 출력될 이미지의 세로 크기를 지정할 수 있습니다. (기본값: 100px)
    7. 7. 보여지는 이미지 수 : 프레임에 보여지는 이미지 수를 지정할 수 있습니다. (기본값: 3개) (예: 2, 5, 8.2 (소수점 가능))
    8. 8. 총 이미지 수 : 선택된 모듈에서 가져오는 총 이미지 수 (기본값: 7개)
    9. 9. 이동 방식 : 좌우 버튼 또는 자동 스크롤을 설정합니다. (기본값: 좌우 버튼)
    10. 10. 이동 효과 : 슬라이드 되는 효과를 설정합니다.

    11. 11. 자동 스크롤 주기 : 자동 스크롤 주기를 설정합니다. 위의 이동방식이 "자동스크롤" 일 경우 적용됩니다. (기본값: 3000 (3초))
    12. 12. 자동 스크롤 소요시간 : 자동 스크롤 되는 소요시간입니다. (기본값: 1000 (1초))
    13. 13. 이미지 여백 : 이미지의 주변에 생성되는 여백 두께입니다.(기본값: 0px)
    14. 14. 마우스 휠 : 마우스 휠 스크롤이 가능하게 합니다. (기본값: yes)
    15. 15. 이미지 테두리 두께 : 이미지의 주변에 생성되는 테두리 두께입니다.(기본값: 1px)

    16. 16. 이미지 테두리 컬러 : 이미지의 주변에 생성되는 테두리 컬러입니다.(기본값: 투명)
    17. 17. 제목 보이기 : 헤당 글의 제목을 보여줄지 선택합니다. (기본값: no)
    18. 18. 제목 컬러 : 제목 컬러입니다.(기본값: 투명)
    19. 19. 제목 길이 : 제목이 길경우 설정하신 길이로 잘라지고 ".." 가 붙습니다. (기본값: 14자)
    20. 20. 제목 크기 : 제목글자의 크기를 설정합니다. (기본값: 10px, css 형식의 사이즈 모두 OK)
    21. 21. 제목 폰트 : 제목 폰트를 설정합니다.(기본값: 굴림체, css 형식의 font-family)

    사용 주의 사항

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

    제작 참조

    * jQuery plugin Jcarousellite plugin(http://gmarwaha.com/jquery/jcarousellite/)을 이용하여 xe widget화 하였음을 밝힙니다.
    * jquery-1.3.2.js
    * jquery.timers-1.1.2.js
    * jquery.galleryview-2.0.js

    * jquery.easing.1.3.js



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

     
  •  

    Gellery Frame

    잠깐! XE를 처음 만나신 분들은 여기를 먼저 봐주세요.
    질문 사항은 여기에 올려주세요.
    유용하셨다면 Gellery Frame을 지원해 주세요!
    놀라지 마세요! 이 사이트의 모든 위젯은 플래쉬가 아닙니다.
    jQuery 플러그인(자바스크립트) 입니다.

    위젯 컨셉

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

    위젯 데모 1

    위젯 데모 2

    위젯 데모 3

    위젯 설치 하기

    1. DOWNLOAD gallery_frame v0.0.1

    2. 자신의 호스트 서버의
    "./widgets/gallery_frame"
    위치에 위젯 업로드.


    비나무님의 FTP 업로드 강의

    3. 페이지에 위젯 직접 등록, 또는 관리자 페이지에서 위젯 코드 생성

    위젯 기능

    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 는 여기에서 확인하세요.

     
  •  

    일반 사이트 Layout

    잠깐! XE를 처음 만나신 분들은 여기를 먼저 봐주세요.
    질문 사항은 여기에 올려주세요.
    유용하셨다면 zriho Layout을 지원해 주세요!

    레이아웃 컨셉

    모던한 느낌의 무채색을 기본으로 전문적이고 믿음직스러운 느낌을 표현하기 위해 제작된 레이아웃.

    일반 사이트 version 과 Textyle version이 있습니다.

    일반 사이트 데모

    레이아웃 설치 하기

    1. DOWNLOAD zirho_layout

    2. 자신의 호스트 서버의
    "./layouts/zirho_layout"
    위치에 layout 업로드.


    비나무님의 FTP 업로드 강의

    3. 레이아웃 생성 페이지에서 레이아웃 생성

    레이아웃 기능

    1. 1. 레이아웃 로고와 상단에 출력될 대표 문자열을 지정할 수 있고 클릭 시 이동할 URL 도 지정이 가능합니다.
    2. 2. 하단 (footer) 에 들어갈 문자열을 지정할 수 있고 Copyright 문자열도 따로 지정이 가능합니다.

    레이아웃 옵션

    1. 1. 홈 페이지 URL : 로고나 로고 글자를 클릭시 이동할 URL 을 지정할 수 있습니다.
    2. 2. 로고 글자 : 사이트 상단에 출력 될 사이트 대표 이름입니다.
    3. 3. 로고이미지 : 사이트 상단에 출력 될 사이트 대표 로고입니다.
    4. 4. 하단 내용 : 하단에 출력될 문자열을 입력할 수 있습니다.
    5. 3. 카피라이트 내용 : 카피라이트 내용을 입력하면 사이트 최 하단에 출력됩니다.

    Textyle Skin

    잠깐! XE를 처음 만나신 분들은 여기를 먼저 봐주세요.
    질문 사항은 여기에 올려주세요.
    유용하셨다면 Textyle Skin을 지원해 주세요!

    Skin 컨셉

    모던한 느낌의 무채색을 기본으로 전문적이고 믿음직스러운 느낌을 표현하기 위해 제작된 Skin입니다.

    Textyle 데모

    Skin 설치 하기

    1. DOWNLOAD zirho Textyle skin

    2. 자신의 호스트 서버의
    "./modules/textyle/skins/zirho"
    위치에 skin 업로드.


    비나무님의 FTP 업로드 강의

    3. 텍스타일 Skin 선택 페이지에서 zirho Skin 선택

    Skin 기능

    1. 1. 우측에 카테고리, 최신 포스트, 최신 댓글, 최근 트랙백, 그리고 태그 리스트가 출력됩니다.
    2. 2. 방명록 게시판과 태그 페이지가 있습니다.
    3. 3. 수정, 재배포 모두 가능합니다.

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

     
  •  

    Bangbang All Together

    잠깐! XE를 처음 만나신 분들은 여기를 먼저 봐주세요.
    질문 사항은 여기에 올려주세요.
    유용하셨다면 BangBangAllTogether를 지원해 주세요!
    놀라지 마세요! 이 사이트의 모든 위젯은 플래쉬가 아닙니다.
    jQuery 플러그인(자바스크립트) 입니다.

    위젯 컨셉

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

    위젯 데모 1

    위젯 데모 2

    위젯 데모 3

    위젯 설치 하기

    1. DOWNLOAD bangbang_alltogether v0.0.1

    2. 자신의 호스트 서버의
    "./widgets/bangbang_alltogether"
    위치에 위젯 업로드.


    비나무님의 FTP 업로드 강의

    3. 페이지에 위젯 직접 등록, 또는 관리자 페이지에서 위젯 코드 생성

    위젯 기능

    1. 1. 첨부 이미지 선택 : 여러개의 모듈에 등록 된 이미지를 원하는 갯수만큼 랜덤하게 가져올 수 있고 한번에 보여지는 이미지 수도 지정할 수 있습니다.
    2. 2. 슬라이더의 움직임을 다양하게 선택할 수 있으며 이동 속도도 제어할 수 있습니다. 또한 마우스 오버 시 멈추게 할 수 있습니다.
    3. 3. 슬라이더가 자동으로 움직이게 할 수 있습니다.
    4. 4. 이미지 클릭하면 해당 이미지가 첨부된 게시글로 이동하게(or not) 할 수 있습니다.

    위젯 옵션

    1. 1. 대상 모듈 : 선택하신 모듈에 등록된 글을 대상으로 합니다.
    2. 2. 썸네일 생성 방법 : 썸네일 생성 방법을 선택할 수 있습니다.(기본값: ratio) (crop : 꽉 채우기, ratio : 비율 맞추기)
    3. 3. 랜덤 : 이미지를 랜덤으로 가져옵니다. (기본값: yes)
    4. 4. 캔버스 가로크기 : 출력될 캔버스의 가로크기를 정하실 수 있습니다. (기본값: 7)
    5. 5. 캔버스 세로크기 : 출력될 캔버스의 세로 크기를 지정할 수 있습니다. (기본값: 7)

    6. 6. 이미지 가로크기 : 출력될 이미지의 가로크기를 정하실 수 있습니다. (기본값: 7)
    7. 7. 이미지 세로크기 : 출력될 이미지의 세로 크기를 지정할 수 있습니다. (기본값: 7)
    8. 8. 보여줄 이미지 수 : 선택된 모듈에서 가져오는 총 이미지 수 (기본값: 7개)
    9. 9. 시작 각도 조절 : 슬라이딩 각도를 조절할 수 있습니다.
    10. 10. 제일 뒷 사진 투명도 : 제일 뒷 사진의 투명도를 선택합니다. (기본값: 0.4)

    11. 11. 자동 스크롤 주기 : 자동 스크롤 주기를 설정합니다. (기본값: 3000 (3초))
    12. 12. 자동 스크롤 소요시간 : 자동 스크롤 되는 소요시간입니다. (기본값: 300 (0.3초))
    13. 13. 마우스오버 시 멈춤 : 마우스오버 시 멈추게 합니다. (기본값: yes)
    14. 14. 이미지 동선 : 이미지의 슬라이드 움직임 동선을 설정합니다.
    15. 15. 이동 효과 : 슬라이드 되는 효과를 설정합니다.

    제작 참조

    * jQuery Roundabout을 이용하여 xe widget화 하였음을 명시합니다.
    * jquery-1.3.2.js
    * roundabout-1.0.js
    * roundabout-shapes-1.1.js



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