기본적인 이미지 팝업 Colorbox 사용법을 이전 게시글에 작성했는데
이번에는 레이아웃이나 게시판에 일반적인 팝업창을 띄우는 방법을 남깁니다.
먼저 설치방법은 이전 게시글 에 있는 방법으로 따라하세요.
1. 일반적인 레이아웃에 적용방법
•/layouts/해당레이아웃/conf/info.xml 에 아래 코드 추가
<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: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;}