From 5f638ea8a040146b5aba0802d28ace9aa130c89d Mon Sep 17 00:00:00 2001
From: chicpro <chicpro@gmail.com>
Date: Fri, 10 May 2013 13:32:17 +0900
Subject: [PATCH] =?UTF-8?q?=EC=83=81=ED=92=88=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=20=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=8D=94=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/mobile_shop.css  |  8 +++----
 mobile/shop/item.php | 56 ++++++++++++++++++++++++++++++--------------
 2 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/css/mobile_shop.css b/css/mobile_shop.css
index 84922e124..b2249f198 100644
--- a/css/mobile_shop.css
+++ b/css/mobile_shop.css
@@ -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}
 
 /* 장바구니 */
diff --git a/mobile/shop/item.php b/mobile/shop/item.php
index 47cde1df3..df5e2cae6 100644
--- a/mobile/shop/item.php
+++ b/mobile/shop/item.php
@@ -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>