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

강백호   
   조회 5581  

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

 
 
영카트 상품출력중 메인에 리스트중 맘에 드는것이 없어서 만들어 봤습니다.
 
 
위에 회색점을 클릭하면 해당탭에 제품이 보이고 가만히 놓아두면 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>
튼튼한 제본전문, 프린트모아
소량제본, 중철,링,무선, 당일출고, 인쇄부분 고객만족대상, 2400 DPI
승화전사전문기업 제이엔스토어
승화전사용품 프린터 프레스 잉크 전사지 머그컵 다양한소재의 액자 학교 공방체험활동
카피마루 출력소
고품질칼라,흑백출력,제본,제안서,PT,교재,문집,카피북중철,동인행사, 서초구방배동
파워링크 AD   클릭초이스등록
불당 2007-12
ㅎㅎ... 시간이 없어서 그런지 눈에 잘 안들어오네요.

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


제목Page 1/5
2015-11   44583   불당
2016-08   25621   불당
2015-09   58625   불당
2014-06   110885   불당
2015-09   61048   불당
2007-03   7429   불당
2007-03   7809   불당
2007-05   7583   불당
2014-10   2047   동행
2014-01   3843   불당
2014-01   2973   불당
2009-01   27   불당
2008-01   5119   푸름빠덜
2007-12   5582   강백호
2007-11   4927   푸름빠덜
2007-09   4216   푸름빠덜
2007-07   4175   푸름빠덜
2007-07   5969   푸름빠덜
2007-07   629   불당
2007-07   4807   불당
2007-07   3991   불당
2007-06   6129   푸름빠덜
2007-06   4627  
2007-06   5230  
2007-06   7593  
2007-06   3734   불당
2007-05   773   불당
2007-05   9806   불당