M쇼핑몰: 상품상세보기 상품이미지 슬라이드 표준화 및 스타일 준비

This commit is contained in:
whitedot
2013-05-09 22:02:24 +09:00
parent ec5c5c2d0a
commit fe8e1949bf
2 changed files with 27 additions and 14 deletions

View File

@ -293,14 +293,20 @@ input.required:focus {border:0;background:#21272e !important;color:#fff;line-hei
#sit_ov_wrap:after {display:block;visibility:hidden;clear:both;content:""}
/* 상품 상세보기 - 이미지 미리보기 */
#sit_pvi {padding:1em 0;text-align:center}
#sit_pvi_big {margin:0 0 10px}
#sit_pvi {position:relative;border-bottom:1px solid #e9e9e9;text-align:center}
/*
#sit_pvi_big {margin:0 0 1em}
#sit_pvi_big a {display:inline-block}
#sit_pvi_big img {width:300px;height:300px}
#sit_pvi_thumb {margin:0;padding:0;list-style:none}
#sit_pvi_thumb li {display:inline-block;margin:0 5px 0 0}
#sit_pvi_thumb .li_last {margin:0 !important}
#sit_pvi_thumb img {width:56px;height:56px}
*/
#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_slide {margin:0;padding:0;list-style:none}
#sit_pvi_slide li {display:none}
#sit_pvi_slide img {width:280px;height:280px}
#sit_pvi_nw h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#sit_pvi_nwbig {padding:10px 0;text-align:center}

View File

@ -156,31 +156,38 @@ else
<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>
*/
?>
<?php
// 이미지(중) 썸네일
for ($i=1; $i<=5; $i++)
{
if ($i == 1) echo '<ul id="sit_pvi_thumb">';
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 '.$sit_pvi_last.'>';
echo '<li id="slide_'.$i.'" '.$sit_pvi_last.'>';
if (file_exists(G4_DATA_PATH.'/item/'.$it_id.'_l'.$i))
{
echo get_large_image($it_id.'_'.$i, $it['it_id'], false);
if ($i==1 && file_exists(G4_DATA_PATH.'/item/'.$it_id.'_s'))
echo '<a href="#sit_pvi_big" id="'.$it_id.'_s" class="img_thumb"><img src="'.G4_DATA_URL.'/item/'.$it_id.'_s" alt="" id="sit_pvi_t'.$i.'" ';
else
echo '<a href="#sit_pvi_big" id="'.$it_id.'_l'.$i.'" class="img_thumb"><img src="'.G4_DATA_URL.'/item/'.$it_id.'_l'.$i.'" alt="" id="sit_pvi_t'.$i.'" ';
//echo ' onmouseover="document.getElementById(\''.$middle_image.'\').src=document.getElementById(\'middle'.$i.'\').src;">';
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>';
}
echo '</li>';
}
if ($i > 1) echo '</ul>';
?>
<script>
$(function() {
$('#slide_1').css('display', 'block');
});
</script>
</div>
<?php //echo it_name_icon($it, false, 0); ?>