firstgarden/firstgarden-web-gnu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

상품이미지 슬라이더 추가

Browse Source
This commit is contained in:
chicpro
2013-05-10 13:32:17 +09:00
parent 81aa44ebd2
commit 5f638ea8a0
2 changed files with 43 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
css/mobile_shop.css
View File

@ -302,10 +302,10 @@ input.required:focus {border:0;background:#21272e !important;color:#fff;line-hei
#sit_pvi_prev {position:absolute;top:0;left:0}
#sit_pvi_next {position:absolute;top:0;right:0}
.sit_pvi_btn {width:2em;height:280px;border:0;background:#f5f6fa}
.sit_pvi_btn {width:2em;height:280px;border:0;background:#f5f6fa;display:none;}
#sit_pvi_slide {margin:0;padding:0;list-style:none}
#sit_pvi_slide li {display:none}
#sit_pvi_slide {position:relative;margin:0 auto;padding:0;list-style:none;width:280px;height:280px;overflow-x:hidden}
#sit_pvi_slide li {display:none;position:absolute;left:0;top:0}
#sit_pvi_slide img {width:280px;height:280px}
#sit_pvi_nw h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
@ -442,7 +442,7 @@ input.required:focus {border:0;background:#21272e !important;color:#fff;line-hei
#smb_my_od .td_stat {width:100px}
#smb_my_wish h2 {margin:0 0 10px}
.smb_my_img {width:90px;text-align:center}
/* 장바구니 */

56
mobile/shop/item.php
View File

@ -154,38 +154,60 @@ else
<div id="sit_ov_wrap">
<div id="sit_pvi">
<?php
$img_big = $it['it_id'].'_l1'; // 기본이미지(대)
/*
<div id="sit_pvi_big">
<a href="<?php echo G4_SHOP_URL; ?>/largeimage.php?it_id=<?php echo $it['it_id']; ?>&amp;img=<?php echo $img_big; ?>" id="<?php echo $img_big; ?>" class="popup_item_image" target="_blank"><img src="<?php echo G4_DATA_URL; ?>/item/<?php echo $img_big; ?>" alt=""></a>
</div>
*/
?>
<button type="button" id="sit_pvi_prev" class="sit_pvi_btn">이전</button>
<button type="button" id="sit_pvi_next" class="sit_pvi_btn">다음</button>
<?php
// 이미지(중) 썸네일
for ($i=1; $i<=5; $i++)
{
if ($i == 1) {
echo '<button type="button" id="sit_pvi_prev" class="sit_pvi_btn">이전</button>'.PHP_EOL;
echo '<button type="button" id="sit_pvi_next" class="sit_pvi_btn">다음</button>'.PHP_EOL;
}
if ($i == 1) echo '<ul id="sit_pvi_slide">';
if ($i == 5) $sit_pvi_last = 'class="li_last"';
echo '<li id="slide_'.$i.'" '.$sit_pvi_last.'>';
if (file_exists(G4_DATA_PATH.'/item/'.$it_id.'_l'.$i))
{
$img_id = $it_id.'_l'.$i;
echo '<li>';
echo get_large_image($it_id.'_'.$i, $it['it_id'], false);
echo '<a href="'.G4_SHOP_URL.'/largeimage.php?it_id='.$it['it_id'].'&amp;img='.$img_big.'" id="'.$img_big.'" class="popup_item_image slide_img" target="_blank"><img src="'.G4_DATA_URL.'/item/'.$it_id.'_l'.$i.'" alt="" id="sit_pvi_t'.$i.'" ';
echo '<a href="'.G4_SHOP_URL.'/largeimage.php?it_id='.$it['it_id'].'&amp;img='.$img_id.'" id="'.$img_id.'" class="popup_item_image slide_img" target="_blank"><img src="'.G4_DATA_URL.'/item/'.$it_id.'_l'.$i.'" alt="" id="sit_pvi_t'.$i.'" ';
echo '></a>';
echo '</li>';
}
echo '</li>';
}
if ($i > 1) echo '</ul>';
?>
<script>
$(function() {
$('#slide_1').css('display', 'block');
var time = 500;
var idx = idx2 = 0;
var slide_width = $("#sit_pvi_slide").width();
var slide_count = $("#sit_pvi_slide li").size();
$("#sit_pvi_slide li:first").css("display", "block");
if(slide_count > 1)
$(".sit_pvi_btn").css("display", "inline");
$("#sit_pvi_prev").click(function() {
if(slide_count > 1) {
idx2 = (idx - 1) % slide_count;
if(idx2 < 0)
idx2 = slide_count - 1;
$("#sit_pvi_slide li:hidden").css("left", "-"+slide_width+"px");
$("#sit_pvi_slide li:eq("+idx+")").animate({ left: "+="+slide_width+"px" }, time, function() {
$(this).css("display", "none").css("left", "-"+slide_width+"px");
});
$("#sit_pvi_slide li:eq("+idx2+")").css("display", "block").animate({ left: "+="+slide_width+"px" }, time);
idx = idx2;
}
});
$("#sit_pvi_next").click(function() {
if(slide_count > 1) {
idx2 = (idx + 1) % slide_count;
$("#sit_pvi_slide li:hidden").css("left", slide_width+"px");
$("#sit_pvi_slide li:eq("+idx+")").animate({ left: "-="+slide_width+"px" }, time, function() {
$(this).css("display", "none").css("left", slide_width+"px");
});
$("#sit_pvi_slide li:eq("+idx2+")").css("display", "block").animate({ left: "-="+slide_width+"px" }, time);
idx = idx2;
}
});
});
</script>
</div>