상품이미지 크게 보기 스킨화

mobile/shop/largeimage.php

@@ -17,71 +17,13 @@ $size = getimagesize($imagefile);
 
 $g5['title'] = "{$row['it_name']} ($it_id)";
 include_once(G5_PATH.'/head.sub.php');
-?>
 
-<div id="sit_pvi_nw" class="new_win">
+$skin = G5_MSHOP_SKIN_PATH.'/largeimage.skin.php';
-    <h1 id="win_title">상품 이미지 새 창 보기</h1>
 
-    <div id="sit_pvi_nwbig">
+if(is_file($skin))
-        <?php
+    include_once($skin);
-        $thumbnails = array();
+else
-        for($i=1; $i<=10; $i++) {
+    echo '<p>'.str_replace(G5_PATH.'/', '', $skin).'파일이 존재하지 않습니다.</p>';
-            if(!$row['it_img'.$i])
-                continue;
 
-            $file = G5_DATA_PATH.'/item/'.$row['it_img'.$i];
-            if(is_file($file)) {
-                // 썸네일
-                $thumb = get_it_thumbnail($row['it_img'.$i], 60, 60);
-                $thumbnails[$i] = $thumb;
-                $imageurl = G5_DATA_URL.'/item/'.$row['it_img'.$i];
-        ?>
-        <span>
-            <a href="javascript:window.close();">
-                <img src="<?php echo $imageurl; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" alt="<?php echo $row['it_name']; ?>" id="largeimage">
-            </a>
-        </span>
-        <?php
-            }
-        }
-        ?>
-    </div>
-
-    <?php
-    $total_count = count($thumbnails);
-    $thumb_count = 0;
-    if($total_count > 0) {
-        echo '<ul>';
-        foreach($thumbnails as $key=>$val) {
-            echo '<li><a href="'.G5_SHOP_URL.'/largeimage.php?it_id='.$it_id.'&amp;no='.$key.'" class="img_thumb">'.$val.'</a></li>';
-        }
-        echo '</ul>';
-    }
-    ?>
-
-    <div class="win_btn">
-        <button type="button" onclick="javascript:window.close();">창닫기</button>
-    </div>
-</div>
-
-<script>
-$(function(){
-    // 창 사이즈 조절
-    var w = <?php echo $size[0]; ?> + 50;
-    var h = <?php echo $size[1]; ?> + 210;
-    window.resizeTo(w, h);
-
-    $("#sit_pvi_nwbig span:eq("+<?php echo ($no - 1); ?>+")").addClass("visible");
-
-    // 이미지 미리보기
-    $(".img_thumb").bind("mouseover focus", function(){
-        var idx = $(".img_thumb").index($(this));
-        $("#sit_pvi_nwbig span.visible").removeClass("visible");
-        $("#sit_pvi_nwbig span:eq("+idx+")").addClass("visible");
-    });
-});
-</script>
-
-<?php
 include_once(G5_PATH.'/tail.sub.php');
 ?>

mobile/skin/shop/basic/largeimage.skin.php

@@ -0,0 +1,91 @@
+<?php
+if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
+
+// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
+add_stylesheet('<link rel="stylesheet" href="'.G5_MSHOP_SKIN_URL.'/style.css">', 0);
+?>
+
+<div id="sit_pvi_nw" class="new_win">
+    <h1 id="win_title">상품 이미지 새 창 보기</h1>
+
+    <div id="sit_pvi_nwbig">
+        <?php
+        $thumbnails = array();
+        for($i=1; $i<=10; $i++) {
+            if(!$row['it_img'.$i])
+                continue;
+
+            $file = G5_DATA_PATH.'/item/'.$row['it_img'.$i];
+            if(is_file($file)) {
+                // 썸네일
+                $thumb = get_it_thumbnail($row['it_img'.$i], 60, 60);
+                $thumbnails[$i] = $thumb;
+                $imageurl = G5_DATA_URL.'/item/'.$row['it_img'.$i];
+        ?>
+        <span>
+            <a href="javascript:window.close();">
+                <img src="<?php echo $imageurl; ?>" width="<?php echo $size[0]; ?>" alt="<?php echo $row['it_name']; ?>" id="largeimage_<?php echo $i; ?>">
+            </a>
+        </span>
+        <?php
+            }
+        }
+        ?>
+    </div>
+
+    <?php
+    $total_count = count($thumbnails);
+    $thumb_count = 0;
+    if($total_count > 0) {
+        echo '<ul>';
+        foreach($thumbnails as $key=>$val) {
+            echo '<li><a href="'.G5_SHOP_URL.'/largeimage.php?it_id='.$it_id.'&amp;no='.$key.'" class="img_thumb">'.$val.'</a></li>';
+        }
+        echo '</ul>';
+    }
+    ?>
+
+    <div class="win_btn">
+        <button type="button" onclick="javascript:window.close();">창닫기</button>
+    </div>
+</div>
+
+<script>
+$(function(){
+    fit_width();
+
+    $("#sit_pvi_nwbig span:eq("+<?php echo ($no - 1); ?>+")").addClass("visible");
+
+    // 이미지 미리보기
+    $(".img_thumb").bind("mouseover focus", function(){
+        var idx = $(".img_thumb").index($(this));
+        $("#sit_pvi_nwbig span.visible").removeClass("visible");
+        $("#sit_pvi_nwbig span:eq("+idx+")").addClass("visible");
+    });
+
+    $(window).on("resize", function() {
+        fit_width();
+    });
+});
+
+function fit_width()
+{
+    var sw = $(window).width();
+    var $img = $("#sit_pvi_nwbig span img");
+
+    if($img.size() < 1)
+        return;
+
+    $img.each(function() {
+        var w = $(this).width();
+        if($(this).data("width") == undefined)
+            $(this).data("width", w);
+
+        if(parseInt($(this).data("width")) > sw) {
+            $(this).removeAttr("width").css("width", "100%");
+        } else {
+            $(this).width($(this).data("width"));
+        }
+    });
+}
+</script>

shop/largeimage.php

@@ -22,71 +22,13 @@ $size = getimagesize($imagefile);
 
 $g5['title'] = "{$row['it_name']} ($it_id)";
 include_once(G5_PATH.'/head.sub.php');
-?>
 
-<div id="sit_pvi_nw" class="new_win">
+$skin = G5_SHOP_SKIN_PATH.'/largeimage.skin.php';
-    <h1 id="win_title">상품 이미지 새창 보기</h1>
 
-    <div id="sit_pvi_nwbig">
+if(is_file($skin))
-        <?php
+    include_once($skin);
-        $thumbnails = array();
+else
-        for($i=1; $i<=10; $i++) {
+    echo '<p>'.str_replace(G5_PATH.'/', '', $skin).'파일이 존재하지 않습니다.</p>';
-            if(!$row['it_img'.$i])
-                continue;
 
-            $file = G5_DATA_PATH.'/item/'.$row['it_img'.$i];
-            if(is_file($file)) {
-                // 썸네일
-                $thumb = get_it_thumbnail($row['it_img'.$i], 60, 60);
-                $thumbnails[$i] = $thumb;
-                $imageurl = G5_DATA_URL.'/item/'.$row['it_img'.$i];
-        ?>
-        <span>
-            <a href="javascript:window.close();">
-                <img src="<?php echo $imageurl; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" alt="<?php echo $row['it_name']; ?>" id="largeimage">
-            </a>
-        </span>
-        <?php
-            }
-        }
-        ?>
-    </div>
-
-    <?php
-    $total_count = count($thumbnails);
-    $thumb_count = 0;
-    if($total_count > 0) {
-        echo '<ul>';
-        foreach($thumbnails as $key=>$val) {
-            echo '<li><a href="'.G5_SHOP_URL.'/largeimage.php?it_id='.$it_id.'&amp;no='.$key.'" class="img_thumb">'.$val.'</a></li>';
-        }
-        echo '</ul>';
-    }
-    ?>
-
-    <div class="win_btn">
-        <button type="button" onclick="javascript:window.close();">창닫기</button>
-    </div>
-</div>
-
-<script>
-$(function(){
-    // 창 사이즈 조절
-    var w = <?php echo $size[0]; ?> + 50;
-    var h = <?php echo $size[1]; ?> + 210;
-    window.resizeTo(w, h);
-
-    $("#sit_pvi_nwbig span:eq("+<?php echo ($no - 1); ?>+")").addClass("visible");
-
-    // 이미지 미리보기
-    $(".img_thumb").bind("mouseover focus", function(){
-        var idx = $(".img_thumb").index($(this));
-        $("#sit_pvi_nwbig span.visible").removeClass("visible");
-        $("#sit_pvi_nwbig span:eq("+idx+")").addClass("visible");
-    });
-});
-</script>
-
-<?php
 include_once(G5_PATH.'/tail.sub.php');
 ?>

skin/shop/basic/largeimage.skin.php

@@ -0,0 +1,69 @@
+<?php
+if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
+
+// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
+add_stylesheet('<link rel="stylesheet" href="'.G5_SHOP_SKIN_URL.'/style.css">', 0);
+?>
+
+<div id="sit_pvi_nw" class="new_win">
+    <h1 id="win_title">상품 이미지 새창 보기</h1>
+
+    <div id="sit_pvi_nwbig">
+        <?php
+        $thumbnails = array();
+        for($i=1; $i<=10; $i++) {
+            if(!$row['it_img'.$i])
+                continue;
+
+            $file = G5_DATA_PATH.'/item/'.$row['it_img'.$i];
+            if(is_file($file)) {
+                // 썸네일
+                $thumb = get_it_thumbnail($row['it_img'.$i], 60, 60);
+                $thumbnails[$i] = $thumb;
+                $imageurl = G5_DATA_URL.'/item/'.$row['it_img'.$i];
+        ?>
+        <span>
+            <a href="javascript:window.close();">
+                <img src="<?php echo $imageurl; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" alt="<?php echo $row['it_name']; ?>" id="largeimage_<?php echo $i; ?>">
+            </a>
+        </span>
+        <?php
+            }
+        }
+        ?>
+    </div>
+
+    <?php
+    $total_count = count($thumbnails);
+    $thumb_count = 0;
+    if($total_count > 0) {
+        echo '<ul>';
+        foreach($thumbnails as $key=>$val) {
+            echo '<li><a href="'.G5_SHOP_URL.'/largeimage.php?it_id='.$it_id.'&amp;no='.$key.'" class="img_thumb">'.$val.'</a></li>';
+        }
+        echo '</ul>';
+    }
+    ?>
+
+    <div class="win_btn">
+        <button type="button" onclick="javascript:window.close();">창닫기</button>
+    </div>
+</div>
+
+<script>
+$(function(){
+    // 창 사이즈 조절
+    var w = <?php echo $size[0]; ?> + 50;
+    var h = <?php echo $size[1]; ?> + 210;
+    window.resizeTo(w, h);
+
+    $("#sit_pvi_nwbig span:eq("+<?php echo ($no - 1); ?>+")").addClass("visible");
+
+    // 이미지 미리보기
+    $(".img_thumb").bind("mouseover focus", function(){
+        var idx = $(".img_thumb").index($(this));
+        $("#sit_pvi_nwbig span.visible").removeClass("visible");
+        $("#sit_pvi_nwbig span:eq("+idx+")").addClass("visible");
+    });
+});
+</script>