모바일버전에서 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;
}
?>
답변 2
이벤트를 이것을 참조하세요.
https://stackoverflow.com/questions/37113082/detecting-hover-or-mouseover-on-smartphone-browser
여기를 보시면 될 듯요. 꼭 원하시는대로 구현하세요~
https://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/
답변을 작성하시기 전에 로그인 해주세요.