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

쇼핑몰: #122 #129 상품상세정보 이미지 새창 보기 표준화 및 스타일 완료

Browse Source
This commit is contained in:
whitedot
2013-05-03 17:51:51 +09:00
parent 9a5b537638
commit 99fa180d11
4 changed files with 58 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
css/default.css
View File

@ -146,7 +146,8 @@ button.btn_cancel {display:inline-block;padding:0 10px;height:24px;border:1px so
.btn_frmline {display:inline-block;padding:0 7px 0 5px;height:22px;border:0;background:#333;color:#fff !important;letter-spacing:-0.1em;text-decoration:none;vertical-align:top;line-height:2em} /* 우편번호검색버튼 등 */
button.btn_frmline {font-size:1em}
.btn_win {clear:both;margin-bottom:20px;text-align:center} /* 새창용 */
.btn_win a {display:inline-block;padding:0 10px;height:22px;border:1px solid #ccc;background:#fafafa;line-height:2em;cursor:pointer}
.btn_win a,
.btn_win button {display:inline-block;padding:0 10px;height:22px;border:1px solid #ccc;background:#fafafa;line-height:2em;cursor:pointer}
.btn_win a:focus,
.btn_win a:hover {text-decoration:none}
/* 게시판용 버튼 */

11
css/default_shop.css
View File

@ -199,7 +199,8 @@ button.btn_cancel {display:inline-block;padding:0 10px;height:24px;border:1px so
.btn_frmline {display:inline-block;padding:0 7px 0 5px;height:22px;border:0;background:#333;color:#fff !important;letter-spacing:-0.1em;text-decoration:none;vertical-align:top;line-height:2em} /* 우편번호검색버튼 등 */
button.btn_frmline {font-size:1em}
.btn_win {clear:both;margin-bottom:20px;text-align:center} /* 새창용 */
.btn_win a {display:inline-block;padding:0 10px;height:22px;border:1px solid #ccc;background:#fafafa;line-height:2em;cursor:pointer}
.btn_win a,
.btn_win button {display:inline-block;padding:0 10px;height:22px;border:1px solid #ccc;background:#fafafa;line-height:2em;cursor:pointer}
.btn_win a:focus,
.btn_win a:hover {text-decoration:none}
/* 게시판용 버튼 */
@ -445,6 +446,7 @@ input.required:focus {padding:3px 3px 4px;border:0;background:#21272e !important
/* 상품 상세보기 - 이미지 미리보기 */
#sit_pvi {float:left;padding:15px;width:320px}
#sit_pvi_big {margin:0 0 10px}
#sit_pvi_big a {display:block}
#sit_pvi_big img {width:320px;height:320px}
#sit_pvi_thumb {margin:0;padding:0;list-style:none;zoom:1}
#sit_pvi_thumb:after {display:block;visibility:hidden;clear:both;content:''}
@ -452,6 +454,13 @@ input.required:focus {padding:3px 3px 4px;border:0;background:#21272e !important
#sit_pvi_thumb .li_last {margin:0 !important}
#sit_pvi_thumb img {width:60px;height:60px}
#sit_pvi_nw h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#sit_pvi_nwbig {padding:10px 0;text-align:center}
#sit_pvi_nw ul {margin:0 0 20px;padding:0 10px;list-style:none;zoom:1}
#sit_pvi_nw ul:after {display:block;visibility:hidden;clear:both;content:''}
#sit_pvi_nw li {float:left;margin:0 0 0 1px}
#sit_pvi_nw li img {width:60px;height:60px}
/* 상품 상세보기 - 간략정보 및 구매기능 */
#sit_ov {position:relative;float:right;padding:50px 15px 15px;width:358px;height:auto !important;height:355px;min-height:355px;background:#f5f6fa}
#sit_ov h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}

13
shop/item.php
View File

@ -169,11 +169,11 @@ else
{
echo get_large_image($it_id.'_'.$i, $it['it_id'], false);
if ($i==1 && file_exists(G4_DATA_PATH.'/item/'.$it_id.'_s'))
echo '<img src="'.G4_DATA_URL.'/item/'.$it_id.'_s" alt="" id="sit_pvi_t'.$i.'" ';
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 '<img src="'.G4_DATA_URL.'/item/'.$it_id.'_l'.$i.'" alt="" id="sit_pvi_t'.$i.'" ';
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 '>';
echo '></a>';
}
echo '</li>';
}
@ -477,6 +477,13 @@ else
<!-- 관련상품 end -->
<script>
$(function(){ // 이미지 미리보기
$('#sit_pvi .img_thumb').bind('hover focus', function(){
var img_src = $(this).attr('id');
$('#sit_pvi_big img').attr('src','<?php echo G4_DATA_URL; ?>/item/'+img_src); // 이미지 소스 교체
});
});
function qty_add(num)
{
var f = document.fitem;

55
shop/largeimage.php
View File

@ -1,4 +1,5 @@
<?php
define('_SHOP_', true);
include_once('./_common.php');
$sql = " select it_name from {$g4['shop_item_table']} where it_id='$it_id' ";
@ -11,26 +12,42 @@ $size = getimagesize($imagefile);
$g4['title'] = "{$row['it_name']} ($it_id)";
include_once(G4_PATH.'/head.sub.php');
?>
<br>
<div align=center>
<a href='#' onclick='window.close();'><img id='largeimage' src='<?php echo $imagefileurl; ?>' width='<?php echo $size[0]; ?>' height='<?php echo $size[1]; ?>' alt='<?php echo $row['it_name']; ?>' border=0 style='border:1 solid #E4E4E4;'></a>
<div id="sit_pvi_nw">
<h1>상품 이미지 새 창 보기</h1>
<div id="sit_pvi_nwbig">
<a href="javascript:window.close();">
<img src="<?php echo $imagefileurl; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" alt="<?php echo $row['it_name']; ?>" id="largeimage">
</a>
</div>
<?php
for ($i=1; $i<=5; $i++)
{
if ($i == 1) echo '<ul>';
if (file_exists(G4_DATA_PATH."/item/{$it_id}_l{$i}"))
?>
<li><a href="#" id="<?php echo $it_id; ?>_l<?php echo $i; ?>" class="img_thumb"><img id="large<?php echo $i; ?>" src="<?php echo G4_DATA_URL; ?>/item/<?php echo $it_id; ?>_l<?php echo $i; ?>" alt=""></a></li>
<?php
}
if ($i > 1) echo '</ul>';
?>
<div class="btn_win">
<button type="button" onclick="javascript:window.close();">창닫기</button>
</div>
</div>
<p>
<table width=100% cellpadding=0 cellspacing=0>
<tr>
<td width=30% align=center><a href='#' onclick='window.close();'><img src='<?php echo G4_SHOP_URL; ?>/img/btn_close.gif' border=0 alt="창닫기"></a></td>
<td width=70% align=right>
<?php
for ($i=1; $i<=5; $i++)
{
if (file_exists(G4_DATA_PATH."/item/{$it_id}_l{$i}"))
echo "<img id='large{$i}' src='".G4_DATA_URL."/item/{$it_id}_l{$i}' border=0 width=50 height=50 style='border:1 solid #E4E4E4;'
onmouseover=\"document.getElementById('largeimage').src=document.getElementById('large{$i}').src;\"> &nbsp;";
}
?>
&nbsp;</td>
</tr>
</table>
<script>
$(function(){ // 이미지 미리보기
$('.img_thumb').bind('hover focus', function(){
var img_src = $(this).attr('id');
$('#sit_pvi_nwbig img').attr('src','<?php echo G4_DATA_URL; ?>/item/'+img_src); // 이미지 소스 교체
});
});
</script>
<?php
include_once(G4_PATH.'/tail.sub.php');
?>