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

css/default.css

@@ -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}
 /* 게시판용 버튼 */

css/default_shop.css

@@ -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}

shop/item.php

@@ -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;

shop/largeimage.php

@@ -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>
+<div id="sit_pvi_nw">
-    <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>
+    <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>
+<script>
-<tr>
+$(function(){ // 이미지 미리보기
-    <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>
+    $('.img_thumb').bind('hover focus', function(){
-    <td width=70% align=right>
+        var img_src = $(this).attr('id');
-        <?php
+        $('#sit_pvi_nwbig img').attr('src','<?php echo G4_DATA_URL; ?>/item/'+img_src); // 이미지 소스 교체
-        for ($i=1; $i<=5; $i++)
+    });
-        {
+});
-            if (file_exists(G4_DATA_PATH."/item/{$it_id}_l{$i}"))
+</script>
-                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>
 <?php
 include_once(G4_PATH.'/tail.sub.php');
 ?>