MH Justice Latout Manual
X 24 시간 닫기 X

MH Multi Widget

  1. Shopping
  2. 주문상태
  3. 주문QA
  4. Demo
  5. 메뉴얼
  6. 제작의뢰
  7. XE작품
  8. 가입인사

My Xe - 스케치북 웹진스킨 - LightBox
Xpressengine of Moonhouse　>

레이아웃에 이미지 슬라이딩 기능 추가하기 file
ForHanbi 레이아웃 ver 0.1.1 안에 들어있는 1차메뉴와 본문내용 중간에 출력되는 이미지 슬라이딩출력이 마음에 들어서 그 부분만 적용하는 방법을 팁으로 남갑니다. 1. 먼저 사용하시는 레이아웃의 layout.html에 상단부분과 본문부분의 중간에 아래 코드를 추가합니다. <!--@if($layout_info->view_image_1)--> <!--%import("./js/paging.js")--> <div class="main_banner png_bg"> <div class="main_view"> <div class="viewer"> <div class="image_reel"> <ul> <li><a href="<!--@if($layout_info->view_url_1)-->{$layout_info->view_url_1}<!--@else-->#<!--@end-->"><img src="{$layout_info->view_image_1}" width="750" height="290" alt="{$layout_info->view_title_1}" title="{$layout_info->view_title_1}" /></a></li> <!--@if($layout_info->view_image_2)--> <li><a href="<!--@if($layout_info->view_url_2)-->{$layout_info->view_url_2}<!--@else-->#<!--@end-->"><img src="{$layout_info->view_image_2}" width="750" height="290" alt="{$layout_info->view_title_2}" title="{$layout_info->view_title_2}" /></a></li> <!--@end--> <!--@if($layout_info->view_image_3)--> <li><a href="<!--@if($layout_info->view_url_3)-->{$layout_info->view_url_3}<!--@else-->#<!--@end-->"><img src="{$layout_info->view_image_3}" width="750" height="290" alt="{$layout_info->view_title_3}" title="{$layout_info->view_title_3}" /></a></li> <!--@end--> <!--@if($layout_info->view_image_4)--> <li><a href="<!--@if($layout_info->view_url_4)-->{$layout_info->view_url_4}<!--@else-->#<!--@end-->"><img src="{$layout_info->view_image_4}" width="750" height="290" alt="{$layout_info->view_title_4}" title="{$layout_info->view_title_4}" /></a></li> <!--@end--> </ul> </div> </div> <div class="paging"> <div class="png_bg"> <!--@if($layout_info->view_title_1)--> <a href="#" rel="1"><span>{$layout_info->view_title_1}</span></a> <!--@end--> <!--@if($layout_info->view_title_2)--> <a href="#" rel="2"><span>{$layout_info->view_title_2}</span></a> <!--@end--> <!--@if($layout_info->view_title_3)--> <a href="#" rel="3"><span>{$layout_info->view_title_3}</span></a> <!--@end--> <!--@if($layout_info->view_title_4)--> <a href="#" rel="4"><span>{$layout_info->view_title_4}</span></a> <!--@end--> </div> </div> </div> </div> <!--@end--> 2. info.xml 파일안에 아래의 코드를 추가 <var name="view_image_1" type="image"> <title xml:lang="ko">본문 상단 이미지 슬라이드의 이미지1 </title> <description xml:lang="ko"><strong>레이아웃에서 슬라이드가 필요없는 분은 이 부분을 입력하지 않으시면 나타나지 않습니다.</strong><br /> 이미지를 입력해 주세요. 높이:300 X 넓이:950</description> </var> <var name="view_title_1" type="text"> <title xml:lang="ko">이미지1 상단 제목</title> <description xml:lang="ko">이미지1 제목 글자를 입력해주세요.</description> </var> <var name="view_url_1" type="text"> <title xml:lang="ko">이미지1이 지정 링크</title> <description xml:lang="ko">링크가 없다면 입력하지 않으셔도 됩니다.</description> </var> <var name="view_image_2" type="image"> <title xml:lang="ko">본문 상단 이미지 슬라이드의 이미지2</title> <description xml:lang="ko">이미지를 입력해 주세요. 높이:300 X 넓이:950</description> </var> <var name="view_title_2" type="text"> <title xml:lang="ko">이미지2 상단 제목</title> <description xml:lang="ko">이미지2 제목 글자를 입력해주세요.</description> </var> <var name="view_url_2" type="text"> <title xml:lang="ko">이미지2이 지정 링크</title> <description xml:lang="ko">링크가 없다면 입력하지 않으셔도 됩니다.</description> </var> <var name="view_image_3" type="image"> <title xml:lang="ko">본문 상단 이미지 슬라이드의 이미지3</title> <description xml:lang="ko">이미지를 입력해 주세요. 높이:300 X 넓이:950</description> </var> <var name="view_title_3" type="text"> <title xml:lang="ko">이미지3 상단 제목</title> <description xml:lang="ko">이미지3 제목 글자를 입력해주세요.</description> </var> <var name="view_url_3" type="text"> <title xml:lang="ko">이미지3이 지정 링크</title> <description xml:lang="ko">링크가 없다면 입력하지 않으셔도 됩니다.</description> </var> <var name="view_image_4" type="image"> <title xml:lang="ko">본문 상단 이미지 슬라이드의 이미지4</title> <description xml:lang="ko">이미지를 입력해 주세요. 높이:300 X 넓이:950</description> </var> <var name="view_title_4" type="text"> <title xml:lang="ko">이미지4 상단 제목</title> <description xml:lang="ko">이미지4 제목 글자를 입력해주세요.</description> </var> <var name="view_url_4" type="text"> <title xml:lang="ko">이미지4이 지정 링크</title> <description xml:lang="ko">링크가 없다면 입력하지 않으셔도 됩니다.</description> </var> 3. 해당 css 파일안에 아래의 코드를 추가 /*--Main Slide--*/ .main_banner{height:300px; background:url(../img/BgSlide.png) no-repeat left top; padding:5px; *zoom:1; margin-top:30px;} .main_view {position:relative; height:300px; width:950px;} .main_view:after{content:""; display:block; clear:both;} .main_view li{float:left; list-style:none;} .main_view .paging li{float:none;} .viewer {height:300px; width:950px; overflow:hidden; position:relative;} .image_reel {position:absolute; top:0; left:0;} .image_reel img {float:left;height:300px; width:950px;} .paging {position:absolute; left:0; bottom:0; z-index:100; display:inline-block; width:950px; height:35px; *zoom:1;} .paging div{ background:url(../img/BgPaging.png) no-repeat left top; height:35px;} .paging a {text-decoration:none; display:inline-block; padding: 0 20px; height:35px; line-height:35px;} .paging a span{display:inline-block; cursor:pointer; color:#333;} .paging a.active{background:url(../img/BgPagingActive.gif) no-repeat 13px 14px; *background-position:13px 13px} 4. 레이아웃의 js폴더에 paging.js 파일 업로드 5. img폴더에 img.zip 파일 업로드 6. 레이아웃설정에서 950*300크기의 이미지를 선택하시면 됩니다. 레이아웃의 크기가 다른 경우는 아래의 부분에서 크기를 변경하고 이미지의 크기도 맞추어 주면 됩니다. .main_view {position:relative; height:300px; width:950px;}
Board 나의 RM Category Tip 2010.10.03 팔공산 R 240
Quick Menu 만들어 보기 file
http://www.xpressengine.com/19106285 이 곳에 올라와 있는 레이아웃소스중에 Quick Menu부분이 있어서 따로 분리해서 Tip으로 남겨둡니다. jquery.js 파일을 다운받아서 적용을 원하는 레이아웃의 js폴더에 업로드합니다. 이미지를 다운 받아서 레이아웃의 images폴더에 업로드합니다. 1. info.xml 파일안에 아래의 코드를 붇여서 수정합니다. [설정부분] <var name="quick_menu_use" type="select"> <title xml:lang="ko">퀵메뉴표시</title> <description xml:lang="ko">퀵메뉴 표시여부를 선택해주세요.</description> <options value="Y"> <title xml:lang="ko">퀵메뉴 사용</title> </options> <options value="N"> <title xml:lang="ko">퀵메뉴 사용하지 않음</title> </options> </var> [메뉴부분] <menu name="quick_menu" maxdepth="1"> <title xml:lang="ko">퀵 메뉴 </title> </menu> 2. layout.html 파일안에 아래의 코드를 적당한 위치에 붙여 수정합니다. <!-- Quick 메뉴 --> <!--@if($layout_info->quick_menu_use=="Y")--> <!--%import("js/jquery.js")--> <script type="text/javascript"> $(document).ready(function () { $("ul.favoritList li:even").addClass("alt"); $('img.favoritTitle').click(function () { $('ul.favoritList').slideToggle('medium'); }); $('ul.favoritList li a').mouseover(function () { $(this).animate({ fontSize: "10px", paddingLeft: "10px" }, 50 ); }); $('ul.favoritList li a').mouseout(function () { $(this).animate({ fontSize: "10px", paddingLeft: "10px" }, 50 ); }); }); </script> <div id="favorit"> <img src="images/favorit.gif" alt="QuickMenu" border="0" width="180px" height="33px" class="favoritTitle" /> <ul class="favoritList"> {@$idx = 1 } <!--@foreach($quick_menu->list as $key => $val)--> <!--@if($val['text'])--> <!--@if($val['selected'])--> {@ $menu_1st = $val } <!--@end--> <li ><a <!--@if($val['selected'])-->class="current"<!--@end--> href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a></li> <!--@end--> {@$idx++} <!--@end--> </ul> </div> <!--@end--> 3. 해당 css파일안에 아래의 코드를 붙여 수정합니다. #favorit{position:absolute; top:60px; left:10px; width:180px; height:35px; z-index:8; } #favorit .favoritTitle{ } #favorit .favoritList {width:178px; float:right; z-index:9; *zoom:1; border-right:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;border-left:1px solid #e2e2e2; display:none; } #favorit .favoritList li{background:#f2f2f2; border-bottom:1px solid #fff; list-style:none; } #favorit .favoritList li a{color:#afafaf; text-decoration:none; padding:5px; padding-left:30px; display:block; font-size:10px;} #favorit .favoritList li.alt{background:#fff;} #favorit .favoritList li a:hover{padding:5px; color:#fff; background:#007aef;} top:60px; left:10px; 이부분을 적당히 수정해서 위치를 잡으시면 됩니다. display:none; 이 부분을 제거하면 처음부터 펼쳐보이고 그대로 두면 접은 상태로 출력됩니다. 마우스로 Quick Menu부분을 클릭하면 아래로 메뉴가 출력됩니다.
Board 나의 RM Category Tip 2010.09.02 팔공산 R 240
본문출력에서 선택한 확장변수부분 Hidden시키기 file
게시판에서 확장변수를 설정해서 사용을 많이 합니다. 그런데 해당 확장변수의 내용이 관리자에게는 출력되고 다른사람에게는 안 보이게 할 필요성이 있을 경우가 있습니다. (없어면 말고^.^) [글작성한 회원이 본 화면] [관리자가 본 화면] 위의 이미지들처럼 관리자에게만 특별하게 보이는 확장변수를 만들어서 게시판관리를 하게 합니다. 1. ./modules/board/skins/해당게시판/skin.xml에 추가합니다. <group> <title xml:lang="ko">선택한 확장변수 본문출력 Hidden</title> <var name="extra_mid" type="text"> <title xml:lang="ko">Hidden 확장변수 mid</title> <description xml:lang="ko">본문 확장변수 출력에서 Hidden을 원하는 mid(게시판명)를 적어주세요.</description> </var> <var name="extra_name1" type="text"> <title xml:lang="ko"> ┖ Hidden 확장변수 입력항목이름1</title> <description xml:lang="ko">Hidden을 원하는 확장변수의 입력항목1의 이름을 적어주세요.</description> </var> <var name="extra_name2" type="text"> <title xml:lang="ko"> ┖ Hidden 확장변수 입력항목이름2</title> <description xml:lang="ko">Hidden을 원하는 확장변수의 입력항목2의 이름을 적어주세요. * 관리자는 항상 보입니다. </description> </var> </group> 2. ./modules/board/skins/해당게시판/view_document.html를 편집합니다. [수정전] <!--@foreach($oDocument->getExtraVars() as $key => $val)--> <tr> <th>{$val->name} :</th> <td>{$val->getValueHTML()}</td> </tr> <!--@end--> [수정후] <!--@foreach($oDocument->getExtraVars() as $key => $val)--> <!--@if($val->value && ($mid !==$module_info->extra_mid || ($val->name!=$module_info->extra_name1 && $val->name!=$module_info->extra_name2 || $grant->manager)))--> <tr> <th>{$val->name}</th> <td>{$val->getValueHTML()}</td> </tr> <!--@else--> <!--@end--> <!--@end--> 설명을 하자면 지정한 mid(게시판면)에 선택한 확장변수의 입력항목이름 부분을 Hidden시키는 것입니다. [게시판 스킨관리에서 설정화면]
Board 나의 RM Category Tip 2010.03.17 팔공산 R 269
Prev 32 33 34 Next

My Xe - FirstThumb 스킨
Xe of Moonhouse　>

profile
팔공산
Jul 20 2018
MH 이미지 Hover 위젯의 Skin추가 - Zoom스킨 file
썸네일 마우스 Over시 제목, 내용등 출력 위젯 V2.1 위의 위젯에 skin하나를 추가합니다. 이름하여 Zoom스킨 입니다. 썸네일안에서 마우스를 이동시 확대된 전체 이미지가 이리저리 보입니다. 적용된 링크에 접속해 보시면 확실히 알 수 있을 것입니다. https://moonhouse.co.kr/special [기본 상태] [마우스 오버시]
profile
팔공산
Jul 19 2018
템플릿 컴포넌트 Zoom기능 MH 템플릿 file
MH 템플릿을 사용하고자 하면 윤삼님이 만든 탬플릿 컴포넌트가 먼저 설치 되어 있어야 합니다. 탬플릿 컴포넌트 아래목록에 있는 "MH 템플릿5종"과는 달리 약간의 설명이 필요하여 따로 글을 작성합니다. - MH-Zoom 템플릿 mh-zoom.zip 상품설명 : 이미지에 마우스를 대면 이미지가 확대되면서 상품의 자세한 부분 까지 확인할수 있습니다. 상품설명 : 이미지에 마우스를 대면 이미지가 확대되면서 상품의 자세한 부분 까지 확인할수 있습니다. mh-zoom을 설치해서 게시판에 삽입하면 위와 같이 출력됩니다. 그런 다음 자기가 출력하고자 하는 이미지를 화면에 첨부한후 소스보기를 눌러서 해당 이미지의 소스(아래 빨간색 부분)를 zoom소스에 대입하면 됩니다. 화면에 출력되는 이미지의 크기는 width="250"를 수정하시면 되고 원본이미지의 크기는 넓이 250px보다 큰 이미지라야 확대가 되겠죠. <div class="zoom-section"> <div class="zoom-small-image"><a class="cloud-zoom" href="/files/attach/images/177/820/446/04ee43ef336b496064fa9d275b42cbe1.png" id="zoom1" rel="adjustX:10, adjustY:-4"><img alt="" src="/files/attach/images/177/820/446/04ee43ef336b496064fa9d275b42cbe1.png" title="Optional title display" width="250" /></a></div> </div>
Prev 32 33 34 Next

Xe Data - 카멜레온스킨
Xe Datas of Moonhouse　>

2007.08.30 현재 로그인한 사용자 출력 위젯 v0.1 3075
현재 로그인한 사용자 출력 위젯 v0.1 조회수: 664, 추천수: 2, 2007.08.26 22:41:16 게시글 주소 : http://www.zeroboard.com/12976666 엮인글 주소 : http://www.zeroboard.com/12976666/trackback VHAIN 음... zb5beta에는 있었는데, xe에는 없어서 만들었습니다. 우선, 이 위젯이 동작하기 위해서는 애드온자료실에 있는 로그인 체크 애드온이 꼭 활성화 되어있어야 하구요.. 스킨의 경우, 특정 그룹 멤버 출력의 스킨을 그대로 가져왔습니다... 음..우선 이 위젯을 추가하시면 아래와 같은 모습으로 추가되구요.. 현재로부터 x분전까지 갱신한 사람들의 목록을 출력합니다. (x의 경우 위젯 설정에서 설정이 가능합니다.) 아래는 위젯 설정창의 모습입니다. 다운로드 (.tar.gz) 다운로드 (.zip) 기타 질문이나 건의사항 등은 리플을 이용해 주시기 바랍니다 ^^ login_member.zip (16.7KB)(124) login_member.tar.gz (7.0KB)(21)
2007.08.27 로그인 체크 애드온 v0.1 & 사용자 출력 위젯 v0.1 3769
로그인 체크 애드온 v0.1 조회수: 121, 2007.08.26 22:35:06 게시글 주소 : http://www.zeroboard.com/12975225 엮인글 주소 : http://www.zeroboard.com/12975225/trackback VHAIN 현재 로그인 한 사용자 목록을 출력 하려고 할때 필요해서 작성합니다. zb5beta와는 달리 session 테이블이 없더군요.. last_login 으로 하자니, 이는 페이지 이동시에는 갱신되지 않고, 처음 로그인시에만 갱신되더군요.. 그래서, 페이지를 이동할때 마다 계속하여 로그인정보를 기록해주는 애드온을 만들었습니다. 우선, 애드온 관리 페이지에서 아래와 같이 "사용"으로 변경하게 되시면, 우선, 애드온은 테이블을 하나 만들게 됩니다. login_check 라는 이름으로요. 이 테이블은 두개의 column을 가지고 있습니다. 하나는 member_srl, 그리고 다른 하나는 login_time 입니다. member_srl에는 해당하는 Member의 Srl이, login_time에는 해당 Member가 최근으로 페이지를 갱신한 때를 유닉스 타임 스템프 형식으로 저장해 놓도록 하였습니다. 일단 저는 현재 로그인한 사용자목록만 만들었으나, 이를 무한하게 활용할 수 있지 않을까 라고 생각됩니다. 제로님의 v0.1.1 배포 이후로 애드온에서의 executeQuery가 가능해져서 만들어봤습니다 ^^ 다운로드 (.zip) 현재 로그인한 사용자 출력 위젯 v0.1 조회수: 176, 추천수: 1, 2007.08.26 22:41:16 게시글 주소 : http://www.zeroboard.com/12976666 엮인글 주소 : http://www.zeroboard.com/12976666/trackback VHAIN 음... zb5beta에는 있었는데, xe에는 없어서 만들었습니다. 우선, 이 위젯이 동작하기 위해서는 애드온자료실에 있는 로그인 체크 애드온이 꼭 활성화 되어있어야 하구요.. 스킨의 경우, 특정 그룹 멤버 출력의 스킨을 그대로 가져왔습니다... 음..우선 이 위젯을 추가하시면 아래와 같은 모습으로 추가되구요.. 현재로부터 x분전까지 갱신한 사람들의 목록을 출력합니다. (x의 경우 위젯 설정에서 설정이 가능합니다.) 아래는 위젯 설정창의 모습입니다. 다운로드 (.zip)
2007.08.27 whiteeye_binamu_newest_02 최근 문서 출력 위젯 공개 2847
whiteeye_binamu_newest_02 최근 문서 출력 위젯 공개조회수: 434, 추천수: 2, 2007.08.25 14:45:40 게시글 주소 : http://www.zeroboard.com/12784443 엮인글 주소 : http://www.zeroboard.com/12784443/trackback 비나무 먼저 원 그래픽 이미지 저작권자인 whiteeye님(http://whitefree.com/)께서 배포를 허락해 주신 점 감사드립니다. 배포문 단상 열기 배포문 단상 닫기 제가 일부 수정하고 컨버팅한 이 위젯 사실 우여곡절이 많은 녀석들입니다. 클베에 들어가면서 CSS를 공부하기 시작했고, 제로보드XE에 적응하기 위해서 익힌 CSS를 하나 하나 적용해 나가는 과정에 시험삼아 잠깐 손을 본 적이 있었습니다. 그 때까지만 해도 일부 문제가 있긴 해도 파폭에서 비교적 제대로 보이는 것만 확인하고 난 후, 삭제를 해버렸었고요. (그 때는 어디까지나 공부 목적이이었습니다... 하하하) 그리고 오픈베타 후 당연히 제로보드XE용으로 많이 컨버팅이 될 거라 생각을 했는데 생각보다는 최근 문서 출력 위젯이 안 올라오더군요... 그러다 기다리기 힘들어서(제 개인 홈페이지와 제가 근무하는 학교 홈페이지를 이번에 XE용으로 전부 새롭게 디자인을 하려고 했거든요.. ^^) 제가 직접 개인적으로 사용할 목적으로 그 때의 기억을 되살려 이것저것 손을 다시 보고 그 당시 문제가 있었던 부분을 손을 보고 해서 파폭과 IE6에서 잘 보이는 것(http://www.zeroboard.com/zbxe_user_review/12576277)을 확인하고 바로 적용하려고 했었습니다. 그러다 IE7에서 최근 글이 안 보인다는 백성찬님의 제보로 혹시 IE의 박스모델 버그를 해결하기 위해 사용한 핵이 IE7과 충돌이 나는 것으로 생각을 했다가, 비엔유(BNU)님의 조언(http://www.zeroboard.com/home_freeboard/12665353)을 통해서 파폭과 IE6에 문제가 없던 부분이 IE7에서는 문제점을 나타낸다는 것을 알고 최종 수정하여 정상적으로 출력되는 것을 확인(http://www.zeroboard.com/home_freeboard/12740430)한 후 몇몇 분의 공개요청으로 whiteeye님의 허락을 받고 공개하는 겁니다. 이 위젯을 테스트해 주시고, 조언 주신 모든 분께도 감사드립니다!!!! 두번째 배포하는 위젯은 whiteeye_binamu_newest_02입니다. 원 이미지 저작권자분의 이름을 명시해야 겠기에 저렇게 이름을 정했습니다. (결례를 용서하십시오. 배포문을 보시면 아시겠지만 저도 워낙 고생을 한 지라 제 닉네임도.... ^^;;;;;;;) 출력되는 형태는 아래와 같습니다. 압축을 푸신 후 폴더통째로 widgets/newest_document/skins의 경로에 업로드하시면 됩니다. 먼저 다운로드 받으신 분들은 다시 받아서 덮어씌워주세요.. ㅠ.ㅠ;;; 스킨정보 파일에 사용해서는 안 되는 문자가 있나 보네요. 그 문자 하나 때문에 제대로 인식을 못한 듯 합니다. 스킨을 배포하려니 whiteeye님 정보를 넣어야 했는데, 그 수정과정에 넣은 문자 하나 때문에 안 보이는 것이었습니다.. ㅠ.ㅠ;;; 14 / 14 loading images... whiteeye_binamu_newest_02_14.png 직접 홈페이지에서 확인하시고 싶으신 분은 아래의 주소에서 확인 바랍니다.(다만, 이 위젯의 경우 14색이나 되기 때문에 홈페이지에서 모든 색을 다 볼 수는 없습니다... ^^;;;;;;;) http://edu.binamu.com/bbs/ 첨부 : whiteeye_binamu_newest_02.zip (188.7KB)(19)
2007.08.26 라이트박스 애드온 ver 0.5.7 (업데이트) 4358
라이트박스 애드온 ver 0.5.7 (업데이트) 조회수: 293, 추천수: 3, 2007.08.25 03:47:01 게시글 주소 : http://www.zeroboard.com/12735299 엮인글 주소 : http://www.zeroboard.com/12735299/trackback 베니 주의: 0.5 버전을 다운 받으셨던 분은 이전 버전을 서버에서 삭제하신 후 다시 업로드 해주시면 감사하겠습니다. 불편을 드려서 죄송합니다. ^^;; (이 애드온의 최신판 업데이트는 XE 공식사이트와 제 블로그의 라이트박스 애드온 포스트 에서 하도록 하겠습니다. ^^) 이 애드온은 현재 Zeroboard XE 0.1.1에서 테스트되었습니다. 현재 이 애드온의 버전은 0.5.7입니다. (하루만에 3번 릴리즈 -_-) 0.5.7: 예기치 않은 비정상 작동으로 페이지/게시판/블로그 편집시 문제가 발생하는 현상을 수정했습니다. 0.5.6: 0.5.5 배포본 안의 실수 약간을 수정. 문제가 생길만한 부분 수정 0.5.5: 0.5의 문제 수정 버전. 스크립트를 LightBox에서 그 Modification인 Lytebox로 교체 0.5.0: 첫 릴리즈 이 애드온은 제로보드 XE로 만든 웹사이트에 포함된 이미지를 자동으로 라이트박스 모듈과 연결시켜줍니다. 아울러 제로보드 XE에 기본적으로 포함된 이미지 자동축소 루틴을 라이트박스 모듈과 연결시키는 루틴으로 교체해줍니다. 라이트 박스란?? 라이트 박스는 그림을 팝업형식으로 띄우면서도 윈도우창을 별도로 열거나 하지 않으면서 그림을 예쁘게 출력해주는 가장 인기있는 자바 스크립트중 하나입니다. 최근에는 이 라이브러리 자체의 덩치도 꽤 커져서 그냥 만들어 쓰시는 분들도 계십니다만 전 세계적으로 많이 쓰는 스크립트중 하나이기 때문에 브라우저간 호환성이나 프로젝트 진행속도가 가장 나을것 같아서 이것을 선택하였습니다. 단, 0.5.7 버전은 오리지널 라이트박스의 경량판이면서도 동일한 효과를 가지는 Lytebox 3.2 스크립트를 사용하고 있습니다. Markus F. Hay씨의 Lytebox 3.2 사이트 Lokesh Dhakar씨의 Lightbox 2.0 사이트 이 애드온을 설치하시면 XE의 게시물이나 블로그의 사진들이 위처럼 나옵니다. 아울러 이 애드온은 바로 윗 사진처럼 레이아웃을 깨뜨리지 않기 위해 자동으로 축소된 이미지의 출력 방식 역시 제로보드 XE코드를 라이트박스 코드로 갈아치웁니다. (깔아보시면 이해하실 수 있을겁니다... 아마도) 뿐만 아니라 모듈 인스턴스(보통 위젯에서 타겟 모듈이라고 칭하는)간에 선택적으로 적용이 가능하므로 '사진 게시판'이나 기타 그림과 관련된 게시판에만 기능을 적용시킬 수 있습니다. 설치방법 1) 본 문서에 첨부된 파일을 다운로드 받습니다. (ZIP 포맷, TAR.GZ 포맷) 2) 압축을 해제합니다. 압축이 풀린 디렉토리 아래에 'digist_lightbox'라는 디렉토리가 생겨있음을 확인하실 수 있습니다. 3) 서브디렉토리까지 모두 포함하여 digist_lightbox 디렉토리 내용 전부를 제로보드 XE의 Addons 디렉토리에 업로드합니다. 예를 들어 zbxe라는 디렉토리에 제로보드가 설치되어 있다면 경로는 다음과 같습니다. (/zbxe/addons/digist_lightbox) 4) Admin 화면에 들어가서 애드온 메뉴를 누릅니다. 적합하게 설치되었다면 "DIGIST 라이트박스 활성화 애드온"이라는 애드온이 목록에 출력될 것입니다. 애드온을 활성화 시키기 위하여 "사용"상태로 만들어 주십시오. 주의: 만일 이전에 0.5 버전을 설치하셨던 분은 불편하시더라도 이전 버전을 완전히 삭제하신 후에 재설치 해주시기 바랍니다. 세부설정 이 애드온은 부가적인 사용자 설정을 지원하고 있습니다. 좀 더 원활한 사용을 위하여 본 애드온의 설정방법에 대해 숙지하시기 바랍니다. (정 모르시겠다면 설정을 하지 않고 그냥 쓰셔도 되긴 합니다.) XE관리자 메뉴의 애드온 설정화면에서 본 애드온의 "설정" 버튼을 클릭하시면 위와 같은 창이 뜹니다. - 대상 모듈은 실제로 모듈 그 자체가 아닌 모듈의 인스턴스를 가리키고 있습니다. 쉽게 말해서 게시판이나 블로그의 아이디를 써주시면 됩니다. (board 모듈로 만든 freeboard 게시판. mid값으로 설정되는 freeboard라는 이름이 바로 이 아이디입니다.) - 대상 모듈을 공란으로 비우면 제로보드 XE 영향하에 구동되는 모든 모듈의 인스턴스(페이지 포함)가 렌더링될때 이 애드온이구동됩니다. - 대상 모듈을 한정하고 싶다면 mid값을 차례대로 기록하되 이름끼리 쉼표(,)로 연결하시기 바랍니다.(예: freeboard,myblog) 이렇게 mid가 지정되면 해당 mid값을 가진 블로그나 게시판, 페이지만이 라이트박스를 이용하여 모든 이미지를 볼 수 있게 됩니다. - 대상 모듈로 지정되지 않은 게시판이나 블로그, 페이지에선 그림을 클릭해도 라이트박스가 뜨지 않습니다. 단, 이미지가 커서 자동으로 축소된 이미지는 라이트박스가 구동되어 원본 이미지를 보여줍니다. - 만일 작동방법 필드에 "resizedOnly"라고 쓰시면 대상 모듈에 상관없이 무조건 사이트의 이미지 중에 자동으로 축소한 이미지만을 라이트박스를 이용하여 보여주게 됩니다. ※ 제목을 출력시킬수도 있습니다. 그림을 본문에 삽입할 때 에디터에서 "설명입력"을 하시면 그것이 제목으로 나오게 됩니다. 참고 1) 이 애드온은 Lightbox의 경량판으로 Markus F. Hay씨가 작성한 Lytebox 3.2 버전 스크립트를 사용합니다. 2) 이 스크립트는 제로보드 XE 1.0.1과 테스트 되었습니다. 제로보드가 업그레이드되어 정상적인 작동을 하지 않을 수 있음에 유의해주십시오. 만일 이 애드온 때문에 사이트의 작동이 불안하다면 제로보드 XE 설치 디렉토리 아래의 /files/cache/activated_addons.cache.php 파일을 FTP로 삭제후 다시 웹사이트를 로딩하시면 됩니다. 3) 이 애드온의 라이센스는 GPL입니다. 참고로 Lytebox 3.2의 라이센스는 Creative Commons License 3.0입니다. 4) 문의나 건의가 있으시면 답글 달아주십시오. 메일이나 쪽지는 잘 보지 못합니다. 5) /lytebox/lytebos.js 파일의 상단부 몇가지 변수를 고치면 그림이 펼쳐지는 속도를 빠르게 하거나 애니메이션을 꺼버릴 수 있습니다. 31번째 라인: var resizeSpeed = 10; // 이것을 1~10사이의 값으로 셋팅합니다. 10이 가장 빠릅니다.(라이트박스는 7) 34번째 라인: this.autoResize = false; // 이것을 true로 하면 창에 비해 너무 거대한 그림을 자동으로 축소합니다. 이 애드온은 오리지널 Lightbox와 동일한 효과를 가지기 위해 기본값이 false로 변경되어 있습니다. 35번째 라인: this.doAnimations = true; // 이것을 false로 하면 그림이 커지는 효과가 사라집니다. 이 버전은 오페라, 파이어폭스, IE 6 및 IE 7에서 정상 작동됩니다. 적용예 (테스트 사이트가 아니니 부디 테스트글을 올리진 마시기 바랍니다. -_-) 버그리포트나 문의사항은 이쪽으로 몇가지 단점 및 문제점 1) 블로그 같은 경우에 적용시키면 프로필 사진 같은것에 함께 적용되는 아쉬움이 있습니다. 아직 거기까진 어떻게 처리를 못했습니다. (그냥 지금 정도로도 괜찮다고 생각합니다. 갠적으로 블로그는 이 애드온의 타겟 모듈에서 제외시켜 버렸습니다.) 사진을 블로그 자체에 올리시는 분들이라면 프로필 사진을 사용하지 마시거나 스킨에서 <IMG>태그가 아닌 CSS background로 처리해주시면 이런 문제가 생기지 않게 됩니다. 2) 현재로선 정해진 모듈 이외에 제로보드 XE원래의 처리 방법으로 구동하게 만드는 출력방식은 지원하지 않고 있습니다. (귀찮기도 하고 괜히 옵션만 마구잡이로 늘것 같아서...) 3) 이건 이 애드온의 문제가 아니라 제로보드 XE 에디터의 문제입니다만... 현재로선 사진을 삽입한 다음에 그림만 선택하고 문단에 대한 좌측/우측/가운데 정렬을 하게 되면 <IMG>태그 양쪽에 <DIV>가 생기면서 출력시 그림이 리사이즈 되지 못합니다. 큰 그림을 삽입하실때엔 문단 정렬을 따로 누르지 않으시는게 좋습니다. ※ 참고로 문단정렬을 하지 않고 그림 자체의 정렬 방법만 대입하면 오페라에선 정렬된 내용이 보이지 않더군요. :( 사용에 대한 어떤 예기치 않은 '위험'에 대해서도 책임지지 않습니다. (별일 있겠습니까만은.... ^^;;) 부디 도움이 되시기를 바랍니다. =) digist_light.0.5.7.zip (45.7KB)(8) digist_lightbox.0.5.7.tar.gz (37.9KB)(4)
2007.08.23 특수문자 입력기 0.3 3314
특수문자 입력기 0.3 조회수: 293, 추천수: 2, 2007.08.19 17:04:30 게시글 주소 : http://www.zeroboard.com/5134425 엮인글 주소 : http://www.zeroboard.com/5134425/trackback Simulz 각종 특수 문자를 분류별로 나누어 입력할 수 있습니다. 실험해보기 아래 링크에서 ※ 아이콘을 누르면 컴포넌트 창이 열립니다. http://k10206.oranc.co.kr/zbxe/?mid=guestbook 내려받기(2) (2007.08.22) 첨부파일을 /zbxe/modules/editor/components/special_character 폴더에 풀어주세요. ※ IE7, FF2에서 정상 작동 됨 업데이트 내용 · 완성형(KS) 문자표를 참고하여 특수문자를 재정렬 하였습니다. · KS 코드 A1A9를 - (빼기) 기호로 대체하였습니다. · Webdings 특수 문자를 추가하였습니다.(적용 하기전 컴포넌트는 special_character.zip 파일) 스마티 템플릿 때문에 } 글자는 제외 했는데 }를 어떻게 표시해야 하나요... 첨부 : special_character.zip (11.2KB)(6) special_character(2).zip (12.1KB)(22)
Prev 32 33 34

지도 바로가기 - 스케치북 리스트스킨

게시판 제목 종료일 위치 글쓴이 날짜 조회수 지도
Map 강원 정동진 모래시계공원 file
정동진 모래시계공원 팔공산 2024.03.20 6
Map 전라 쏠비치 진도 file
쏠비치 진도 팔공산 2024.03.20 7
Map 서울 서울 이순신장군 동상 file
서울 이순신장군 동상 팔공산 2024.03.20 6
Map 충청 충주 중앙탑 file
충주 중앙탑 팔공산 2024.03.20 8
Map 대구 [D - 228] 앞산공원 전망대 file
2024-12-31 앞산공원 전망대 팔공산 2023.03.29 32

 

Mh_Multi Widget 특징

 

It's a multi widget that we've been creating since the XE super window, so you can output widgets in almost any form.

 

mhmulti-001.jpg

 

 

[업그레이드 내용]

•문서내의 모든 이미지를 썸네일로 출력 기능 추가(선택가능)

Screenshot 2020-10-05 at 13.00.27.jpg

 

 1. Mh_multi Widget 에 총 5가지 Skin이 포함되어 있으며 Skin 마다 각각 고유의 형테로 구성    

    • 완벽히 위젯별로 작동합니다.

       - 동일 Skin 으로 한페이지에 다수의 위젯을 생성할시 위젯설정에 "위젯 NO"를 다르게 적용

       mhmulti016.jpg 

 

  2. 거의 완벽한 반응형(모바일형)으로 츨력이 가능

    • 함께 배포되는 mhstyle 위젯스타일 적용시

       - https://moonhouse.co.kr/xetip/469297

     mhmulti-008.jpg

 

  3. 간단한 설정 으로 색상변경 가능

    • 총 9가지 색상 선택

     mhmulti-009.jpg

    • 위젯 타이틀, 게시물 제목, Hover 테두리, more색상등 변경

     line.jpg

    • 설정 옵션들에서 자신만의 컬러로 변경 가능 

 

  4. 거의 완벽한 설정으로 각 위젯이 카멜레온처럼 변형이 가능 

    • 페이지기능으로 Total게시판 기능으로 활용

       - ajax 기능으로 화면 리플레쉬 없이 작동합니다.

    • 모든 항목을 추가, 제외 가능 - 썸네일, 테두리, 위젯타이틀, 제목, 내용, 글쓴이, 날짜등

    • 모든 항목의 색상 지정 가능 - 테두리, 제목, 내용, 바탕색, Hover색상등

 

  5. 썸네일 클릭시 3가지 형태로 츨력가능 

    • 기본적으로 게시판으로 연결

    • Right Box 형식으로 출력

     mhmulti-010.jpg

    • Zoom 형식으로 출력

     mhmulti-011.jpg 

 

  6. 다양한 설정

    • 대상 모듈의 대상 분류 srl값으로도 출력 가능

    • 내용글 세로 칸 수를 지정해서 공간의 여백을 최소화

    • 댓글 출력가능

     mhmulti-012.jpg

    • 그룹별, 포인트별, 레벨별로 출력 가능

     2021-09-23 123907.jpg

    • 모듈명, 분류명 출력 가능

     mhmulti-014.jpg

    • 확장값 출력 가능

     mhmulti-015.jpg

 

  7. MoonHouse 자료들은 폰트어썸과 Sexy Button 그리고 말풍선(툴팁) 애드온들이 자주 사용됩니다.

      Web Fonts Addon  /  말풍선(툴팁) 애드온을 설치해서 애드온들을 활성화 시켜야 아이콘과 버턴들이 정상적으로 출력됩니다.

      페이지기능을 지원하는 Widgets의 경우는 "위젯 케시를 0" 으로 둬야 정상 작동합니다.

 

Shoping Demo Manual Q&A

 

Mh_Multi Widget 메뉴얼

 

1. 총 5가지 Skins

 

 1. Sketchbook5 Webzin 형태

     mhmulti-002.jpg

 

 2. Sketchbook5 List 형태

     mhmulti-003.jpg

     

    •SketchBook5 게시판스킨 - 문하우스 수정버전 Pro 와 연동하여 날짜지정 종료/진행중/종료임박/오늘종료 버턴을 출력할 수 있습니다.

       - https://moonhouse.co.kr/xetip/506303

     mhmulti-004.jpg

 

 3. chameleon 형태

     mhmulti-005.jpg

 

 4. Smart 형태

     mhmulti-006.jpg

 

 5. Scroll - 공지사항형태

     mhmulti-007.jpg

Mh Product Sales

This area displays Product Sales made by Moonhouse.

Mh Justice Layout

Mh Justice Layout is a one page html5 bootstrap template.
This template comes with smooth animations, pop-up video and many more…

1. As soon as onePage is operated and the bootstrap and animations are applied, the animation is output in each section.

2. Almost perfect response (mobile)

3. Built-in various self-programming programs
• accordion menu
• iPhone background login pop-up
• Background slide
• Notice pop-up window

Read more

Mh Multi Sale

It's a multi widget that we've been creating since the XE super window, so you can output widgets in almost any form.

1. Works perfectly per widget. - Old versions create multiple widgets on one page with the same skin, causing problems with page function or multiple places

2. Add shortcut to on the title bar the top of the two.

3. can print out the source, without using a using the image output rightbox.

Read more