테스트 사이트 - 개발 중인 베타 버전입니다

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

klee 5년 전 조회 1,777

안녕하세요 영카트  제품 마우스 오버시 두번째 이미지 보여주기 https://sir.kr/yc5_tip/908">https://sir.kr/yc5_tip/908 를 응용해서 

 

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

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

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

 

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

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

 

</p>

<p><?php

if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가</p>

<p>// 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);</p>

<p>?></p>

<p><script src="<?php echo G5_JS_URL ?>/jquery.fancylist.js"></script>

<?php if($config['cf_kakao_js_apikey']) { ?>

<script src="<a href="https://developers.kakao.com/sdk/js/kakao.min.js"></script>" target="_blank" rel="noopener noreferrer">https://developers.kakao.com/sdk/js/kakao.min.js"></script></a>

<script src="<?php echo G5_JS_URL; ?>/kakaolink.js"></script>

<script>

    // 사용할 앱의 Javascript 키를 설정해 주세요.

    Kakao.init("<?php echo $config['cf_kakao_js_apikey']; ?>");

</script>

<?php } ?>

<div ></p>

<p><!-- 상품진열 10 시작 { -->

<?php</p>

<p>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";

        }

    }</p>

<p>    echo "<li class=\"sct_li{$li_clear}\">\n";</p>

<p>    if ($this->href) {

        echo "<div class=\"sct_img\"><a href=\"{$this->href}{$row['it_id']}\" class=\"sct_a\">\n";

    }</p>

<p>    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";

    }</p>

<p>

    if ($this->view_it_id) {

        echo "<div class=\"sct_id\"><".stripslashes($row['it_id'])."></div>\n";

    }</p>

<p>     echo "<div class=\"sct_txt\">\n";</p>

<p>//    if ($this->href) {

//        echo "<a href=\"{$this->href}{$row['it_id']}\" class=\"sct_a\">\n";

//    }</p>

<p>    if ($this->view_it_name) {

        echo stripslashes($row['it_name'])."\n";

    }

//

//    if ($this->href) {

//        echo "</a>\n";

//    }</p>

<p>//    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";

//    }</p>

<p>    echo "</div>\n";

    echo "</li>\n";

}</p>

<p>if ($i > 0) echo "</ul>\n";</p>

<p>if($i == 0) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\n";

?>

</div></p>

<p><!-- 제품 이미지 마우스 오버 처리  -->

<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"));

    });

    

}); </p>

<p>//-->

</script>

<!-- 제품 이미지 마우스 오버 처리 완료  --></p>

<p>

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

<p>

<?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;</p>

<p>    if(!$it_id || !$width)

        return '';</p>

<p>    $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);</p>

<p>    if(!$row['it_id'])

        return '';</p>

<p>    $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];</p>

<p>            if($img_width && !$height) {

                $height = round(($width * $img_height) / $img_width);

            }</p>

<p>            //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;

}</p>

<p>

?>

 </p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

댓글을 작성하려면 로그인이 필요합니다.

H
5년 전
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인