영카트 리스트에서 두번째 이미지 overlay 소소한 팁

영카트로 쇼핑몰 제작하면서 메인에 제품 이미지를 가져올 때 

마우스 오버시 2번째 이미지를 보여주는 소스를 만들기위해 검색 중 비슷한 팁들이 있긴 했지만

소스코드가 길어지고 새로운 함수를 제작해야 하는 소스밖에 없더라구요ㅋ (제가 못찾은걸 수도 있음 ㅋ)

그래서 이미 잘 제작되어 있는 함수를 이용하여  꼼수로 제작한 코드를 공유합니다.

부족하지만 필요하신 분들에게 도움이 되었으면 합니다.

혹시 사용 중 오류가 있다면 댓글 남겨주세요!!

= 설명 =

이미지가 저장되는 규칙적인 패턴을 이용했습니다.

보통 data 폴더에 저장되는 패턴이 thumb-시작하며, 사이즈별로 여러개가 저장됩니다. 예를 들어

thumb-img_detail_031_60x60.jpg 

thumb-img_detail_031_70x70.jpg 

thumb-img_detail_031_300x300.jpg 

이런 규칙으로 저장됨

※ 중요!

data 폴더에 규칙적인 패턴으로 이미지가 저장되는 것을 이용하여 제작하였습니다. 만약 저장되는 패턴이

변경 된다면 제가 만들 소스는 오류가 생길 수 있습니다.

2번째 이미지를 가져오는 예시 입니다.

main.10.skin.php 

if ($this->view_it_img) {

//n번째 이미지를 가져온다

$n_thumb = get_it_thumbnail($row['it_img2'], 70, 70); // 숫자를 맞춰준다

//thumb- 시작, _70으로 끝 사이에 텍스트 추출

preg_match('/thumb-(.*?)_70/', $n_thumb, $match); // 위에 가져온 사이즈를 반드시 맞춰준다

$overlay_img =  G5_DATA_URL . "/item/" . $row['it_id'] . "/" . $match[1] . ".jpg";

if ($n_thumb) {//n번째 이미지가 있다면

echo '<div class="overlay_imgWrap">' . PHP_EOL;

}

echo '<img src="' . get_it_imageurl($row['it_id']) . '" alt="' . stripslashes($row['it_name']) . '">';

if ($n_thumb) { //2번째 이미지가 있을 경우만 출력

    echo '<div class="overlay_img" style="background-image:url(' . $overlay_img . ')"></div>';

echo '</div>' . PHP_EOL;;

}

}

css

/* over lay img */

.overlay_imgWrap{ overflow: hidden; position: relative;}

.overlay_imgWrap img{}

.overlay_imgWrap img, .overlay_imgWrap .overlay_img{transition: opacity .4s ease-out, transform 0.4s ease-out;}

.overlay_imgWrap .overlay_img{

    opacity: 0; position: absolute; left: 0; top: 0;

    background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;

    width:100%; height: 100%;

}

.overlay_imgWrap:hover > img, .overlay_imgWrap:hover .overlay_img{transform: scale(1.1);}

.overlay_imgWrap:hover img{ opacity: 0;}

.overlay_imgWrap:hover .overlay_img{ opacity: 1;}