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-->
<!--%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>
<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}
.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;}