모바일 쇼핑몰 메인 swipe 기능 추가중
This commit is contained in:
@ -57,9 +57,11 @@ a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none}
|
||||
/* ########## 쇼핑몰 컨텐츠 ########## */
|
||||
/* 인덱스 이미지 출력 */
|
||||
#sidx {padding:0}
|
||||
.sidx {position:relative;width:100%;overflow:hidden;}
|
||||
|
||||
/* 인덱스 상품 */
|
||||
#slide_tab {display:none;margin:0;padding:0}
|
||||
.slide_tab {display:block!important;position:relative;width:100%;height:50px;background-color:#eee;overflow:hidden}
|
||||
#sidx_slide {position:relative;top:0;left:0;width:100%;overflow:hidden}
|
||||
.sidx_slide {position:absolute;top:0;left:0;width:100%}
|
||||
|
||||
/* 상품 목록 */
|
||||
|
||||
@ -2,19 +2,24 @@
|
||||
$.fn.slideSwipe = function(option)
|
||||
{
|
||||
var cfg = {
|
||||
element: "section",
|
||||
sidx_class: "sidx",
|
||||
slide_wrap: "sidx_slide",
|
||||
slide: "section",
|
||||
slide_tab: "slide_tab",
|
||||
tab_class: "slide_tab",
|
||||
slide_class: "sidx_slide",
|
||||
active_class: "slide_class",
|
||||
active_class: "slide_active",
|
||||
duration: 300
|
||||
};
|
||||
|
||||
if(typeof option == "object")
|
||||
cfg = $.extend( cfg, option );
|
||||
|
||||
this.addClass(cfg.sidx_class);
|
||||
var $this = this;
|
||||
var $slides = this.find(cfg.element);
|
||||
var $wrap = this.find("#"+cfg.slide_wrap);
|
||||
var $tab = this.find("#"+cfg.slide_tab);
|
||||
var $slides = this.find(cfg.slide);
|
||||
|
||||
$tab.addClass(cfg.tab_class);
|
||||
$slides.addClass(cfg.slide_class);
|
||||
|
||||
var height;
|
||||
@ -33,7 +38,7 @@
|
||||
$slides.not("."+cfg.active_class).css("left", width+"px");
|
||||
|
||||
height = $slides.eq(idx).height();
|
||||
$this.height(height);
|
||||
$wrap.height(height);
|
||||
}
|
||||
|
||||
function swipe_left()
|
||||
@ -48,7 +53,7 @@
|
||||
|
||||
width = $(window).width();
|
||||
height = $slides.eq(next).height();
|
||||
$this.height(height);
|
||||
$wrap.height(height);
|
||||
|
||||
$slides.eq(idx).animate(
|
||||
{ left: "-="+width }, cfg.duration,
|
||||
@ -77,7 +82,7 @@
|
||||
|
||||
width = $(window).width();
|
||||
height = $slides.eq(next).height();
|
||||
$this.height(height);
|
||||
$wrap.height(height);
|
||||
|
||||
$slides.eq(idx).animate(
|
||||
{ left: "+="+width }, cfg.duration,
|
||||
|
||||
@ -12,105 +12,110 @@ include_once(G5_MSHOP_PATH.'/shop.head.php');
|
||||
|
||||
<div id="sidx">
|
||||
|
||||
<section class="sct_wrap">
|
||||
<header>
|
||||
<h2>최신상품</h2>
|
||||
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 최신상품 모음</p>
|
||||
</header>
|
||||
<?php
|
||||
$list = new item_list();
|
||||
$list->set_mobile(true);
|
||||
$list->set_type(1);
|
||||
$list->set_view('it_id', false);
|
||||
$list->set_view('it_name', true);
|
||||
$list->set_view('it_cust_price', false);
|
||||
$list->set_view('it_price', true);
|
||||
$list->set_view('it_icon', true);
|
||||
$list->set_view('sns', true);
|
||||
echo $list->run();
|
||||
?>
|
||||
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=3">더 보기</a></div>
|
||||
</section>
|
||||
<ul id="slide_tab">
|
||||
</ul>
|
||||
|
||||
<section class="sct_wrap">
|
||||
<header>
|
||||
<h2>히트상품</h2>
|
||||
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 히트상품 모음</p>
|
||||
</header>
|
||||
<?php
|
||||
$list = new item_list();
|
||||
$list->set_mobile(true);
|
||||
$list->set_type(2);
|
||||
$list->set_view('it_id', false);
|
||||
$list->set_view('it_name', true);
|
||||
$list->set_view('it_cust_price', false);
|
||||
$list->set_view('it_price', true);
|
||||
$list->set_view('it_icon', true);
|
||||
$list->set_view('sns', true);
|
||||
echo $list->run();
|
||||
?>
|
||||
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=1">더 보기</a></div>
|
||||
</section>
|
||||
<div id="sidx_slide">
|
||||
<section class="sct_wrap">
|
||||
<header>
|
||||
<h2>최신상품</h2>
|
||||
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 최신상품 모음</p>
|
||||
</header>
|
||||
<?php
|
||||
$list = new item_list();
|
||||
$list->set_mobile(true);
|
||||
$list->set_type(1);
|
||||
$list->set_view('it_id', false);
|
||||
$list->set_view('it_name', true);
|
||||
$list->set_view('it_cust_price', false);
|
||||
$list->set_view('it_price', true);
|
||||
$list->set_view('it_icon', true);
|
||||
$list->set_view('sns', true);
|
||||
echo $list->run();
|
||||
?>
|
||||
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=3">더 보기</a></div>
|
||||
</section>
|
||||
|
||||
<section class="sct_wrap">
|
||||
<header>
|
||||
<h2>추천상품</h2>
|
||||
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 추천상품 모음</p>
|
||||
</header>
|
||||
<?php
|
||||
$list = new item_list();
|
||||
$list->set_mobile(true);
|
||||
$list->set_type(3);
|
||||
$list->set_view('it_id', false);
|
||||
$list->set_view('it_name', true);
|
||||
$list->set_view('it_cust_price', false);
|
||||
$list->set_view('it_price', true);
|
||||
$list->set_view('it_icon', true);
|
||||
$list->set_view('sns', true);
|
||||
echo $list->run();
|
||||
?>
|
||||
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=2">더 보기</a></div>
|
||||
</section>
|
||||
<section class="sct_wrap">
|
||||
<header>
|
||||
<h2>히트상품</h2>
|
||||
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 히트상품 모음</p>
|
||||
</header>
|
||||
<?php
|
||||
$list = new item_list();
|
||||
$list->set_mobile(true);
|
||||
$list->set_type(2);
|
||||
$list->set_view('it_id', false);
|
||||
$list->set_view('it_name', true);
|
||||
$list->set_view('it_cust_price', false);
|
||||
$list->set_view('it_price', true);
|
||||
$list->set_view('it_icon', true);
|
||||
$list->set_view('sns', true);
|
||||
echo $list->run();
|
||||
?>
|
||||
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=1">더 보기</a></div>
|
||||
</section>
|
||||
|
||||
<section class="sct_wrap">
|
||||
<header>
|
||||
<h2>인기상품</h2>
|
||||
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 인기상품 모음</p>
|
||||
</header>
|
||||
<?php
|
||||
$list = new item_list();
|
||||
$list->set_mobile(true);
|
||||
$list->set_type(4);
|
||||
$list->set_view('it_id', false);
|
||||
$list->set_view('it_name', true);
|
||||
$list->set_view('it_cust_price', false);
|
||||
$list->set_view('it_price', true);
|
||||
$list->set_view('it_icon', true);
|
||||
$list->set_view('sns', true);
|
||||
echo $list->run();
|
||||
?>
|
||||
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=4">더 보기</a></div>
|
||||
</section>
|
||||
<section class="sct_wrap">
|
||||
<header>
|
||||
<h2>추천상품</h2>
|
||||
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 추천상품 모음</p>
|
||||
</header>
|
||||
<?php
|
||||
$list = new item_list();
|
||||
$list->set_mobile(true);
|
||||
$list->set_type(3);
|
||||
$list->set_view('it_id', false);
|
||||
$list->set_view('it_name', true);
|
||||
$list->set_view('it_cust_price', false);
|
||||
$list->set_view('it_price', true);
|
||||
$list->set_view('it_icon', true);
|
||||
$list->set_view('sns', true);
|
||||
echo $list->run();
|
||||
?>
|
||||
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=2">더 보기</a></div>
|
||||
</section>
|
||||
|
||||
<section class="sct_wrap">
|
||||
<header>
|
||||
<h2>할인상품</h2>
|
||||
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 할인상품 모음</p>
|
||||
</header>
|
||||
<?php
|
||||
$list = new item_list();
|
||||
$list->set_mobile(true);
|
||||
$list->set_type(5);
|
||||
$list->set_view('it_id', false);
|
||||
$list->set_view('it_name', true);
|
||||
$list->set_view('it_cust_price', false);
|
||||
$list->set_view('it_price', true);
|
||||
$list->set_view('it_icon', true);
|
||||
$list->set_view('sns', true);
|
||||
echo $list->run();
|
||||
?>
|
||||
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=5">더 보기</a></div>
|
||||
</section>
|
||||
<section class="sct_wrap">
|
||||
<header>
|
||||
<h2>인기상품</h2>
|
||||
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 인기상품 모음</p>
|
||||
</header>
|
||||
<?php
|
||||
$list = new item_list();
|
||||
$list->set_mobile(true);
|
||||
$list->set_type(4);
|
||||
$list->set_view('it_id', false);
|
||||
$list->set_view('it_name', true);
|
||||
$list->set_view('it_cust_price', false);
|
||||
$list->set_view('it_price', true);
|
||||
$list->set_view('it_icon', true);
|
||||
$list->set_view('sns', true);
|
||||
echo $list->run();
|
||||
?>
|
||||
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=4">더 보기</a></div>
|
||||
</section>
|
||||
|
||||
<section class="sct_wrap">
|
||||
<header>
|
||||
<h2>할인상품</h2>
|
||||
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 할인상품 모음</p>
|
||||
</header>
|
||||
<?php
|
||||
$list = new item_list();
|
||||
$list->set_mobile(true);
|
||||
$list->set_type(5);
|
||||
$list->set_view('it_id', false);
|
||||
$list->set_view('it_name', true);
|
||||
$list->set_view('it_cust_price', false);
|
||||
$list->set_view('it_price', true);
|
||||
$list->set_view('it_icon', true);
|
||||
$list->set_view('sns', true);
|
||||
echo $list->run();
|
||||
?>
|
||||
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=5">더 보기</a></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -118,10 +123,12 @@ include_once(G5_MSHOP_PATH.'/shop.head.php');
|
||||
$(function() {
|
||||
$("#sidx").slideSwipe(
|
||||
{
|
||||
element: "section.sct_wrap",
|
||||
sidx_class: "sidx",
|
||||
el_class: "sidx",
|
||||
selector: "section.sct_wrap",
|
||||
slide_tab: "slide_tab",
|
||||
tab_class: "slide_tab",
|
||||
slide_class: "sidx_slide",
|
||||
active_class: "slide_class",
|
||||
active_class: "slide_active",
|
||||
duration: 300
|
||||
}
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user