|
|
@@ -0,0 +1,626 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ko"
|
|
|
+ xmlns:th="http://www.thymeleaf.org">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : GoodsDetailImageForm.html
|
|
|
+ * @desc : 상품 이미지 보기 화면(상품 이미지 정보(열))
|
|
|
+ *============================================================================
|
|
|
+ * SISUN
|
|
|
+ * Copyright(C) 2019 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2019.12.27 eskim 최초 작성
|
|
|
+ * 2.0 2020.06.09 eskim 수정
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+ <div class="modalPopup" >
|
|
|
+ <!-- PANELSTYLE -->
|
|
|
+ <div class="panelStyle">
|
|
|
+ <!-- TITLE -->
|
|
|
+ <div class="panelTitle">
|
|
|
+ <h2>상품 이미지 수정</h2>
|
|
|
+ <button type="button" class="close" onclick="fnGoodsImgFormClose()"><i class="fa fa-times"></i></button>
|
|
|
+ </div>
|
|
|
+ <!-- //TITLE -->
|
|
|
+ <!-- CONTENT -->
|
|
|
+ <div class="panelContent">
|
|
|
+
|
|
|
+ <ul class="notice">
|
|
|
+ <li>[업로드/수정] 버튼 클릭 하면 프론트에 바로 적용되므로 최종 확인 후 전송을 권장합니다.</li>
|
|
|
+ <li>이미지 미리보기 리스트는 <em>업로드 후</em> 확인 할 수 있습니다.</li>
|
|
|
+ <li>이미지보기 버튼은 이미지 파일 <em>등록 후</em> 확인 할 수 있습니다. 이미 <em>업로드 된</em> 파일은 확인 할 수 없습니다.(파일 크기 옆 화살표로 구분 가능합니다.)</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <table class="frmStyle">
|
|
|
+ <colgroup>
|
|
|
+ <col width="100px"/>
|
|
|
+ <col/>
|
|
|
+ <col width="100px"/>
|
|
|
+ <col/>
|
|
|
+ <col width="100px"/>
|
|
|
+ <col/>
|
|
|
+ </colgroup>
|
|
|
+ <tr>
|
|
|
+ <th>컬러명</th>
|
|
|
+ <td>PINK</td>
|
|
|
+ <td colspan="4"></td>
|
|
|
+ <!-- <th>대표 이미지순번</th>
|
|
|
+ <td><input type="text" value="1"/></td>
|
|
|
+ <th>마우스오버 이미지순번</th>
|
|
|
+ <td><input type="text" value="2"/></td> -->
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>이미지등록</th>
|
|
|
+ <td class="dexterArea">
|
|
|
+
|
|
|
+ <!-- 덱스터 테이블 영역 -->
|
|
|
+ <ul class="dexterTable">
|
|
|
+ <li class="dexterNo">
|
|
|
+ <!-- 덱스터 테이블 번호 -->
|
|
|
+ <div>1</div><div>2</div><div>3</div><div>4</div>
|
|
|
+ <!-- //덱스터 테이블 번호 -->
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <!-- 덱스터 테이블 삽입 -->
|
|
|
+ 덱스터 테이블 삽입<br/>공간은 테이블 넓이에 따라 자동으로 넓어집니다.<br/>
|
|
|
+ (최소 넓이 : 350px로 설정됨)<br/>
|
|
|
+ <!-- //덱스터 테이블 -->
|
|
|
+ <li>
|
|
|
+ </ul>
|
|
|
+ <!-- //덱스터 테이블 영역 -->
|
|
|
+
|
|
|
+ </td>
|
|
|
+ <td colspan="4" class="verticalTop">
|
|
|
+
|
|
|
+ <!-- 이미지 카드 영역 -->
|
|
|
+ <div class="cardArea">
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ <!-- 이미지 카드 -->
|
|
|
+ <div class="imgCard">
|
|
|
+ <button type="button" class="cardClose">닫기</button>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
|
|
|
+ </li>
|
|
|
+ <li>이미지1</li>
|
|
|
+ </ul>
|
|
|
+ <p>G2019052800040_023_4(170330).jpg</p>
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 -->
|
|
|
+ </div>
|
|
|
+ <!-- //이미지 카드 영역 -->
|
|
|
+
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <!-- 버튼 배치 영역 -->
|
|
|
+ <ul class="panelBar marT10">
|
|
|
+ <li class="center">
|
|
|
+ <button type="button" class="btn btn-base btn-lg">파일 추가</button>
|
|
|
+ <button type="button" class="btn btn-default btn-lg">선택 삭제</button>
|
|
|
+ <button type="button" class="btn btn-default btn-lg">전체 삭제</button>
|
|
|
+ <button type="button" class="btn btn-info btn-lg">뒤로 이동</button>
|
|
|
+ <button type="button" class="btn btn-info btn-lg">아래로 이동</button>
|
|
|
+ <button type="button" class="btn btn-base btn-lg">이미지 보기</button>
|
|
|
+ <button type="button" class="btn btn-base btn-lg">업로드/수정</button>
|
|
|
+ <button type="button" class="btn btn-base btn-lg">저장하기</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <!-- //버튼 배치 영역 -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div class="panelStyle">
|
|
|
+ <div class="panelTitle">
|
|
|
+ <strong>상품 이미지 보기 <button type="button" class="btn icn" onclick="fnOpenCommentPopup('comment')" ><i class="fa fa-cog" aria-hidden="true"></i></button></strong>
|
|
|
+ <button type="button" class="close" onclick="fnGoodsImgFormClose()"><i class="fa fa-times"></i></button>
|
|
|
+ </div>
|
|
|
+ <div class="panelContent">
|
|
|
+ <form id="goodsImgForm" name="goodsImgForm" th:method="post">
|
|
|
+ <input type="hidden" id="goodsCd" name="goodsCd" th:value="${params.goodsCd}"/>
|
|
|
+ <table class="frmStyle" th:with="uploadGoodsUrl=${@environment.getProperty('upload.goods.view')},uxImgUrl=${@environment.getProperty('domain.uximage')}">
|
|
|
+ <colgroup>
|
|
|
+ <col width="75%"/>
|
|
|
+ <col width="25%"/>
|
|
|
+ </colgroup>
|
|
|
+ <tbody id="goodsImgList">
|
|
|
+ <tr>
|
|
|
+ <th class="aL vaT">imgPath1 : <th:block th:utext="${'필수: 상품코드_01.jpg<i class=star></i>'}"></th:block>
|
|
|
+ <hr/>
|
|
|
+ <input type="text" class="w100p" id="imgPath1" name="imgPath1" />
|
|
|
+ </th>
|
|
|
+ <td>
|
|
|
+ <img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/image/no.gif'}+'\';'" width="200px"/>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <ul class="panelBar">
|
|
|
+ <th:block th:if="${sessionInfo.roleCd == 'G001_0000' OR sessionInfo.roleCd == 'G001_A000' OR sessionInfo.roleCd == 'G001_A101' OR sessionInfo.roleCd == 'G001_A100' OR sessionInfo.roleCd == 'G001_A001'}">
|
|
|
+ <button type="button" class="btn btnRight btn-success btn-lg" id="btnGoodsDetailImgSave">저장</button>
|
|
|
+ </th:block>
|
|
|
+ </ul>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+<script th:inline="javascript">
|
|
|
+/*<![CDATA[*/
|
|
|
+ var fileExtension = [[${@environment.getProperty('upload.goods.allow.extension')}]];
|
|
|
+
|
|
|
+ //상품이미지 저정버튼 클릭 시
|
|
|
+ $('#btnGoodsDetailImgSave').click(function(e) {
|
|
|
+ if ($("#goodsImgForm").find("#goodsImgList tr").length == 0){
|
|
|
+ /* mcxDialog.alert('', function(){
|
|
|
+
|
|
|
+ });
|
|
|
+ return false; */
|
|
|
+ }
|
|
|
+ var optCheck = false;
|
|
|
+ var imgType = $('#goodsImgForm input[name=imgType]').val();
|
|
|
+
|
|
|
+ $("#goodsImgForm").find("#goodsImgList tr").each(function() {
|
|
|
+ var size = 30;
|
|
|
+
|
|
|
+ for(i=0;i<size;i++){
|
|
|
+ var imgVal = $("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1) +"]").val();
|
|
|
+
|
|
|
+ if(!gagajf.isNull(imgVal)){
|
|
|
+ var reg = "\.("+fileExtension+")$";
|
|
|
+ if(!(new RegExp(reg, "i")).test(imgVal)) {
|
|
|
+ optCheck = true;
|
|
|
+ mcxDialog.alertC('이미지는 ['+ fileExtension + '] 파일만 가능합니다.', {
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (imgVal.indexOf('\\"') > -1){
|
|
|
+ optCheck = true;
|
|
|
+ mcxDialog.alertC('["]는 입력할 수 없습니다.', {
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (imgVal.indexOf("\\'") > -1){
|
|
|
+ optCheck = true;
|
|
|
+ mcxDialog.alertC("[\\']는 입력할 수 없습니다.", {
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (imgType == "A"){
|
|
|
+ if (imgVal.indexOf("http") > -1){
|
|
|
+ optCheck = true;
|
|
|
+ mcxDialog.alertC("이미지 도메인은 입력할 수 없습니다.", {
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if (imgVal.indexOf("https") <= -1){
|
|
|
+ optCheck = true;
|
|
|
+ mcxDialog.alertC("이미지 도메인을 입력해 주세요.", {
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(i == 0){
|
|
|
+ optCheck = true;
|
|
|
+ mcxDialog.alertC("필수 상품이미지 입니다.", {
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ $("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if(optCheck) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ mcxDialog.confirm('저장하시겠습니까?', {
|
|
|
+ cancelBtnText: "취소",
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function(){
|
|
|
+ gagajf.ajaxFormSubmit("/goods/img/save", "#goodsImgForm", fnGoodsImgFormClose);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ //창종료
|
|
|
+ var fnGoodsImgFormClose = function(){
|
|
|
+ uifnPopupClose('popupGoodsImage');
|
|
|
+ }
|
|
|
+
|
|
|
+ //안내팝업
|
|
|
+ var fnOpenCommentPopup = function(id) {
|
|
|
+ var str = '<div class="popupWrap" id="'+id+'" style="z-index:30">';
|
|
|
+ str = str + '<div class="popup modeless ui-widget-content ui-draggable ui-draggable-handle" style="display: block; position: relative;">';
|
|
|
+ str = str + '<button type="button" class="close" onclick="uifnPopClose(\''+id+'\')"><i class="fa fa-times"></i></button>';
|
|
|
+ str = str + '<div class="mdPopContent">';
|
|
|
+ str = str + '<ul class="notice ">';
|
|
|
+ str = str + '<em><b>* 이미지 타입</b></em>';
|
|
|
+ str = str + '<li> <b>A</b> : <b>자사전용</b>(이미지 도메인명 없음)</li>';
|
|
|
+ str = str + ' ex) /P/PQS/PQS11TM24M_BU/1000/PQS11TM24M_BU_01.jpg';
|
|
|
+ str = str + '<li> <b>B</b> : <b>입점전용</b>(https를 포함한 이미지 전체 경로)</li>';
|
|
|
+ str = str + ' ex) <em>https:</em>//pastel.jpg2.kr/goods/LCCAJ334_IV_1.jpg';
|
|
|
+ str = str + '<li><b>IMG_PATH1 (<em>필수</em>)</b> : 상품코드_<b>01.jpg</li>';
|
|
|
+ str = str + '<li><b>IMG_PATH2 ~ IMG_PATH5</b> (선택) : 상품코드_<b>02</b>.jpg ~ 상품코드_<b>05</b>.jpg</li>';
|
|
|
+ str = str + '<li><b>IMG_PATH6 ~ IMG_PATH10</b> (선택, 화보컷) : 상품코드_<b>M1</b>.jpg ~ 상품코드_<b>M5</b>.jpg</li>';
|
|
|
+ str = str + '<li><b>IMG_PATH11 ~ IMG_PATH25</b> (선택, 상세컷) : 상품코드_<b>D1</b>.jpg ~ 상품코드_<b>D15</b>.jpg</li>';
|
|
|
+ str = str + '<li><b>IMG_PATH26 ~ IMG_PATH27</b> (선택, 라벨컷) : 상품코드_<b>R1</b>.jpg ~ 상품코드_<b>R2</b>.jpg</li>';
|
|
|
+ str = str + '<li><b>IMG_PATH28 ~ IMG_PATH30</b> (선택, 기타컷) : 상품코드_<b>E1</b>.jpg ~ 상품코드_<b>E3</b>.jpg</li>';
|
|
|
+ str = str + '</ul>';
|
|
|
+ str = str + '</div></div></div>';
|
|
|
+
|
|
|
+ if ($('#'+ id).length == 0) {
|
|
|
+ $('body').append(str);
|
|
|
+ }
|
|
|
+ $("#"+id).css({display:"block"});
|
|
|
+ }
|
|
|
+/*]]>*/
|
|
|
+</script>
|
|
|
+</html>
|