모바일버전에서 main.20.skin.php 리스트 이미지 image_over 질문

모바일버전에서 main.20.skin.php 리스트 이미지 image_over 질문

QA

모바일버전에서 main.20.skin.php 리스트 이미지 image_over 질문

본문

안녕하세요 영카트 

제품 마우스 오버시 두번째 이미지 보여주기 https://sir.kr/yc5_tip/908 를 응용해서 

 

영카트의 모바일버전 main.20.skin.php 의 이미지 오버효과를 주고싶은데요 

pc버전에서는 커서만 가져놓아도 바뀌는데 모바일에서는 클릭시에만 이미지가 바뀌네요  

클릭을하지않고 손가락만 갔다댖을때 이미지가 바뀌는 효과를 주고싶은데요 

 

get_it_image_over 대신 다른 명령어를 넣으면 될까요? get_it_image_tab? 뭐 이런식으로? 

모바일버전에서 상품리스트 이미지변경효과를 어떻게 넣는지 궁금합니다. 

 


<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
//add_stylesheet('<link rel="stylesheet" href="'.G5_MSHOP_SKIN_URL.'/style.css">', 0);
add_javascript('<script src="'.G5_THEME_JS_URL.'/jquery.flexslider-min.js"></script>', 10);
?>
<script src="<?php echo G5_JS_URL ?>/jquery.fancylist.js"></script>
<?php if($config['cf_kakao_js_apikey']) { ?>
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script src="<?php echo G5_JS_URL; ?>/kakaolink.js"></script>
<script>
    // 사용할 앱의 Javascript 키를 설정해 주세요.
    Kakao.init("<?php echo $config['cf_kakao_js_apikey']; ?>");
</script>
<?php } ?>
<div >
<!-- 상품진열 10 시작 { -->
<?php
for ($i=0; $row=sql_fetch_array($result); $i++) {
    if ($i == 0) {
        if ($this->css) {
            echo "<ul id=\"sct_wrap\" class=\"{$this->css}\">\n";
        } else {
            echo "<ul id=\"sct_wrap\" class=\"sct sct_20 slides\">\n";
        }
    }
    echo "<li class=\"sct_li{$li_clear}\">\n";
    if ($this->href) {
        echo "<div class=\"sct_img\"><a href=\"{$this->href}{$row['it_id']}\" class=\"sct_a\">\n";
    }
    if ($this->view_it_img) {
        //echo get_it_image($row['it_id'], $this->img_width, $this->img_height, '', '', stripslashes($row['it_name']))."\n";
        //get it imag 변경
        echo get_it_image_over($row['it_id'], $this->img_width, $this->img_height, '', '', stripslashes($row['it_name']))."\n";
    }
    if ($this->href) {
        echo "</a></div>\n";
    }

    if ($this->view_it_id) {
        echo "<div class=\"sct_id\"><".stripslashes($row['it_id'])."></div>\n";
    }
     echo "<div class=\"sct_txt\">\n";
//    if ($this->href) {
//        echo "<a href=\"{$this->href}{$row['it_id']}\" class=\"sct_a\">\n";
//    }
    if ($this->view_it_name) {
        echo stripslashes($row['it_name'])."\n";
    }
//
//    if ($this->href) {
//        echo "</a>\n";
//    }
//    if ($this->view_it_price) {
//        echo "<span class=\"sct_cost\">\n";
//        echo display_price(get_price($row), $row['it_tel_inq'])."\n";
 //       echo "</span>\n";
//    }
    echo "</div>\n";
    echo "</li>\n";
}
if ($i > 0) echo "</ul>\n";
if($i == 0) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\n";
?>
</div>
<!-- 제품 이미지 마우스 오버 처리  -->
<script type="text/javascript">
<!--
    jQuery(document).ready(function(){
    /*fade */
    /*
    jQuery(".image_change").on("mouseenter",function(){
        var src = jQuery(this).attr("data-val2"); 
        jQuery(this).fadeOut('fast' , function(){jQuery(this).attr("src", src)}); 
        jQuery(this).fadeIn('fast'); 
        
    });
    jQuery(".image_change").on("mouseleave",function(){
        var src = jQuery(this).attr("data-val1");    
        jQuery(this).fadeOut('fast' , function(){jQuery(this).attr("src", src)});
        jQuery(this).fadeIn('fast'); 
    });
    /*
    /*바로 변경 주석 을 제거하시고 위의 fade 를 주석처리하세요 */
    
    jQuery(".image_change").on("mouseenter",function(){
        jQuery(this).attr("src", jQuery(this).attr("data-val2"));
        
    });
    jQuery(".image_change").on("mouseleave",function(){
        jQuery(this).attr("src", jQuery(this).attr("data-val1"));
    });
    
}); 
//-->
</script>
<!-- 제품 이미지 마우스 오버 처리 완료  -->

<!-- } 상품진열 10 끝 -->

<?php 
// 상품 이미지를 얻는다 get_it_image : shop.lib 에 get_it_image 변경
function get_it_image_over($it_id, $width, $height=0, $anchor=false, $img_id='', $img_alt='', $is_crop=false)
{
    global $g5;
    if(!$it_id || !$width)
        return '';
    $sql = " select it_id, it_img1, it_img2, it_img3, it_img4, it_img5, it_img6, it_img7, it_img8, it_img9, it_img10 from {$g5['g5_shop_item_table']} where it_id = '$it_id' ";
    $row = sql_fetch($sql);
    if(!$row['it_id'])
        return '';
    $img_array=array();
    $k=0;
    for($i=1;$i<=10; $i++) {
        $file = G5_DATA_PATH.'/item/'.$row['it_img'.$i];
        if(is_file($file) && $row['it_img'.$i]) {
            $size = @getimagesize($file);
            if($size[2] < 1 || $size[2] > 3)
                continue;
        
            $img_array[$k][filename] = basename($file);
            $img_array[$k][filepath] = dirname($file);
            $img_array[$k][img_width] = $size[0];
            $img_array[$k][img_height] = $size[1];
            $k++;
            if($k>1){
                break;
            }
        }
    }
    $counter=$k;
    if($counter)
    {
        for($i=0;$i<$counter;$i++)
        {
            $filename=$img_array[$i][filename];
            $filepath=$img_array[$i][filepath];
            $img_width=$img_array[$i][img_width];
            $img_height=$img_array[$i][img_height];
            if($img_width && !$height) {
                $height = round(($width * $img_height) / $img_width);
            }
            //thumbnail($filename, $source_path, $target_path, $thumb_width, $thumb_height, $is_create, $is_crop=false, $crop_mode='center', $is_sharpen=true, $um_value='80/0.5/3')
            $thumb = thumbnail($filename, $filepath, $filepath, $width, $height, false, $is_crop, 'center', false, $um_value='80/0.5/3');
    
            if(!$i){
                $file_url = str_replace(G5_PATH, G5_URL, $filepath.'/'.$thumb);
                $img .= '<img src="'.$file_url.'" width="'.$width.'" height="'.$height.'" alt="'.$img_alt.'" data-val1="'.$file_url.'"';
            }
            else{
                $file_url = str_replace(G5_PATH, G5_URL, $filepath.'/'.$thumb);
                $img .= ' data-val2="'.$file_url.'" class="image_change" ';
            }
        }
        if($img_id){
            $img .= ' id="'.$img_id.'"';
        }
        $img .= '>';        
    }
    else
    {    
        $img = '<img src="'.G5_SHOP_URL.'/img/no_image.gif" width="'.$width.'"  ';
        if($height){
            $img .= ' height="'.$height.'"';
            $img .= ' alt="'.$img_alt.'"';
        }
        if($img_id)
            $img .= ' id="'.$img_id.'"';
        $img .= '>';
    }
    if($anchor){
        $img = '<a href="'.G5_SHOP_URL.'/item.php?it_id='.$it_id.'">'.$img.'</a>';
    }
    return $img;
}

?>
 

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 123,122 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT