Data Of MoonHouse

SketchBook5 게시판스킨 - 문하우스 수정버전 V3.0 - 2024.04.10

• 기존 스케치북 게시판 스킨에 덮어 쓰기 해도 잘 작동됩니다. (혹시 모르니 백업은 필수!!) - /modules/board/skins/sketchbook5 에 모든 파일을 덮어 쓰기 하면 됩니다. • XE 사용자의 경우 [ 본문 일반 설정 > 추천/비추천 기능 XE사용 ] 에서 XE사용을 선택하면 됩니다. [ V3.0 수정 ] 1. 폰트어썸 웹폰트와 문하우스 전용 버턴 기능을 에드온에 의존하지 않고 게시판 설정에서 직접 관리 전체설정 > 폰트어썸 사용형태 or Sexy Button 사용형태 2. 게시글 상단 네비에 목록과 쓰기 버턴 추가 3. 공지글 폴딩 형태로 출력 기능 추가 ...

More →

SketchBook5 게시판스...

MH Before V1.1 위젯

[ 특징 ] 1. Before이미지 와 After이미지를 비교하는 위젯 2. 지정 게시판에 Before 이미지를 처음 올리고 After 이미지를 두번째로 업로드 3. 대상 분류 srl값으로도 출력가능 4. 이미지의 사이즈는 첫이미지, 즉 Before이미지의 사이즈를 따라갑니다. 되도록이면 사이즈를 동일하게 만들면 됨 5. 중앙에 화살표를 좌우로 움직이면 Before / After 이미지로 출력 6. 하단문구 지정 가능 7. 게시글의 이미지 순서 지정 가능 [게시판 화면] [위젯 화면] [화살표를 좌로 움직인 화면]

More →

MH Before V1.1 위젯

Mh Make 위젯스타일

문하우스 대문페이지에 있는 위젯스타일입니다. [특징] 1. 테두리의 유무 2. 타이틀 색상, 타이틀 앞 언더바 색상 지정 가능 3. 더 보기 출력 4. V1.1 - 테두리 색상 지정 가능 [설정 화면]

More →

Mh Make 위젯스타일

Mh BigSlider V2.1 위젯 - 2024.04.13

[ V 2.1 특징 ] 1. 내용글 영역에 확장변수 출력가능 2. 확장영역 버턴 대신 내용 출력 3. D-day / 시작전 출력 4. 기간 출력 - https://moonhouse.co.kr/xetip/590008 [ V 2.0 특징 ] 1. 배경 이미지 제거 스킨 추가 2. 어떤 크기라도 가능 3. 슬라이드 내용 가로, 세로 정렬 [ V 1.1 특징 ] 1. Slide 설정에 자동 슬라이드쇼, 마우스 hover시 슬라이드 쇼 일시 중지, 랜덤 재생 추가 2. 마우스 hover시 썸네일 확대 [ 특징 ] 1. 깔금한 슬라이드 배경이미지 적용 2. 3개의 스킨 적용 - 1080px / 850px / 750px 레이아웃폭에 적당한 크기 ...

More →

Mh BigSlider V2.1 위...

Mh Justice Layout V 1.5 [ 2023. 02. 07 ] - Sale 제품(₩39,000)

Mh Justice Layout is a one page html5 bootstrap template. This template comes with smooth animations, pop-up video and many more… 1. OnePage로 출력되며 Bootstrap과 Animations를 적용하여 스크롤 되는 순간 각 Section영역 에니메이션이 작동 2. 거의 완벽한 반응형(모바일형)으로 츨력 3. 간단한 설정 한번으로 색상변경 완료 - 밝은 배경, 어두운 배경, 혼합배경을 선택후, 설정 옵션들에서 자신만의 칼라로 변경 가능 4. 상단 메뉴를 자유자재로 선택 가능 • 원페이지 메뉴 - 한페이지내에서 상하로 이동하는 메뉴 • 메인 메...

More →

Mh Justice Layout V 1...

Mh SmartBanner Widget V1.1 [2021.01.13] - Sale 제품(₩9,000)

카테고리지정 / 시작,종료설정 / 배경 블랙 / 좌로 이동 / 랜덤 / 네비가능 / 무한루프 / 클릭시 지정사이트로 이동 / 풍선도움말 - "대상 분류값"으로 배너 출력 가능 - "위젯 NO" 처리로 여러개의 배너를 다양한 형태로 생성 가능 - Slide의 다양한 옵션 - Auto기능과 타임지정 가능 - 좌우 네비와 하단에 도트 네비 출력 가능 - 슬라이딩의 방향을 좌우 / 상하로 선택 가능 - 슬라이딩의 모습를 4가지로 선택 가능 - 서서히, 착, 튕기기, Fade - 배너에 마우스 Hover시 풍선도움말 출력 - 게시판의 확장변수와 연동하여 배너 클릭시 지...

More →

Mh SmartBanner Widget...

Mh Brickfolio Widget V1.3 [2023.04.05] - Sale 제품(₩9,000)

[ V1.3 특징 ] [ SketchBook5_Mh 수정버전과 같이 연동 ] • 확장 변수가 자동으로 제목으로 대체되는 방법 https://moonhouse.co.kr/xetip/578453 • 확장변수를 이용해 진행버턴과 D-Day를 함께 출력 https://moonhouse.co.kr/xetip/577872 [ V1.2 특징 ] 1. 페이지기능을 탑재한 Box형 위젯 2. 통합게시판 위젯으로도 활용가능 3. 썸네일클릭시 게시판 바로가기, Rightbox 출력 및 Zoom기능도 지원 4. 완벽히 반응형으로 작동합니다.(레이아웃의 폭을 % 넓이로 지정할때) 5. Box를 총8가지의 에니메이션 효과로 출력 6. Box의 색상 / 테두...

More →

Mh Brickfolio Widget ...

Mh Portfolio V1.0

[ V1.0 특징 ] 1. 깔끔한 썸네일 위젯 2. 썸네일 Box에 마우스 Hover시 제목과 내용글이 다양한 효과와 색상으로 출력 -- 효과 15가지, 배경색상 13가지, 버턴색상 17가지 3. 카테고리별 출력도 가능 4. 페이지 기능 가능 -- ajax적용으로 화면 리프레쉬 없이 작동 5. 확장변수를 이용해 버턴출력 가능 6. 다수의 위젯생성도 가능 7. 반응형 지원

More →

Mh Portfolio V1.0

Mh Owl Slide V1.0

[ 특징 ] 1. 깔금한 배너 롤링 위젯입니다. 2. Auto Slide를 지원합니다. 3. 슬라이드에 타이틀 / 썸네일 / 네비를 지원합니다. 4. 배경색상외 여러 색상들을 지정할 수 있습니다. 5. 타이틀 / 내용 / 각종 옵션등을 지정 가능합니다. 6. 카테고리 출력도 가능합니다. 7. 원본 코드의 테마 색상이 Red에 맞추어져 있어서 기본 색상은 Red입니다. 8. 완벽한 반응형 지원과 모바일에서 스와프기능도 지원합니다. 9. 두종류의 스킨 지원 - Default Skin, All Pictures Skin All Pictures Skin은 게시물안의 모든 이미지들을 불러올 수 있으며 ...

More →

Mh Owl Slide V1.0

Mh Multi Widget V1.6 [2023.04.05] - Sale 제품(₩9,000)

메뉴얼 [ V 1.6 업데이트 내용 ] • 댓글 많은순으로 정렬. https://xetown.com/questions/1394764#comment_1395175 • 예약발행 모듈에 대응 https://xetown.com/download/1721679#comment_1722728 [ SketchBook5_Mh 수정버전과 같이 연동 ] • 확장 변수가 자동으로 제목으로 대체되는 방법 https://moonhouse.co.kr/xetip/578453 • 확장변수를 이용해 진행버턴과 D-Day를 함께 출력 https://moonhouse.co.kr/xetip/577872 [ V 1.5 업데이트 내용 ] •FirstThumb 스킨 추가 스케치북 게시판 스킨 V 2.1 에 추가된 "첫 게시글만 썸네일 출력 ...

More →

Mh Multi Widget V1.6 ...

Mh Author 위젯 V1.5 (2024.01.10)

V 1.5 수정내용(2024.01.13) 1. 베너스킨 바로가기 확장변수 미작성시 문제 해결 2. 유튜브스킨 추가 - 확장변수 사용자정의 (기본 : transfer) : 위젯상에서 유튜브 재생 가능 합니다만 사이트가 약간 느려집니다. V 1.4.1 수정내용(2021.08.28) - default스킨과 Book스킨을 동시에 출력시 제목글이 좌측으로 밀리는 문제해결 V 1.4 수정내용(2021.02.12) SketchBook5 게시판스킨 - 문하우스 수정버전 V1.8.1 북 갤러리 형태 게시판에 맞추어 "Book 갤러리"스킨 추가 - Book 갤러리형식 게시판의 확장변수를 그대로 가져옵니다 - new, bes...

More →

Mh Author 위젯 V1.5 (...

Mh Sideways Layout

[특징] •화면전환이 가로 방향으로 움직입니다. •홍보용 사이트 레이아웃에 적합합니다. •화면 좌우에 마우스 Hover시 자동으로 슬라이딩 됩니다. •좌측 삼선 햄버거 메뉴형식 / 페밀리 사이트 / 자체 로그인 지원합니다. •카카오 지도를 지원합니다 - 카카오톡 앱키 입력 필수 •본문 아래에 각 섹션 바로가기 아이콘을 지원합니다. •완벽한 반응형으로 작동합니다. •메세지 보내기(Contact Us)를 적용할려면 contactfree.zip 위젯을 설치하면 됩니다. •갤러리 섹션은 Lightbox 전용 Hover 위젯 을 사용했습니다.

More →

Mh Sideways Layout

Mh Gallery Layout & Mh Gallery Widget V2.2 [2022.05.22] - Sale 제품(₩19,000)

[ V2.2 특징 ] •Colorbox Skin 추가 - 첫화면에 박스출력 - Auto Slide 지원 •본문 메뉴(GNB)를 상단 가로 형태에서 좌측 삼선 햄버거 형태로 변경 •배경이미지 슬라이드 로딩 기능을 적용 Demo - https://moonhouse.co.kr/cb [ V2.0 LightBox Skin 특징 ] •LightBox Skin 추가 -- 지연님 요청 •Default Skin은 이미지를 전체화면 Fullscreen 으로 출력되는 반면 LightBox Skin은 이미지의 원본 크기로 출력됩니다. Demo - https://moonhouse.co.kr/lb [특징] •레이아웃과 위젯의 콜라보로 이루어진 전체화면 갤러리 스킨입니다. •레이아웃...

More →

Mh Gallery Layout &am...

Widgets Of MoonHouse

Data Of MoonHouse

Prev 4 5 6 7 8 Next

Layouts Of MoonHouse

    • Mh Sideways Layout
    • [특징] •화면전환이 가로 방향으로 움직입니다. •홍보용 사이트 레이아웃에 적합합니다. •화면 좌...
    • 2022.05.16
    • 문하우스 Simple 레이아웃 V 1.4 (2020.12.13 Up)
    • V1.4 수정내용(2020.12.13) 1. 코드정리 2. 자체 로그인 탑재 V1.3.1 수정내용 1. 심플레이아웃과...
    • 2015.05.18
    • Mh Thomsander Layout V1.0
    • [특징] - 페이지안에서 부메뉴가 Box형식으로 열립니다. - 배경이미지를 슬라이드로 출력합니다. ...
    • 2019.09.12
    • Mh White Layout V1.1
    • [ V1.1 특징 ] 1. 본문 상단에 Accordions / TiltedContent 이미지박스 출력선택 - mwea.html 와 ...
    • 2019.04.04
    • Mh LeftMenu 레이아웃 V1.2
    • [특징] - Sub메뉴를 좌측 Wing영역에 배치하여 Sub메뉴의 활용도를 높였습니다. - 최대한으로 코...
    • 2019.01.07
    • MH FullPage 레이아웃 V1.2
    • 마우스 휠 한번 작동시 전체 화면 스크롤되는 FullPage 레이아웃입니다. [Tip] 페이지에 Youtube...
    • 2018.12.04
    • MH Pointy Slider 레이아웃
    • MH_Pointy-Slider 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정...
    • 2018.10.27
    • MH_Sliding 레이아웃
    • MH_Sliding 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정했습니...
    • 2018.10.20
    • 사이트선택 전용 레이아웃 V1.1
    • 홈페이지의 첫 화면에서 두곳의 사이트를 선택하고 싶을때 사용하시면 유용한 레이아웃입니다. [...
    • 2017.06.19
    • XE기본 Xedition레이아웃을 편집이 편리하도록 수정한 버전입니다. 2탄
    • XE 1.8 버전대 기본레이아웃인 Xedition을 사용자가 편집이 편리하도록 수정한 최후 버전 https:/...
    • 2016.12.26

XE Of MoonHouse

[-s] Q. 직접입력을 해서 유튜브 동영상 소스코드를 넣으면 팝업이 보이지 않습니다. A. 직접 입력을 선택하셔도 문서번호는 필히 입력하셔야 됩니다. Q. 문서 번호를 넣어봤는데요 썹네일과 동영상이 작게 나와서요. A. "media_embed 애드온"을 사용하시는 것 같은데 글 작성시 소스코드를 직접 입력하셔야 됩니다. [ V1.4 UP ] -2022.04.19 •상단에 닫기 아이콘 선택 가능 •팝업 외부에 하단 닫기 영역 위치시 Bar전체에 배경색 적용 - 내부에 위치시는 기존의 방식 유지 •달카페님의 요구 관철 - https://moonhouse.co.kr/qa/555255?comment_srl=555331#comment_555331 [-] [ V1.3 UP ] -2021.06.05 •무한대의 팝업 출력 가능을 단순화 •팝업의 출력을 그룹별로 지정 가능 [-] [ V 1.2 Up ] -2021.01.22 무한대의 팝업 출력 가능 - 팝업 순서와 팝업 Class명만 바꾸어 주면 됩니다. [-] - V 1.1 Up [2020.12.23] 지정한 게시판외에 직접 입력방식 추가 상단부분은 이미지이며 하단 부분은 html로 작성한 경우입니다. - 사용방법 mh_appoint_popup Pro 위젯은 대상문서의 번호를 입력하면 팝업으로 출력됩니다. - Pro 특징 1. 자체적으로 2개의 팝업을 띄울 수 있습니다. 2. 2개의 팝업창이 완전히 다르게 작동합니다. (팝업순서와 팝업 Class명 으로 적용) 3. 팝업창 닫는 기간 날 수를 정 할 수 있습니다. 4. 지정한 날짜에 팝업을 닫을 수 있습니다.(2가지 방법) 두 방법 다 장단점이 있습니다. 위젯의 설정을 이용하는 방법은 간단하나 클라이언트가 방법을 어려워 할 수 있습니다. 게시판의 확장변수를 이용하는 방법은 설정이 좀 복잡하나 한번 설정해 놓으면 게시판에서 글 수정만으로 종료일을 변경할 수 있습니다. [첫번째 - 위젯의 설정를 이용] 위젯의 설정에서 "팝업창 출력종료 날짜지정"란에 종료할 날짜를 20191207 이런 형식으로 적어주시면 됩니다. [두번째 - 게시판의 확장변수를 이용하여 설정] A. 먼저 팝업으로 지정할 게시판에 "설정" - "사용자정의" 에 사용자정의 이름을 end로 하고 "형식"을 "일자(연월일)"로 확장변수를 하나 만듭니다. B. 게시판에 글 작성시 확장변수의 팝업종료일을 지정합니다. (종료일을 지정하지 않으면 종료 기능이 작동하지 않습니다) C. "사용지 정의 이름"이 end가 아닌 경우는 팝업위젯 출력시 "날짜지정 팝업닫기 사용자정의 이름"란에 이름을 적어 주시면 됩니다 이전 일반 버전들 입니다. [-f]
Prev 5 6 7 Next
- '템플릿 컴포넌트'입니다. - 미리 완성된 서식(템플릿)을 이용해 문서를 편집할 수 있게 해주는 에디터 컴포넌트입니다. 기본 기능 - 원래는 회원 발송용 뉴스레터 템플릿을 제공하기 위해 만들었던 컴포넌트입니다. GG님의 관리자 메일 모듈과 같이 쓰면 좋습니다.( 0.5 버전 https://xetown.com/rxe_point/278628 , 깃허브에는 0.6도 있습니다ㅎ ) - 그 외에도 컴포넌트 이용자가 템플릿을 직접 만들어 활용할 수 있으므로, 견적서, 증빙서류 등 정해진 서식을 출력할 때 활용하는 것도 좋을 것 같습니다. - 풀 페이지, 헤더, 섹션, 푸터 등 4가지 타입의 템플릿을 제공합니다. - 해당 템플릿을 에디터 내 원하는 위치에 삽입할 수 있으며, 전체 덮어쓰기도 할 수 있습니다. 사용 방법 - CKEditor4 기준으로 설명합니다. - 보라색 부분의 아이콘을 누릅니다. - 팝업창이 뜹니다. - 썸네일 리스트의 원하는 템플릿을 골라 에디터에 '추가'하거나 '덮어쓰기'를 하면 에디터에 이렇게 적용됩니다. (템플릿 요소(li)를 더블클릭하면 에디터 커서 위치에 '추가'가 됩니다) - 물론 이미지나 글 내용을 수정할 수도 있습니다. 템플릿 등록 방법 - 컴포넌트 폴더에 templates 이라는 폴더가 있는데요. 이 안에 템플릿 문서 파일이 있는 하위폴더들이 있습니다. - 하위폴더의 이름은 템플릿들의 이름이기도 합니다. - 각각의 하위폴더에는 기본 제공되는 폴더에 있는 것처럼 index.html, info.xml, thumb.jpg가 있어야 합니다. - index.html은 템플릿의 html 코드를 담고 있습니다. 참고로, 기본 제공되는 템플릿은 뉴스레터 이메일 용으로 제작 중인 것이어서 기본적으로 인라인 스타일을 일괄적용하고 있습니다. - info.xml은 템플릿의 정보를 담고 있습니다. 기존 파일을 열어보시면 아시겠지만, admin, full_page, header, section, footer에 관한 정보가 필수적으로 들어가야 합니다. admin 값이 Y면 관리자만 템플릿을 적용할 수 있습니다. N이면 에디터 이용자 모두가 볼 수 있구요. full_page 값이 Y면 전체 문서에 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. header 값이 Y면 문서의 머리말로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. section 값이 Y면 문서의 본문으로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. footer 값이 Y면 문서의 꼬리말로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. - thumb.jpg는 팝업창에서 출력하는 템플릿 리스트에서 출력할 썸네일입니다. 크기는 대략 120*100px 정도가 좋습니다. => 이렇게 준비하시면 여러분도 템플릿을 등록해서 언제든 꺼내서 사용하실 수가 있게 되는 겁니다. 주의 사항 - 본 템플릿 컴포넌트는 CKEditor4와 FroalaEditor에서 작동합니다. - 단, 프로알라 에디터의 경우에는 요소가 삽입될 경우 요소 앞뒤로 p태그가 자동으로 추가되므로 CKEditor4와 에디터 반영 결과가 다소 다를 수 있습니다. 테스트 환경 - 크롬 66.0.3359.181 / IE 11.48.17134.0 / 엣지 42.17134.1.0 - 라이믹스 1.9.6 / PHP 버전: 7.0.22 ... CKEditor4 - XE 1.9.7 / PHP 버전: 5.5 ... FroalaEditor - 스포어 웹호스팅, 카페24 웹호스팅 히스토리 - 2017년 9월 11일 "신기하네요. 레이아웃 만들기" https://xetown.com/rxe_story/729982 - 2017년 9월 13일 "재미난 녀석을 만들고 있습니다 ... 템플릿 컴포넌트" https://xetown.com/rxe_story/731957 - 2018년 6월 14일 "템플릿 컴포넌트 순항 중ㅎㅎ" https://xetown.com/board/996760 - 2018년 6월 17일 "XE에서 컴파일이 안돼요ㅠ(라이믹스에서는 되구요)" https://xetown.com/qna/998893 데모 - 라이믹스 1.9.6 / CKEditor4 / PHP 7.0.22 https://bit.ly/2IECAeU (들어가서 -> 쓰기 버튼 -> 템플릿 컴포넌트 아이콘을 클릭하면 컴포넌트 팝업창이 뜸) 문하우스에서 만든 템플릿들 - https://moonhouse.co.kr/index.php?mid=xemy&search_target=tag&search_keyword=MH+%ED%85%9C%ED%94%8C%EB%A6%BF
현재 위치(지오로케이션)기반 날씨 위젯을 만들기로하고 일주일이 지났네요 @.@ 너무 오래 붙잡고 있으면 안될꺼 같아서 주말에 시간내서 마무리 지었습니다. 우선 배포하고 문제가 발견되면 추후 수정하는게 좋다는 생각입니다... ㅎㅎ 개인적으로 사용하던 날씨 위젯 레이아웃이 있어서 그나마 수월하게 끝냈 수 있었습니다. 역시나 이번에도 주소록 파일 만드는데 대부분의 시간을 허비 했습니다. 그나마 경험이 있어서 조금은 빨리 데이터 정리할 수 있었네요 ㅋㅋㅋ 날씨 위젯 0.3 pr_weather_v2_0.3.zip 주의 사용 전 http://aqicn.org/data-platform/token/ 이곳에서 키를 발급받아야 합니다. 이메일과 닉네임만 넣으면 이메일 인증 후 키를 발급 해 줍니다. api.func.php 파일을 열어서 15번째 라인 'API Token'자리에 해당키를 입력후 저장하고 위젯을 작동시켜 주세요. 변경사항 1. 캐시 데이터에 변화가 있으니 캐시파일 재생성 후 사용하시는것이 좋습니다. 2. 코드를 세분화하고 오류체크가 미흡했던 부분들 보완 했습니다. 3. '기본스킨 - 가로형'이 추가되었습니다. 참고로 기존 '기본스킨'은 변경된 부분이 없습니다. - 너비에따라 최대 3개의 날씨 예보를 표시 합니다. - 하단 스크롤을위해 아래 jquery plugin을 사용하였습니다. http://richhollis.github.io/vticker/ 날씨 위젯 0.2 pr_weather_v2_0.2.zip 주의 사용 전 http://aqicn.org/data-platform/token/ 이곳에서 키를 발급받아야 합니다. 이메일과 닉네임만 넣으면 이메일 인증 후 키를 발급 해 줍니다. api.func.php 파일을 열어서 15번째 라인 'API Token'자리에 해당키를 입력후 저장하고 위젯을 작동시켜 주세요. 변경사항 1. 사용하는 쿠키명을 '_pr_w_weather_geo'로 단일화 하였습니다. - 기존에는 위치기반 사용자와 수동으로 지역 선택해서 사용하는 사용자의 쿠키명을 다르게 운영하였는데 이를 하나로 통합 했습니다. - 기존 사용자들의 쿠키들은 위젯에서 확인해서 자동 업데이트 합니다. 2. api통신시 타임아웃을 3초로 변경 하였습니다. - api.func.php 파일 13번째 라인 ($_timeout = 3;)에서 이 시간을 변경 하실 수 있습니다. 위 이미지 참조. 3. 통신방식을 curl로 변경 하였습니다. 4. 위젯 설정값에 '위치값 유효 시간 (분)'을 추가 하였습니다. - 이 값은 위치 기반 사용자의 경우에만 유효합니다. 유효 시간이 지난 후 페이지 새로고침이 발생하면 자동으로 내 위치 찾기 버튼 클릭 이벤트를 발생시켜 나의 위치를 갱신해서 날씨 데이터를 표시 합니다. 5. 위젯 실행시 더이상 날씨 데이터를 만들지 않고 ajax로 처리 합니다. - 페이지 표시할때 날씨 위젯이 캐시 유효기간이 만료되어 이를 갱신하거나 새로운 사용자의 날씨 데이터를 생성하느라 로딩 시간을 꽤나(1~2초) 잡아먹는 경우가 발생 했었습니다. 이를 해결하기위해 페이지 로딩시에 위젯은 유효한 캐시가 있을때만 이 데이터를 html로 뿌려 줍니다. - 유효한 날씨 데이터가 없을때는 기본 화면을 먼저 띄우고 날씨 데이터는 페이지 로딩 이후 ajax로 불러 옵니다. - 날씨 위젯때문에 페이지 로딩이 느려지는일은 이제 없을겁니다. 6. 자료 제공자의 바로가기 링크가 수정되었습니다. - 기상청 : 기존 날씨누리 메인 페이지에서 동네 예보를 검색할 수 있는 서브 페이지로 변경 되었습니다. pc : http://www.weather.go.kr/weather/forecast/timeseries.jsp 모바일 : http://m.kma.go.kr/m/forecast/forecast_01.jsp - World Air Quality : 기존 세계 상황을 볼수있는 페이지에서 자신의 위치 근처의 상활을 볼 수 있는 페이지로 변경. 날씨 위젯 0.1 pr_weather_v2_0.1.zip 주의 1. 데이터를 받아올때 curl이나 snoopy같은 클래스 이용없이 간단하게 file_get_contents을 이용했습니다. 2. 지오로케이션 api는 https가 아니면 작동하지 않을 수 있습니다. 이경우에는 자동 위치확인 아이콘을 클릭하더라도 주소록 선택화면이 뜨로록 했습니다. 그리고 브라우저나 환경(pc, 모바일)에 따라서 정확하지 않은 좌표를 반환 할 수 있습니다. 3.위젯이 작동하기 위해서는 http://aqicn.org/data-platform/token/ 이곳에서 키를 발급받아야 합니다. 이메일과 닉네임만 넣으면 이메일 인증 후 키를 발급 해 줍니다. api.func.php 파일을 열어서 7번째 라인 'API Token'자리에 해당키를 입력후 저장하고 위젯을 작동시켜 주세요. 4. 위의 이미지에서 보듯이 5번째 라인에 타임아웃을 5초로 설정하고 있습니다. 5초동안 응답이 없다면 기존 캐시 데이터를 이용하도록 설계되어 있습니다. 설정 1. 스킨의 컬러셋은 '흰색 바탕용'만 작업했습니다. 2. 캐시는 기본제공되는 위쪽의 캐시는 사용하지 마시고 아래쪽에 따로 마련된 '캐시 유지시간'을 사용 하세요. 캐시는 30분 이상 충분히 넉넉하게 사용하시는것을 추천 합니다. 3. 지역을 설정하지않은 사용자에게 보여줄 기본지역은 서울의 중앙 부분쯤인 필동으로 기본값을 정했습니다. 4. 마지막 애드온과 연동 부분은 제가 개인적으로 사용하는 애드온과 연동하기 위한 부분이니 신경쓰지 않으셔도 됩니다. - 여담 입니다만 눈송이 애드온을 보고 제가 개인적으로 사용하던 애드온과 너무 흡사해서 놀란적이 있습니다. 같은 플러그인을 사용해서 눈송이 옵션이 비슷한것을 떠나 실제 날씨와 연동한 아이디어도 비슷해서요 ㅎㅎㅎ 혹시 이 옵션을 이용하시려면 애드온등에서 아래 코드로 체크 하시면 됩니다. if(Context::get('pr_is_snowing') == 'Y' || $_SESSION['pr_is_snowing'] == 'Y') { //눈이나 눈/비가 내리는 날씨 입니다. } 참고 사항 1. 캐시는 캐시 유지시간을 초과했더라도 무조건 삭제하지 않고 새 날씨 데이터를 가져올때 응답이 느려 타임아웃이 발생하면 기존 캐시를 또한번 이용하도록 설계하였습니다. (주의 4번 참조) 2. 주소록 관련 기존 포털 사이트에서는 최종 읍/면/동의 개수가 6,491개 였습니다. 하지만 기상청에서 제공하는 주소록에는 전국 3,504개의 읍/면/동만 제공하더군요. 이 위젯은 기상청 데이터를 이용하므로 기상청의 지역 분류에따랐습니다. 예로 서울 중구의 경우 아래처럼 차이가 납니다. 좌측이 포털사이트, 우측이 기상청 입니다. 3. 기상청에서는 자신들만의 x,y좌표에 따라 구역을 나눠서 최종 데이터를 제공하는것으로 보입니다. 따라서 10자리 지역코드가 다르더라도 x,y좌표가 겹치는 지역이 상당히 많습니다. 그래서 캐시또한 x,y좌표에 따라 관리합니다. 2번에서 밝힌대로 전국 3,504개의 지역이 있지만 x,y좌표 겹치는곳을 제거하면 1,620개 지역으로 압축됩니다. 서울의 경우는 겹치는 지역이나 경기권과 겹치는 경우를 제외하면 18개의 좌표만 남습니다. 4. 지오로케이션 얻어온 좌표기반으로 지역명을 구하는 api를 구글이 제공하기는 합니다만 무료는 하루 2,500쿼리 제한도 있고 또한번 통신을 하므로 속도저하가 있을것으로 판단하여 따로 api를 이용하지않고 주소록에서 지역명을 찾아오도록 했습니다. 다만 속도를 위해 간단하게 기상청의 x,y좌표 기반으로 지역명을 판단하게 만들다보니 지역명이 정확하지 않을 수 있습니다. 예로 아래 지역의경우 모두 같은 x,y좌표를 사용합니다. 따라서 현재 지역이 아래와 같다면 순서에의해 모두 '서대문구 천연동'이라고 표시가 됩니다. 서대문구 천연동 성북구 돈암제2동, 삼선동, 성북동, 정릉제1동, 정릉제2동 종로구 가회동, 교남동, 무악동, 부암동, 사직동, 삼청동, 숭인제1동, 이화동, 종로1.2.3.4가동, 종로5.6가동, 창신제2동, 창신제3동, 청운효자동, 평창동, 혜화동 중구 광희동, 명동, 소공동, 신당동, 을지로동, 장충동, 필동 5. 날씨 아이콘은 아래 링크의 무료 공개된 아이콘을 받아서 제가 간단하게 색을 입혔습니다. https://dribbble.com/shots/1247177-Weather-icons 6. 통합대기 품질은 데이터 제공자의 등급 표시에 따라 표기합니다. 위젯 작동 1. 통합대기 상태를 클릭하면 자세한 수치가 표시됩니다. 2. 위치 기반 3. 지역 수동 선택 4. 위치 기반이던 지역 수동 선택이던 지역 정보를 쿠키에 저장해서 사용합니다. 적다보니 상당히 길어졌네요... 문제가 있다면 댓글 달아주시면 시간 나는대로 수정하겠습니다. 마지막으로... 충분히 테스트 해보시고 사용하시기 바랍니다. ㅎㅎㅎ
Prev 5 6 7 Next
앞서서 "관리자는 필수 확장변수를 입력하지 않아도 되는" 글을 아이디어 수준에서 남겨봤는데요. 관리자는 필수 확장변수 입력을 프리패스하기 위한 아이디어 코어를 수정하면 되는데 하지는 마세요 ㅎㅎㅎ if($val->is_required == 'Y') $js_code[] = sprintf('validator.cast("ADD_EXTRA_FIELD", ["extra_vars%s", { required:true }]);', $idx); 이 부분을 if($val->is_required == 'Y' && $this->user->is_admin != 'Y') $js_code[] = sprintf('validator.cast("ADD_EXTRA_FIELD", ["extra_vars%s", { required:true }]);', $idx); 이렇게 바꿔주면 되기는 하는데요. 이와 같은 방식으로... by 윤삼 from XETOWN 심플코드님이 힌트도 알려주시고 해서 뚝딱거려보다가 대강 구현을 한 것 같습니다. 코어 수정을 하지 않고 스킨단에서 처리를 했어요. (심플코드님 감사해요!) 글쓰기 템플릿 파일(보통 write_form.html) 제일 밑에 아래와 같은 스크립트 코드를 넣어보세요~ 그럼 이제 관리자는 필수 확장변수를 입력하지 않아도 글쓰기가 가능해집니다. 특별히 공지 글을 남길 때 확장변수를 입력하거나 출력하지 않을 수 있답니다. <!--@if($grant->manager && count($extra_keys))--> <script> (function() { var validator = xe.getApp("validator")[0]; if(!validator) return false; <!--@foreach($extra_keys as $idx => $val)--><!--@if($val->is_required == 'Y')--> validator.cast('DEL_EXTRA_FIELD', ['extra_vars{$idx}']); <!--@endif--><!--@endforeach--> })(); </script> <!--@endif-->
레이아웃 제작시 바탕배경으로 이미지를 적용시 배경 이미지들을 슬라이드로 출력하면서 기타 옵션들을 적용하는 방법입니다. 예전 부터 문하우스 레이아웃 스킨에 꾸준히 사용해 오던 방법인데 이번에 정리해 봅니다. 1. /layouts/Skin 이름/conf/info.xml 에 아래 코드 추가 <group> <title xml:lang="ko">배경 슬라이더</title> <var name="bgimg_slide" type="select"> <title xml:lang="ko">배경이미지 슬라이더</title> <description xml:lang="ko">배경이미지 슬라이드 선택.</description> <options value=""> <title xml:lang="ko">출력안함</title> </options> <options value="Y"> <title xml:lang="ko">출력</title> </options> </var> <var name="slide_interval" type="text"> <title xml:lang="ko">슬라이딩 시간 간격</title> <description xml:lang="ko">슬라이드 이미지간의 시간 간격(기본 5000(5초))</description> </var> <var name="slide_transition" type="select"> <title xml:lang="ko">슬라이딩 전개방식</title> <description xml:lang="ko">슬라이딩의 전개방식을 선택해 주세요.(기본 Fade)</description> <options value="1"> <title xml:lang="ko">Fade</title> </options> <options value="2"> <title xml:lang="ko">Slide Top</title> </options> <options value="3"> <title xml:lang="ko">Slide Right</title> </options> <options value="4"> <title xml:lang="ko">Slide Bottom</title> </options> <options value="5"> <title xml:lang="ko">Slide Left</title> </options> <options value="6"> <title xml:lang="ko">Carousel Right</title> </options> <options value="7"> <title xml:lang="ko">Carousel Left</title> </options> <options value="0"> <title xml:lang="ko">None</title> </options> </var> <var name="transition_speed" type="text"> <title xml:lang="ko">전개방식 시간</title> <description xml:lang="ko">슬라이딩 전개방식의 시간(기본 2000(2초))</description> </var> <var name="slide_content" type="select"> <title xml:lang="ko">슬라이더 출력형태</title> <description xml:lang="ko">슬라이더의 출력형태를 선택</description> <options value="1"> <title xml:lang="ko">기본</title> </options> <options value="2"> <title xml:lang="ko">썸네일</title> </options> </var> <var name="s_img_loc" type="select"> <title xml:lang="ko">슬라이더 화면출력</title> <description xml:lang="ko">슬라이더 화면 출력을 선택</description> <options value="fixed"> <title xml:lang="ko">화면고정</title> </options> <options value="absolute"> <title xml:lang="ko">이미지고정</title> </options> </var> <var name="s_img_top" type="text"> <title xml:lang="ko">이미지의 상단 높이</title> <description xml:lang="ko">이미지의 상단 높이를 지정, 뭔밍?은 기본^.^(기본 0)</description> </var> <var name="s_img_left" type="text"> <title xml:lang="ko">이미지의 좌측 간격</title> <description xml:lang="ko">이미지의 좌측 간격을 지정, 뭔밍?은 기본^.^(기본 0)</description> </var> <var name="s_img_b" type="text"> <title xml:lang="ko">슬라이딩 배경 칼라</title> <description xml:lang="ko">슬라이딩 배경영역의 색상을 지정(기본 #fff)</description> </var> <var name="slider1_image" type="image"> <title xml:lang="ko">이미지1</title> </var> <var name="slider1_description_en" type="text"> <title xml:lang="ko">이미지1 영문</title> </var> <var name="slider1_description_kr" type="text"> <title xml:lang="ko">이미지1 한글</title> </var> <var name="slider2_image" type="image"> <title xml:lang="ko">이미지2</title> </var> <var name="slider2_description_en" type="text"> <title xml:lang="ko">이미지2 영문</title> </var> <var name="slider2_description_kr" type="text"> <title xml:lang="ko">이미지2 한글</title> </var> <var name="slider3_image" type="image"> <title xml:lang="ko">이미지3</title> </var> <var name="slider3_description_en" type="text"> <title xml:lang="ko">이미지3 영문</title> </var> <var name="slider3_description_kr" type="text"> <title xml:lang="ko">이미지3 한글</title> </var> <var name="slider4_image" type="image"> <title xml:lang="ko">이미지4</title> </var> <var name="slider4_description_en" type="text"> <title xml:lang="ko">이미지4 영문</title> </var> <var name="slider4_description_kr" type="text"> <title xml:lang="ko">이미지4 한글</title> </var> </group> 2. /layouts/Skin 이름/layout.html 에 코드 추가 {@ $li = $layout_info; } <!-- 배경슬라이드 --> <block cond="$li->bgimg_slide == 'Y'"><include target="bgslide.html" /></block> 3. 첨부파일을 내려 받아 압축을 풀어서 해당 스킨에 업로드 4. 레이아웃 설정에서 "배경 슬라이더" 옵션들 설정 [ Tip! ] 1. 이미지 숫자 추가하는 법 info.xml 과 bgslide.html 파일안에 slider_image 부분들을 추가 2. 이미지 영문 / 한글 (이미지 caption) 부분 수정 /css/supersized.shutter.css 의 18줄 ~ 20줄 부분이 이미지의 캡션 부분 css입니다. 칼라, 크기, 투명도, 에니메이션을 수정하면 됩니다. bgslide.html 의 79줄(웹) 83줄(모바일)은 캡션영역의 위치입니다. 3. 참고로 supersized 소스 코드는 라이선스가 MIT License / GPL License 이므로 마음껏 수정하셔도 됩니다. GitHub - buildinternet/supersized: Full screen background slideshow plugin for jQuery Full screen background slideshow plugin for jQuery - GitHub - buildinternet/supersized: Full screen background slideshow plugin for jQuery from GITHUB
기본적인 이미지 팝업 Colorbox 사용법을 이전 게시글에 작성했는데 이번에는 레이아웃이나 게시판에 일반적인 팝업창을 띄우는 방법을 남깁니다. 먼저 설치방법은 이전 게시글 에 있는 방법으로 따라하세요. 1. 일반적인 레이아웃에 적용방법 •/layouts/해당레이아웃/conf/info.xml 에 아래 코드 추가 <group> <title xml:lang="ko">PopUp 설정</title> <var name="popup_use" type="select"> <title xml:lang="ko">PopUp 출력</title> <description xml:lang="ko">PopUp창 출력</description> <options value=""> <title xml:lang="ko">출력하지 않음</title> </options> <options value="Y"> <title xml:lang="ko">출력</title> </options> </var> <var name="cb_width" type="text"> <title xml:lang="ko">박스 넓이</title> <description xml:lang="ko">%, vw, px 사용가능(빈칸시 Auto)</description> </var> <var name="cb_height" type="text"> <title xml:lang="ko">박스 높이</title> <description xml:lang="ko">%, px 사용가능(빈칸시 Auto)</description> </var> <var name="popup_start" type="select"> <title xml:lang="ko">PopUp 자동출력</title> <description xml:lang="ko">PopUp 첫화면 자동출력</description> <options value=""> <title xml:lang="ko">출력하지 않음</title> </options> <options value="Y"> <title xml:lang="ko">출력</title> </options> </var> <var name="popup_time_close" type="select"> <title xml:lang="ko">PopUp 시간 닫기</title> <description xml:lang="ko">PopUp을 지정 시간이 지나면 자동닫기</description> <options value=""> <title xml:lang="ko">닫지 않음</title> </options> <options value="Y"> <title xml:lang="ko">닫기</title> </options> </var> <var name="popup_time" type="text"> <title xml:lang="ko">닫기 시간</title> <description xml:lang="ko">PopUp창 자동 닫는 시간 (기본 3000 - 3초 )</description> </var> <var name="cop" type="text"> <title xml:lang="ko">배경 투명도</title> <description xml:lang="ko">ColorBox 출력시 배경과의 투명도(기본 0.9 / 불투명 1)</description> </var> <var name="cb_img1" type="image"> <title xml:lang="ko">이미지1</title> </var> <var name="cb_img2" type="image"> <title xml:lang="ko">이미지2</title> </var> </group> •layout.html 적당한 곳에 아래의 코드를 추가 <div cond="!$li->popup_use == ''"> <load target="css/colorbox.css" /> <load target="js/jquery.colorbox.js"/> <block cond="!$li->popup_time">{@ $li->popup_time = '3000'}</block> <block cond="!$li->cop">{@ $li->cop = '0.9'}</block> <script> $(document).ready(function(){ $(".cb") .colorbox({rel:'cb', inline: true, opacity: {$li->cop}, slideshow: true, slideshowAuto: true, closeButton: false, current: false, slideshowStart: false, slideshowStop: false, slideshowSpeed: 3000, width: "{$li->cb_width}", height: "{$li->cb_height}", }) <!--@if($li->popup_time_close=='Y')--> .click(function(){ setTimeout(function(){ $.colorbox.close(); },{$li->popup_time}); }) <!--@end--> <!--@if($li->popup_start=='Y')--> .trigger('click'); <!--@end--> }); </script> <style> .cb1 { display:none; } .cb2 { padding:10px; } </style> <a class="cb" href="#dialog01">이곳에 메뉴를 남겨도 됩니다.</a> <div class="cb1"> <div id="dialog01"> <p class="cb2"><img src="{$li->cb_img1}"></p> </div> </div> <a class="cb" href="#dialog02">이곳에 메뉴를 남겨도 됩니다.</a> <div class="cb1"> <div id="dialog02"> <p class="cb2"><img src="{$li->cb_img2}"></p> </div> </div> </div> 1. 빨간색 부분이 팝업창이 자동으로 닫히는 시간을 나타냅니다. 2. 초록색 부분이 팝업창이 자동으로 열리는 기능을 나타냅니다. 둘다 적용하면 자동으로 팝업이 열리고 닫기 시간이 되면 팝업이 사라집니다. 3. a class="cb" 전체영역은 필요에 따라 추가하거나 제거하면 됩니다. 4. 이미지 출력 부분 <img src="{$li->cb_img}">은 일반 텍스트나 Html로 작성하셔도 됩니다. 5. 회색 부분은 메뉴를 적어 넣어면 레이아웃에 해당 메뉴가 출력됩니다. 빈칸으로 두면 당연히 보이지 않겠죠. 5. 옵션 부분들을 자신에게 맞게 수정하시면 됩니다. 저 같은 경우는 모든 버턴들을 숨기고 바탕색을 투명하게 하고 이미지들을 투명 gif png파일을 선택했습니다. 6. colorbox.css 수정. /* 배경을 투명하게 설정*/ #cboxContent{margin-top:20px;background:transparent;} #cboxLoadedContent{border:0px solid #000; background:transparent; } /* 이전, 다음 버턴 제거*/ #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(./images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;} #cboxPrevious:hover{background-position:bottom left;} #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(./images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;} #cboxNext:hover{background-position:bottom right;}
이미지를 팝업으로 화면에 띄우는 대표적인 플러그인이 LightBox 입니다. 데모 : https://moonhouse.co.kr/lb 원소스 : https://lokeshdhakar.com/projects/lightbox2 지금껏 주로 사용을 해 오다. Mh Gallery 프로그램을 만들다 좀더 나은 것을 찾다가 발견한 플러그인이 Colorbox 입니다. 데모 : https://moonhouse.co.kr/cb 원소스 : http://www.jacklmoore.com/colorbox 두 플러그인을 간략하게 비교를 하자면 LightBox는 기본에 충실하고, Colorbox는 세부적인 옵션들이 굉장히 많습니다. 1. Colorbox의 세부옵션 소개 •slideshowAuto를 지원 - Auto에 따르는 부수적인 기능들 -- 속도, 수동 / 자동, 버턴 •transition 지원 - fade, elastic, none 지원 •첫화면 출력지원 - LightBox의 경우는 썸네일을 클릭시 화면이 출력되는 반면 Colorbox의 경우는 첫화면을 자동으로 띄울 수 있습니다. •팝업의 위치를 조절 가능 - top, bottom, left, right, 기본은 가로 세로 중앙위치 - LightBox의 경우는 가로는 중앙이나 세로는 상단에 위치합니다. •그 외에도 많은 옵션들을 가지고 있습니다. 2. Colorbox 설치방법 (Rhymix를 기준으로) •원본소스 를 다운 받습니다. •소스중 colorbox.css & jquery.colorbox.js 그리고 해당 이미지들을 지정 폴더에 업로드 합니다. •적용할 html 위에 코드 적용 <load target="css/colorbox.css" /> <load target="js/jquery.colorbox.js"/> •script를 작성합니다. <script> $(document).ready(function(){ $(".cb").colorbox({rel:'cb', transition: "fade", speed: 500, fadeOut: 1000, opacity: 0.9, <!--@if(!Mobile::isMobileCheckByAgent())--> open: true, height: "95%", width: "73vw", <!--@else--> open: false, height: "95%", maxWidth: "100%", <!--@end--> slideshow: true, slideshowAuto: true, slideshowSpeed: 5000, }); }); </script> •적용할 html(위젯) <a class="cb" href="원본이미지" title="제목"> <img src="썸네일이미지" alt="" /> </a> class="cb" 를 위의 script에 $(".cb").colorbox({rel:'cb', 에 class적용합니다. •원본소스는 vh, vw가 적용 이 되지를 않는데 적용되게끔 수정 jquery.colorbox.js 245줄 [수정전] function setSize(size, dimension) { return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : winheight()) / 100) : 1) * parseInt(size, 10)); } [수정후] function setSize(size, dimension) { return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : winheight()) / 100) : 1) * parseInt(size, 10)) * Math.round((/vw/.test(size) ? (document.documentElement.clientWidth / 100) : 1)) * Math.round((/vh/.test(size) ? (document.documentElement.clienHeight / 100) : 1)); } •jquery.colorbox.js 를 열어보면 옵션들이 보입니다. // behavior and appearance transition: "elastic", speed: 500, fadeOut: 500, width: false, initialWidth: "1000", innerWidth: false, maxWidth: false, height: false, initialHeight: "800", innerHeight: false, maxHeight: false, scalePhotos: true, scrolling: true, opacity: 0.9, preloading: true, className: false, overlayClose: true, escKey: true, arrowKey: true, top: false, bottom: false, left: false, right: false, fixed: false, data: undefined, closeButton: true, fastIframe: true, open: true, reposition: true, loop: true, slideshow: false, slideshowAuto: true, slideshowSpeed: 5000, slideshowStart: "start slideshow", slideshowStop: "stop slideshow", photoRegex: /\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr|svg)((#|\?).*)?$/i, 위의 옵션들중에 js에서 수정시 작동을 안하는 경우가 있습니다. html의 script에 적용을 해야 합니다. height, width와 관련된 옵션들에는 " "사이에 px, %, 500, vh, vw를 사용할 수 있습니다. •colorbox.css 설명 #cboxOverlay { background-color:#333; opacity:0.9; filter:alpha(opacity = 90); } #cboxContent { margin-top:20px; background:#fff; } #cboxLoadedContent { border:5px solid #fff; background:#000; } - 배경색상, 컨탠트색상, 보드라인 색상을 결정하는 코드 #cboxTitle { ... } /* 게시글제목 */ #cboxCurrent { ... } /* 이미지 넘버 */ #cboxSlideshow { ... } /* 슬라이드 시작/멈춤 텍스트*/ - 참고로 아래 코드에서 팝업의 상하좌우 여백을 조절 할 수 있습니다. #colorbox { outline:0; margin-left:-11em; }
Prev 5 6 7 Next