첨부 이미지를 View스킨에서 쇼핑몰 상품이미지출력처럼 하기 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

첨부 이미지를 View스킨에서 쇼핑몰 상품이미지출력처럼 하기 정보

첨부 이미지를 View스킨에서 쇼핑몰 상품이미지출력처럼 하기

본문

스크립트는 옥X껄 훔쳐왔습니다;;
DB로 바로 쿼리 날려서 파일목록 뽑아 왔습니다.
첨부 이미지 3개 다올려야 자바스크립트 오류가 나지 않습니다..;;
3개 미만이라도 오류 안나게 연구좀 해야겠네요

더 늘려 주려면 스크립트도 수정해줘야 됩니다.  자바스크립트는 아는게 없어서 쩝;;
수정은 각 항목 원하는 만큼 추가하면 되는것이니 간단할겁니다.

스킨에 적용해 볼려면
view.skin.php
        <?
        // 파일 출력
        for ($i=0; $i<=count($view[file]); $i++)
{
            if ($view[file][$i][view])
                echo $view[file][$i][view] . "<p>";
        }
        ?>
이부분 삭제하시고 아래 소스 삽입해 보세요
디자인은 당연히 안되어 있습니다;;

이미지 크기도 그냥 테그로 줄여버립니다;;;;;;;
클릭해도 새창으로 안뜹니다.
이부분들은 추가해서 사용하시길;

되는거만 확인해보고 바로 올립니다.

<script>
//Table Size 조정
function ImageResizing(objFrame) {
if (!objFrame) return;

//height 조정
var conversionSize = 380;
var orgWidth = objFrame.width;
var orgHeight = objFrame.height;

if (( orgWidth > conversionSize) || (orgHeight > conversionSize)){
if (orgWidth > orgHeight){
newWidth = conversionSize;
newHeight = Math.round((conversionSize * orgHeight)/orgWidth);
}else{
newWidth = Math.round((conversionSize * orgWidth)/orgHeight);
newHeight = conversionSize;
}

objFrame.width = newWidth;
objFrame.height = newHeight;
}
}

function ThumbViewer(ImageObj){

// if (ImageObj.src == "http://pics.auction.co.kr/buy/itempage/no_image_thumb.gif") return;

ThumbImage0.style.border = "silver 1px solid";
ThumbImage1.style.border = "silver 1px solid";
ThumbImage2.style.border = "silver 1px solid";

if (ThumbImage0 == ImageObj) ThumbImage0.style.border = "#4D93DB 2px solid";
if (ThumbImage1 == ImageObj) ThumbImage1.style.border = "#4D93DB 2px solid";
if (ThumbImage2 == ImageObj) ThumbImage2.style.border = "#4D93DB 2px solid";


if (ThumbImage1 == ImageObj){
img0.style.display = "none";
img1.style.display = "";
img2.style.display = "none";
ImageResizing(img1);
}
else if (ThumbImage2 == ImageObj){
img0.style.display = "none";
img1.style.display = "none";
img2.style.display = "";
ImageResizing(img2);
}
else
{
img0.style.display = "";
img1.style.display = "none";
img2.style.display = "none";
ImageResizing(img0);
}


}
</script>
<?
        // 파일 출력
$sql = "select * from $g4[board_file_table] where `bo_table`='$bo_table' and `wr_id`='$wr_id'";
$result=mysql_query($sql);
for($i=0 ; $row = mysql_fetch_array($result) ; $i++){
if($i > 0){
$style= "style=\"display:none\"";
}
echo "<img src =$g4[path]/data/file/$bo_table/$row[bf_file] width=300 height=200 id=img$i $style>";
$thumimg[$i]="<img src =$g4[path]/data/file/$bo_table/$row[bf_file] width=50 height=50 id=ThumbImage$i onfocus=\"javascript:ThumbViewer(this)\" onmouseover=\"javascript:ThumbViewer(this)\">";
}
echo $thumimg[0];
echo $thumimg[1];
echo $thumimg[2];
?>
추천
1

댓글 11개

아직 완성되지 못해서 배포를 못하고 있는 스킨이지만 위 기능이 아닌 간단한 형태로 구성된 스킨이 제홈 상단 프리존 메뉴의 쇼핑게시판 가시면 보실수 있습니다....
네잎글로버님의 사이트에 방문해보니....

쇼핑카트 기능의 게시판이 있는 데....

그것도 그누보드 스킨인가요? 그누보드스킨이라면 정말로 잘 만들었다고 생각이 드네요.

대단합니다. ^^
에공....감사합니다.
예전에 목진철님께서 올려주신 제품소개게시판과 제품주문 게시판사이에 게시판이 2개가 더들어가서
하나는 장바구니 하나는 위시리스트로 사용중입니다.
또한 사용후기도 별도로 게시판을 사용하고요.....
아직 기능이 많이 부족합니다. 스킨내에서만 구현하는데 제자 지식이 없어서 아직도 힘듭니다......
적용된 페이지는 허접해서 ;;
위 첨부 이미지처럼 작은 이미지에 마우스 오버 하면 큰이미지가 바뀌는겁니다.

보완할점이 많습니다;;
전체 3,313 |RSS
그누4 팁자료실 내용 검색

회원로그인

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