첨부 이미지를 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];
?>
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];
?>
첨부파일
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 11개
쇼핑카트 기능의 게시판이 있는 데....
그것도 그누보드 스킨인가요? 그누보드스킨이라면 정말로 잘 만들었다고 생각이 드네요.
대단합니다. ^^
예전에 목진철님께서 올려주신 제품소개게시판과 제품주문 게시판사이에 게시판이 2개가 더들어가서
하나는 장바구니 하나는 위시리스트로 사용중입니다.
또한 사용후기도 별도로 게시판을 사용하고요.....
아직 기능이 많이 부족합니다. 스킨내에서만 구현하는데 제자 지식이 없어서 아직도 힘듭니다......
위 첨부 이미지처럼 작은 이미지에 마우스 오버 하면 큰이미지가 바뀌는겁니다.
보완할점이 많습니다;;
덕분에 좋은 팁을 얻게 되었네요. ^^
감사 합니다.