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

쇼핑몰: #272 애니메이션 스킨 재생 정지 버튼 추가

Browse Source
This commit is contained in:
whitedot
2013-08-09 10:41:58 +09:00
parent 9b5a029720
commit 09719c3248
8 changed files with 62 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
css/default_shop.css
View File

@ -167,14 +167,6 @@ a:hover, a:focus, a:active {color:#000;text-decoration:underline}
#text_size {display:none;position:absolute;top:-31px;left:-1px}
#text_size button {padding:0 10px;height:30px;border:1px solid #cfded8;border-bottom:0;background:#000;color:#fff;cursor:pointer}
/* 목록 바로가기 */
.sanchor {margin:0 0 10px;padding:0;zoom:1}
.sanchor:after {display:block;visibility:hidden;clear:both;content:""}
.sanchor li {float:left;margin-left:-1px;list-style:none}
.sanchor a {display:inline-block;border:1px solid #e9e9e9;background:#f5f6fa;padding:0 7px;height:30px;text-decoration:none;line-height:2.6em}
.sanchor a:focus, .sanchor a:hover {background:#626870;color:#fff;text-decoration:none}
a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none}
/* 하단 레이아웃 */
#ft {clear:both;padding:0 0 40px;border-top:1px solid #e9e9e9}
#ft h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
@ -189,12 +181,32 @@ a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none}
#ft b {display:inline-block;margin:0 5px 0 0}
#ft_totop {position:absolute;top:20px;right:0}
/* Modal Layer */
#win_mask {display:none;z-index:9999;position:absolute;top:0;left:0;background:#000}
/* Mobile화면으로 */
#mobile_cng {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center}
/* 재생/정지/이전/다음 버튼 */
.sctrl {margin:0;padding:0;list-style:none;zoom:1}
.sctrl:after {display:block;visibility:hidden;clear:both;content:""}
.sctrl li {position:relative;float:left;margin:0 0 0 -1px}
.sctrl button {position:relative;margin:0;padding:0;width:25px;height:25px;border:0;cursor:pointer}
.sctrl button span {position:absolute;top:0;left:0;width:23px;height:23px;border:1px solid #ccc;background:url('../shop/img/is_button.gif')}
.sctrl button.sctrl_play span {background-position:-60px 0}
.sctrl button.sctrl_play span.sctrl_on {background-position:-60px -30px}
.sctrl button.sctrl_stop span {background-position:-90px 0}
.sctrl button.sctrl_stop span.sctrl_on {background-position:-90px -30px}
.sctrl button.sctrl_prev span {background-position:-120px 0}
.sctrl button.sctrl_prev span.sctrl_on {background-position:-120px -30px}
.sctrl button.sctrl_next span {background-position:-150px 0}
.sctrl button.sctrl_next span.sctrl_on {background-position:-150px -30px}
/* 목록 바로가기 */
.sanchor {margin:0 0 10px;padding:0;zoom:1}
.sanchor:after {display:block;visibility:hidden;clear:both;content:""}
.sanchor li {float:left;margin-left:-1px;list-style:none}
.sanchor a {display:inline-block;border:1px solid #e9e9e9;background:#f5f6fa;padding:0 7px;height:30px;text-decoration:none;line-height:2.6em}
.sanchor a:focus, .sanchor a:hover {background:#626870;color:#fff;text-decoration:none}
.sanchor a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none}
/* 콘텐츠별 스타일 */
.cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold}
/* 버튼 */
@ -371,7 +383,7 @@ td.empty_table {padding:85px 0;text-align:center}
/* 상품 리스트 스타일 선택 */
#sct_lst {float:right;margin:0 0 10px;letter-spacing:-5px}
#sct_lst button {position:relative;margin:0;padding:0;width:25px;height:25px;border:0;cursor:pointer}
#sct_lst button span {position:absolute;top:0;left:0;width:23px;height:23px;border:1px solid #ccc;background:url('../shop/img/is_list_style.gif')}
#sct_lst button span {position:absolute;top:0;left:0;width:23px;height:23px;border:1px solid #ccc;background:url('../shop/img/is_button.gif')}
#sct_lst button.sct_lst_list span {background-position:0 0}
#sct_lst button.sct_lst_list span.sct_lst_on {background-position:0 -30px}
#sct_lst button.sct_lst_gallery span {background-position:-30px 0}

BIN
shop/img/is_button.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 646 B

BIN
shop/img/is_list_style.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 318 B

9
skin/shop/basic/main.20.skin.php
View File

@ -9,6 +9,15 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
<link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
<!-- 이전 재생 정지 다음 버튼 시작 { -->
<ul class="sctrl">
<li><button type="button" class="sctrl_prev">이전<span></span></button></li>
<li><button type="button" class="sctrl_play">효과재생<span></span></button></li>
<li><button type="button" class="sctrl_stop">효과정지<span></span></button></li>
<li><button type="button" class="sctrl_next">다음<span></span></button></li>
</ul>
<!-- } 이전 재생 정지 다음 버튼 끝 -->
<!-- 상품진열 20 시작 { -->
<?php
for ($i=1; $row=sql_fetch_array($result); $i++) {

9
skin/shop/basic/main.30.skin.php
View File

@ -9,6 +9,15 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
<link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
<!-- 이전 재생 정지 다음 버튼 시작 { -->
<ul class="sctrl">
<li><button type="button" class="sctrl_prev">이전<span></span></button></li>
<li><button type="button" class="sctrl_play">효과재생<span></span></button></li>
<li><button type="button" class="sctrl_stop">효과정지<span></span></button></li>
<li><button type="button" class="sctrl_next">다음<span></span></button></li>
</ul>
<!-- } 이전 재생 정지 다음 버튼 끝 -->
<!-- 상품유형 30 시작 { -->
<?php
for ($i=1; $row=sql_fetch_array($result); $i++) {

9
skin/shop/basic/main.40.skin.php
View File

@ -9,6 +9,15 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
<link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
<!-- 이전 재생 정지 다음 버튼 시작 { -->
<ul class="sctrl">
<li><button type="button" class="sctrl_prev">이전<span></span></button></li>
<li><button type="button" class="sctrl_play">효과재생<span></span></button></li>
<li><button type="button" class="sctrl_stop">효과정지<span></span></button></li>
<li><button type="button" class="sctrl_next">다음<span></span></button></li>
</ul>
<!-- } 이전 재생 정지 다음 버튼 끝 -->
<!-- 상품진열 40 시작 { -->
<?php
for ($i=1; $row=sql_fetch_array($result); $i++) {

9
skin/shop/basic/main.50.skin.php
View File

@ -8,6 +8,15 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
<link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
<!-- 이전 재생 정지 다음 버튼 시작 { -->
<ul class="sctrl">
<li><button type="button" class="sctrl_prev">이전<span></span></button></li>
<li><button type="button" class="sctrl_play">효과재생<span></span></button></li>
<li><button type="button" class="sctrl_stop">효과정지<span></span></button></li>
<li><button type="button" class="sctrl_next">다음<span></span></button></li>
</ul>
<!-- } 이전 재생 정지 다음 버튼 끝 -->
<!-- 상품진열 50 시작 { -->
<?php
for ($i=1; $row=sql_fetch_array($result); $i++) {

3
skin/shop/basic/style.css
View File

@ -3,7 +3,8 @@
/* ##### main(nn).skin.php, list.(nn).skin.php 공통 적용 시작 ##### */
/* 공통 */
.sct_wrap {margin:0 0 30px;zoom:1}
.sct_wrap {position:relative;margin:0 0 30px;zoom:1}
.sct_wrap .sctrl {position:absolute;top:0;right:0} /* 애니메이션 효과 사용 시 재생 정지 버튼 등 */
.sct_wrap:after {display:block;visibility:hidden;clear:both;content:""}
.sct_wrap header {margin:0 0 20px;zoom:1}
.sct_wrap header:after {display:block;visibility:hidden;clear:both;content:""}