그누 보드 질문은 아닙니다. 부탁드립니다.
본문
안녕하세요
그누보드 질문은 아니고 PHP관련 질문 입니다. 확인 좀 부탁드립니다.
아래소스는 쇼핑몰에 이미지 출력하는 부분입니다.
아래 처럼 하면 이미지가 한줄로 5개씩 표현이 됩니다.
이것을 두줄로 총 10개를 출력하고자 합니다.
어디를 어떻게 수정하면 되는지 확인 부탁드립니다.
감사합니다.
{@
$program_set[cate_code] = $var_set[cate_code]; // 쇼핑몰 상품분류
$program_set[main_code] = $var_set[main_code]; // 쇼핑몰 메인출력그룹
$program_set[img_thumb_w] = $var_set[img_thumb_w]; // 썸네일 이미지 가로크기
$program_set[img_thumb_h] = $var_set[img_thumb_h]; // 썸네일 이미지 세로크기
$program_set[img_thumb_type] = $var_set[img_thumb_type]; // 썸네일 이미지 생성방식 (1:일반 이미지축소, 2: 위 사이즈보다 큰경우 잘라내기)
$program_set[limit] = $var_set[limit]; // 출력수 (1~999)
$program_set[order_type] = $var_set[order_type]; // 정렬 방식. 등록순(DEFAULT), 등록날짜순(REG_TIME), 조회수(VIEW), 랜덤(RAND)
$shop_goods = program_load(SHOP_GOODS);
@}
{@
$navColor = '#111'; // 방향 네비게이션 색상
$dotColor = '#ddd'; // 하단 네비게이션 색상
$dotOver = '#999'; // 하단 네비게이션 오버 색상
$dotPosition = 'text-align:center;'; // 하단 네비게이션 위치 (top:0; bottom:0; text-align:center;)
$slideWidth = ($var_set[slide_width]) ? 'max-width: '.$var_set[slide_width].'px;' : '';
$zIndex = (!$var_set[animateOut]) ? 'z-index: 1;' : '';
@}
<load target="/img_up/shop_pds/comico/design/jquery.min.js">
<load target="/img_up/shop_pds/comico/design/owl.carousel.min.css">
<load target="/img_up/shop_pds/comico/design/owl.carousel.min.js">
<style>
@font-face {
font-family: 'icomoon_slider';
src: url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.eot');
src: url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.eot?#iefix') format('embedded-opentype'),
url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.woff') format('woff'),
url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.ttf') format('truetype'),
url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.svg#icomoon_slider') format('svg');
font-weight: normal;
font-style: normal;
}
.best50 {{$slideWidth} margin:0 auto;}
.best50 a {display:block; border:none; text-decoration:none;}
.best50 .owl-item {{$zIndex}}
.best50 .item {position:relative;}
.best50 .owl-controls {-webkit-tap-highlight-color:transparent;}
.best50 .owl-controls .owl-nav [class*='owl-'] {
position:absolute; top:0; z-index:2; width:30px; height:30px; line-height:30px; margin-top:-45px;
font-size:0; cursor:pointer; opacity:0.7;
}
.best50 .owl-controls .owl-nav [class*='owl-']:before{font-family:'icomoon_slider'; font-size:20px; font-weight:bold; color:{$navColor}; border:1px solid #b5b4b4; padding:5px;}
.best50 .owl-controls .owl-nav [class*='owl-']:hover {opacity:1;}
.best50 .owl-controls .owl-nav .owl-prev {right:35px;}
.best50 .owl-controls .owl-nav .owl-next {right:0;}
.best50 .owl-controls .owl-nav .owl-prev:before {content:'\e600';}
.best50 .owl-controls .owl-nav .owl-next:before {content:'\e601';}
.best50 .owl-controls .owl-nav .disabled {opacity:0.5; cursor:default;}
.best50 .owl-dots {position:absolute; left:0; width:100%; height:30px; padding:10px; font-size:0; box-sizing:border-box; {$dotPosition}}
.best50 .owl-dots .owl-dot {display:inline-block; zoom:1; *display:inline;}
.best50 .owl-dots .owl-dot span {
display:block;width:10px; height:10px; margin:0 4px;
background:{$dotColor}; border-radius:30px;
-webkit-backface-visibility:visible;
-webkit-transition:opacity 200ms ease;
-moz-transition:opacity 200ms ease;
-ms-transition:opacity 200ms ease;
-o-transition:opacity 200ms ease;
transition:opacity 200ms ease;
}
.best50 .owl-dots .owl-dot.active span,
.best50 .owl-dots .owl-dot:hover span {background:{$dotOver};}
</style>
<div id="owl_{$this_group_code}" class="best50" cond="count($shop_goods)">
<!--@foreach($shop_goods as $k=>$v)-->
<div class="item" data-hash="{$this_group_code}_item{$k}">
<a href="{$v[read_url]}">
<div class="figure">
<!--@if($v[img1_url])-->
<img src="{$v[img1_url]}" alt="{$v[goods_name]}">
<!--@else-->
<img src="http://placehold.it/{$var_set[img_thumb_w]}x{$var_set[img_thumb_h]}/eee/999" alt="no img">
<!--@end-->
<dl class="caption {$var_set[caption]}">
<dt>
<span class="goods_name">{$v[goods_name]}</span>
</dt>
<dd>
<!--@if($v[goods_stock])-->
<span class="sijung_price" cond="$v[sijung_price_str]">{$v[sijung_price_str]|number}원</span>
<span class="price">{$v[price_str]}원</span>
<!--@else-->
<span class="soldout">품절</span>
<!--@end-->
<span class="icon" cond="$v[icon_str] || $v[icon_str2]">{$v[icon_str]} {$v[icon_str2]}</span>
</dd>
</dl>
</div>
</a>
</div>
<!--@end-->
</div>
<script>
jQuery(function($) {
$('#owl_{$this_group_code}').owlCarousel({
margin: {$var_set[margin]}, // 이미지 간격
loop: true, // 무한 반복
center: false, // 액티브 슬라이드 가운데 정렬
mouseDrag: true, // 마우스 드레그 사용
touchDrag: true, // 터치 드레그 사용
stagePadding: 0, // 스테이지 여백 (좌우 슬라이드 노출)
nav: {$var_set[nav]}, // 방향 네비게이션
dots: {$var_set[dots]}, // 하단 네비게이션
dotsEach: false, // 하단 네비게이션 (페이지별 출력,항목별 출력)
autoplay: true, // 자동 재생
autoplayTimeout: 5000, // 자동 재생 속도
smartSpeed: 250, // 슬라이드 속도
responsiveRefreshRate: 200, // 반응형 체크 시간
startPosition: 0, // 시작 슬라이드 번호
URLhashListener: false, // #URL 로 액티브 슬라이드 동작
autoplayHoverPause: false, // 마우스 오버시 일시정지
responsiveClass: false, // 반응형 class명 사용 (owl-reponsive-0)
navContainer: false, // 방향 네비게이션 커스터마이징
dotsContainer: false, // 하단 네비게이션 커스터마이징
responsive: { // 반응형
0: {
items:2, // 한 화면 출력수 (모바일)
slideBy:10 // 한번에 슬라이드 되는 수 (모바일)
},
760: {
items:4, // 한 화면 출력수 (태블릿)
slideBy:4 // 한번에 슬라이드 되는 수 (태블릿)
},
1024: {
items:5, // 한 화면 출력수 (PC)
slideBy:50 // 한번에 슬라이드 되는 수 (PC)
}
}
})
});
</script>
답변 1
올리신 소스가 http://owlgraphic.com/owlcarousel/#demo 를 기반으로 만든 슬라이더 같은데요..
옵션을 한번 살펴보시면 도움이 되실듯..
사견으로는 두 줄 표시에 관한 메뉴는 없어보이는데.. 만약 제가 수정한다면 10개출력으로 itemcount를 수정하고 5번째 표시 후 br 태그를 넣어서 만들어 볼듯합니다. 물론 이를 위해서는 width도 수정해야 하고 슬라이더를 감싸는 div의 height도 늘여야하고.. 시간이 많이 걸릴듯합니다.
답변을 작성하시기 전에 로그인 해주세요.
