상품출력 탭이동 및 blendTrans로 겹치면서 롤링하는

강백호   
   조회 5659  

http://www.designbook.co.kr/ (858)

 
 
영카트 상품출력중 메인에 리스트중 맘에 드는것이 없어서 만들어 봤습니다.
 
 
위에 회색점을 클릭하면 해당탭에 제품이 보이고 가만히 놓아두면 4초에 한탭씩 롤링됩니다.
 
위에 이미지처럼 바뀐다고 보면 됩니다.
 
maintype으로 만들지는 못하겠고 걍 shop.lib.php에 출력유형을 3개 만들고
 
4칸에 2줄짜리 3개 롤링으로 24개를 노출시키는 겁니다.
 
 
 
갯수를 늘리거나 하시고 싶으면 indexMain2.js와 아래 shop.lib.php에서 조정하시면 됩니다.
 
 
 
 
 
 
lib/shop.lib.php 에 아래에 코드를 첨가하고

// 출력유형1
// 1.02.01 $ca_id 추가
function display_1($type, $skin_file, $list_mod, $list_row, $img_width, $img_height, $ca_id="")
{
 global $member, $g4;
    // 상품의 갯수
    $items = $list_mod * $list_row;
    // 1.02.00
    // it_order 추가
    $sql = " select *
               from $g4[yc4_item_table]
              where it_use = '1'
                and it_type{$type} = '1' ";
    if ($ca_id) $sql .= " and ca_id like '$ca_id%' ";
    $sql .= " order by it_time desc, it_order, it_id desc limit 0, 8 ";
    $result = sql_query($sql);
    if (!mysql_num_rows($result)) {
        return false;
    }
    $file = "$g4[shop_path]/$skin_file";
    if (!file_exists($file)) {
        echo "<span class=point>{$file} 파일을 찾을 수 없습니다.</span>";
    } else {
        $td_width = (int)(100 / $list_mod);
        include $file;
    }
}

// 출력유형2
// 1.02.01 $ca_id 추가
function display_2($type, $skin_file, $list_mod, $list_row, $img_width, $img_height, $ca_id="")
{
 global $member, $g4;
    // 상품의 갯수
    $items = $list_mod * $list_row;
    // 1.02.00
    // it_order 추가
    $sql = " select *
               from $g4[yc4_item_table]
              where it_use = '1'
                and it_type{$type} = '1' ";
    if ($ca_id) $sql .= " and ca_id like '$ca_id%' ";
    $sql .= " order by it_time desc, it_order, it_id desc limit 8, 8 ";
    $result = sql_query($sql);
    if (!mysql_num_rows($result)) {
        return false;
    }
    $file = "$g4[shop_path]/$skin_file";
    if (!file_exists($file)) {
        echo "<span class=point>{$file} 파일을 찾을 수 없습니다.</span>";
    } else {
        $td_width = (int)(100 / $list_mod);
        include $file;
    }
}
 

// 출력유형3
// 1.02.01 $ca_id 추가
function display_3($type, $skin_file, $list_mod, $list_row, $img_width, $img_height, $ca_id="")
{
 global $member, $g4;
    // 상품의 갯수
    $items = $list_mod * $list_row;
    // 1.02.00
    // it_order 추가
    $sql = " select *
               from $g4[yc4_item_table]
              where it_use = '1'
                and it_type{$type} = '1' ";
    if ($ca_id) $sql .= " and ca_id like '$ca_id%' ";
    $sql .= " order by it_time desc, it_order, it_id desc limit 16, 8 ";
    $result = sql_query($sql);
    if (!mysql_num_rows($result)) {
        return false;
    }
    $file = "$g4[shop_path]/$skin_file";
    if (!file_exists($file)) {
        echo "<span class=point>{$file} 파일을 찾을 수 없습니다.</span>";
    } else {
        $td_width = (int)(100 / $list_mod);
        include $file;
    }
}
 
 
 
 
 
 

index.php  // 인덱스 히트상품 출력에 아래와 같이 넣었습니다.
탭이동시키는 이미지는 각자 만들면 됩니다.
(b_tab001.gif, b_tab001on.gif, b_tab002.gif, b_tab002on.gif, b_tab003.gif, b_tab003on.gif)
 
 
<script language="javascript" src="<?=$g4[path]?>/indexMain2.js"></script>
 <!-- // 메인 히트탭 시작 // -->
 <table width="465" height="291" border="0" cellspacing="0" cellpadding="0">  //가로세로 사이즈는 둘다 요기에 적용시켜 주세요.
<tr>
 <td style="padding-bottom:1">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td width="400" style="padding-right:1">&nbsp;</td>
   <td style="padding-right:1"><img src="<?=$g4[path]?>/image/b_tab001on.gif" name="tabBtn001" id="tabBtn001" width="10" height="10" border="0" style="cursor:pointer" onClick="switchMainIndexTab2('01');endMainIndexTab2()"></td>
   <td style="padding-right:1"><img src="<?=$g4[path]?>/image/b_tab002.gif" name="tabBtn002" id="tabBtn002" width="10" height="10" border="0" style="cursor:pointer" onClick="switchMainIndexTab2('02');endMainIndexTab2()"></td>
   <td style="padding-right:1"><img src="<?=$g4[path]?>/image/b_tab003.gif" name="tabBtn003" id="tabBtn003" width="10" height="10" border="0" style="cursor:pointer" onClick="switchMainIndexTab2('03');endMainIndexTab2()"></td>
  </tr>
  </table>
 </td>
</tr>
<tr>
 <td valign="top" height="291"> //세로 사이즈를 요기에도 넣어주세요.
  <!-- 히트1 START -->
  <div name="eventTab001" id="eventTab001" style="position:absolute; width:465px;margin:0 0 0 0;z-index:20;filter:blendTrans(duration=1);"> //blendTrans는 겹치면서 변하는 필터입니다. (duration=1) 더 빨리 겹치면서 변화하고 싶으시면 0.1~1 더 겹치는 변화를 크게 하시려면 1이상으로 넣어 주세요.
   <?
                // 히트상품1
                $type = 1;
                if ($default["de_type{$type}_list_use"])
                {
                    display_1($type, $default["de_type{$type}_list_skin"], $default["de_type{$type}_list_mod"], $default["de_type{$type}_list_row"], $default["de_type{$type}_img_width"], $default["de_type{$type}_img_height"]);
                }
  ?>
  
  </div>

  <!-- 히트2 START -->
  <div name="eventTab002" id="eventTab002" style="position:absolute; width:465px;margin:0 0 0 0;visibility:hidden;z-index:20;filter:blendTrans(duration=1);">
      <?
                // 히트상품2
                $type = 1;
                if ($default["de_type{$type}_list_use"])
                {
                    display_2($type,$default["de_type{$type}_list_skin"], $default["de_type{$type}_list_mod"], $default["de_type{$type}_list_row"], $default["de_type{$type}_img_width"], $default["de_type{$type}_img_height"]);
                }
  ?>
  </div>
  
  <!-- 히트3 START -->
  <div name="eventTab003" id="eventTab003" style="position:absolute; width:465px;margin:0 0 0 0;visibility:hidden;z-index:20;filter:blendTrans(duration=1);">
    <?
                // 히트상품3
                $type = 1;
                if ($default["de_type{$type}_list_use"])
                {
                    display_3($type, $default["de_type{$type}_list_skin"], $default["de_type{$type}_list_mod"], $default["de_type{$type}_list_row"], $default["de_type{$type}_img_width"], $default["de_type{$type}_img_height"]);
                }
  ?> 
  </div>
<script language="javascript">
// 탭 스크롤링 시작
startMainIndexTab2();
</script>
</td>
</tr>
</table>
제본,고객맞춤제본 열림프린팅
가격품질우수, 최신설비, 차원이 다른 후가공 3D엑폭시, 인쇄부분 고객만족 대상!
프린트마루
신분당선 판교역 1번출구, 24시간예약서비스, 고품질 제안서 출력 및 제본
싸고 제본 잘하는 프린트모아
인쇄부분 고객만족대상, 2400 DPI, 중철, 링,무선, 긴급제본, 오픈이벤트
파워링크 AD   클릭초이스등록
불당 2007-12
ㅎㅎ... 시간이 없어서 그런지 눈에 잘 안들어오네요.

나중에 이것에 ajax로 상품 상세정보랑 큰 이미지를 보여주는 기능을 넣어보구 싶네요.


제목Page 1/5
2016-08   28206   불당
2016-07   37725   불당
2015-09   63916   불당
2015-10   64734   불당
2015-09   63619   불당
2007-05   7685   불당
2007-03   7528   불당
2007-03   9377   불당
2014-10   2132   동행
2014-01   3942   불당
2014-01   3048   불당
2009-01   27   불당
2008-01   5190   푸름빠덜
2007-12   5660   강백호
2007-11   5011   푸름빠덜
2007-09   4290   푸름빠덜
2007-07   4234   푸름빠덜
2007-07   6049   푸름빠덜
2007-07   629   불당
2007-07   4890   불당
2007-07   4043   불당
2007-06   6247   푸름빠덜
2007-06   4692  
2007-06   5308  
2007-06   7672  
2007-06   3800   불당
2007-05   773   불당
2007-05   10200   불당