첨부파일마다 내용넣은것 출력하기~ 정보
첨부파일마다 내용넣은것 출력하기~본문
오류가 나는곳의 주소를 알려주시면 더 빠르고 정확하게 답변 받을 수 있습니다.
오류 주소 :
첨부파일마다 내용을 넣고 싶은데요.
슬라이드로 한장씩 한장씩 클릭해서 div로 표시됩니다.
첨부파일마다 내용을 출력하고 싶은데 어느 부분에 소스를 넣어야 할까요?
도움 좀 부탁드립니다.
해당 스킨 게시물을 차지 못해 링크는 못걸지만 간단한 소스를 올립니다.
View.skin.php 파일에 아래와 같이 include가 되어 있습니다.
<? // 파일 출력
include "$board_skin_path/view_img_contents.php";
?>
view_img_contents.php 파일 소스입니다.
================================================================================================
<?
///---------------갤러리 스킨(jQuery용) -- by 균이, 2011.09
// 필수화일
// extent /resize_image.php -- 리사이징 및 썸네일 생성
// skin 폴더/jquery-ui.min.js -- 이미지 변환 효과
///---------------------------------------------------------
$imgPath="$g4[path]/data/file/$bo_table";
$view_width=710; $view_height=530; // 보여질 큰 이미지 가로, 세로
$thumbx=90; $thumby=65; //썸네일 가로, 세로
$thumbViewNum=7; //보여질 리스트용 썸네일 갯수
$thumb_div_width=($thumbViewNum * ($thumbx+9))."px";;
$thumbNum=$view[file][count];
?>
<style type='text/css'>
.thumb{padding:2px; border:1px solid #ccc; cursor:pointer;}
.pre_next{font:bold 40pt 굴림;color:#ccc; cursor:pointer;}
.preBtnOver{font:bold 40pt 굴림;color:#FF854A; cursor:pointer;}
#orgdiv{ width:<?=$view_width?>px; height:<?=$view_height?>px; overflow:hidden; z-index:10;
text-align:center; cursor:pointer; background:#f7f7f7; position:relative;}
.thumbpre_next{font:bold 20pt 굴림;color:#0067CE; cursor:pointer;}
.thumbBtnOver{font:bold 20pt 굴림;color:#FF854A; cursor:pointer;}
#img_td{border:1px solid #cdcdcd; background:#f7f7f7;}
#btn_td, #thum_td{border:1px solid #cdcdcd; padding:5px; background:#f7f7f7;}
#btn_td a:link, a:hover, a:visited{color:#004080}
</style>
<table width="750" align="center" cellpadding="0" cellspacing="7" border='0'>
<tr>
<td align='center' width="100%" height='<?=($view_height+60)?>' id='img_td'><!-- 큰 이미지-->
<?if($view[file][count]){?>
<table align="center" cellpadding="0" cellspacing="0" border="0" width='100%' height='100%'>
<tr>
<td align="center"><div id="orgdiv"><img id="orgmg" onclick="pop_view(this)"><br></div><br></td>
</tr>
</table>
<?}else echo "<div style='color:#666666'>< 등록된 이미지가 없습니다 ></div>";?>
</td></tr>
<tr>
<td align="center" id='thum_td'><!--썸네일-->
<table align="center" cellpadding="0" cellspacing="1" border="0">
<tr>
<?if($thumbNum>$thumbViewNum){?>
<td width='40' class='thumbpre_next' onmousedown="thumbpre_view(1)" onmouseover="this.className='thumbBtnOver';" onmouseout="this.className='thumbpre_next';" align='center'>〈 </td>
<?}?>
<td align='center'>
<?if($thumbNum>$thumbViewNum){?>
<div style='position:relative;overflow:hidden;width:<?=$thumb_div_width?>; height:<?=($thumby+10)?>px;' id='thumDivk'>
<div style='position:absolute;top:0; left:0; text-align:center;' id='thumDivk2'>
<?}?>
<table align="center" cellpadding="0" cellspacing="3" border="0"><tr>
<? $h=-1;
for($i=0;$i<$view[file][count]; $i++){
if(!$view[file][$i][view]){$thumbNum--; continue; }
$thum_img="$imgPath/thumbs/{$view[wr_id]}_{$i}.jpg";
$h++;
//큰 이미지 리사이즈
if($resizex && $resizey && ($view[file][$i][image_width]>$resizex || $view[file][$i][image_height]>$resizey) ){
$ret_wh= image_resizetg($view[file][$i][file], $resizex, $resizey, $bo_table, $view[wr_id], $i);
if($ret_wh[0] && $ret_wh[1]){
$view[file][$h][image_width]=$ret_wh[0]; $view[file][$h][image_height]=$ret_wh[1];
}
}
//썸네일 만들기
if(!file_exists($thum_img))
tg_thumb($view[file][$i][file],$thumbx, $thumby, $bo_table, $view[wr_id], $i );
?>
<td class='thumb' align='center' onmouseover="over_cell(<?=$h?>, this)" onmouseout="out_cell(<?=$h?>,this)" onmousedown="view_image(<?=$h?>)" id="thumTD<?=$h?>"><img src="<?=$thum_img?>" ></td>
<?}?>
</tr></table>
<?if($thumbNum>$thumbViewNum){?>
</div></div>
<?}?>
</td>
<?if($thumbNum>$thumbViewNum){?>
<td width='40' class='thumbpre_next' onmousedown="thumbpre_view(2)" onmouseover="this.className='thumbBtnOver';" onmouseout="this.className='thumbpre_next';" align='center'> 〉 </td>
<?}?>
</tr></table>
</td></tr>
</table>
<script src="<?=$board_skin_path?>/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
userAgent = navigator.userAgent.toLowerCase();
chrom= /chrom/.test(userAgent);
imgSize=new Array();
<? $data=''; $deli=''; $h=-1;
for($k=0; $k<$view[file][count]; $k++){ if(!$view[file][$k][view]) continue;
$data.=$deli.$view[file][$k][file]; $deli="|"; $h++;
echo "imgSize[$h]=\"{$view[file][$k][image_width]}|{$view[file][$k][image_height]}\";";
}
?>
Skin_Path="<?=$board_skin_path?>";
viewSize=<?=$view_width?>;
viewSizeH=<?=$view_height?>;
data="<?=$data?>";
imgPath="<?=$imgPath?>";
temp=data.split("|");
var imgObj= document.getElementById('orgmg');
var current=0;
var objk;
var thumbViewNum=<?=$thumbViewNum?>;
var cNum=0;
var page= Math.ceil(temp.length/thumbViewNum)
var eek=(<?=$thumbx?>*1+9)*thumbViewNum;
var movek;
var preTD=0;
$(document).ready(function(){ if(!data) return;
preload_Image=new Array();
for(i=0; i<temp.length; i++){
preload_Image[i] = new Image();
preload_Image[i].src=imgPath+"/"+temp[i];
if(i==0){ imgObj.src=preload_Image[0].src
orgww= imgSize[0].split('|');
if(orgww[0]> viewSize) imgObj.width= viewSize;
}
}
objk=document.getElementById("orgdiv");
if(orgww[1]<parseInt(viewSizeH)) objk.style.height=orgww[1]+'px';
$('#thumTD0').css('backgroundColor','#FF0000');
});
function pop_view(obj){
pww=screen.width; phh=screen.height-25;
opt="width="+pww+",height="+phh;
window.open( Skin_Path+"/image_view.html",'',opt);
}
var c_old=0;
function pre_view(vv){ if(!data) return;
if(vv==1){ current--; if(current<0) current=temp.length-1; }
else{current++; if(current>temp.length-1) current=0; }
view_image(current);
for(h=0; h<temp.length; h++) document.getElementById('thumTD'+h).style.backgroundColor='';
document.getElementById('thumTD'+current).style.backgroundColor='#FF0000';
ccp=Math.floor(current/thumbViewNum)
if(ccp!=cNum){cNum=ccp; cmovek=ccp*eek*-1; $("#thumDivk2").animate({left: cmovek+'px'}, 1000); }
c_old=current;
}
var effectk=new Array( "fade","explode","explode");
var rnd;
var selectedEffect;
var Rnd=0;
var hhk;
function view_image(vv){
sizek=imgSize[vv].split('|');
current=vv;
///////////////////////////////
hhk= sizek[1]<=viewSizeH? sizek[1] : viewSizeH;
objk.style.height=hhk+'px';
objk.style.width=viewSize+"px";
selectedEffect="fade";
options = {}; ani_time=400;
$('#orgdiv').effect( selectedEffect, options, ani_time, callback );
}
function callback() {
imgObj.src=preload_Image[current].src;
sizek=imgSize[current].split('|');
objk.style.left='0px';
var Rd2=Math.round(Math.random()) %2;
if(Rd2 ==0 || chrom) $('#orgdiv').fadeIn("slow");
else $('#orgdiv').slideDown("slow");
imgObj.width= sizek[0]> viewSize? viewSize: sizek[0];
}
function over_cell(num, obj){
document.getElementById('thumTD'+current).style.backgroundColor='';
document.getElementById('thumTD'+c_old).style.backgroundColor='';
document.getElementById('thumTD'+preTD).style.backgroundColor='';
obj.style.backgroundColor="#FF0000";
c_old=preTD=num;
}
function out_cell(num, obj){
if(current!=num) obj.style.background='';
document.getElementById('thumTD'+current).style.backgroundColor='#FF0000';
}
function thumbpre_view(vv){
if(vv==1){ cNum--; if(cNum<0) cNum=page-1; }
else{cNum++; if(cNum>page-1) cNum=0; }
movek=-1*cNum*eek;
$("#thumDivk2").animate({left: movek+'px' }, 1000);
}
</script>
오류 주소 :
첨부파일마다 내용을 넣고 싶은데요.
슬라이드로 한장씩 한장씩 클릭해서 div로 표시됩니다.
첨부파일마다 내용을 출력하고 싶은데 어느 부분에 소스를 넣어야 할까요?
도움 좀 부탁드립니다.
해당 스킨 게시물을 차지 못해 링크는 못걸지만 간단한 소스를 올립니다.
View.skin.php 파일에 아래와 같이 include가 되어 있습니다.
<? // 파일 출력
include "$board_skin_path/view_img_contents.php";
?>
view_img_contents.php 파일 소스입니다.
================================================================================================
<?
///---------------갤러리 스킨(jQuery용) -- by 균이, 2011.09
// 필수화일
// extent /resize_image.php -- 리사이징 및 썸네일 생성
// skin 폴더/jquery-ui.min.js -- 이미지 변환 효과
///---------------------------------------------------------
$imgPath="$g4[path]/data/file/$bo_table";
$view_width=710; $view_height=530; // 보여질 큰 이미지 가로, 세로
$thumbx=90; $thumby=65; //썸네일 가로, 세로
$thumbViewNum=7; //보여질 리스트용 썸네일 갯수
$thumb_div_width=($thumbViewNum * ($thumbx+9))."px";;
$thumbNum=$view[file][count];
?>
<style type='text/css'>
.thumb{padding:2px; border:1px solid #ccc; cursor:pointer;}
.pre_next{font:bold 40pt 굴림;color:#ccc; cursor:pointer;}
.preBtnOver{font:bold 40pt 굴림;color:#FF854A; cursor:pointer;}
#orgdiv{ width:<?=$view_width?>px; height:<?=$view_height?>px; overflow:hidden; z-index:10;
text-align:center; cursor:pointer; background:#f7f7f7; position:relative;}
.thumbpre_next{font:bold 20pt 굴림;color:#0067CE; cursor:pointer;}
.thumbBtnOver{font:bold 20pt 굴림;color:#FF854A; cursor:pointer;}
#img_td{border:1px solid #cdcdcd; background:#f7f7f7;}
#btn_td, #thum_td{border:1px solid #cdcdcd; padding:5px; background:#f7f7f7;}
#btn_td a:link, a:hover, a:visited{color:#004080}
</style>
<table width="750" align="center" cellpadding="0" cellspacing="7" border='0'>
<tr>
<td align='center' width="100%" height='<?=($view_height+60)?>' id='img_td'><!-- 큰 이미지-->
<?if($view[file][count]){?>
<table align="center" cellpadding="0" cellspacing="0" border="0" width='100%' height='100%'>
<tr>
<td align="center"><div id="orgdiv"><img id="orgmg" onclick="pop_view(this)"><br></div><br></td>
</tr>
</table>
<?}else echo "<div style='color:#666666'>< 등록된 이미지가 없습니다 ></div>";?>
</td></tr>
<tr>
<td align="center" id='thum_td'><!--썸네일-->
<table align="center" cellpadding="0" cellspacing="1" border="0">
<tr>
<?if($thumbNum>$thumbViewNum){?>
<td width='40' class='thumbpre_next' onmousedown="thumbpre_view(1)" onmouseover="this.className='thumbBtnOver';" onmouseout="this.className='thumbpre_next';" align='center'>〈 </td>
<?}?>
<td align='center'>
<?if($thumbNum>$thumbViewNum){?>
<div style='position:relative;overflow:hidden;width:<?=$thumb_div_width?>; height:<?=($thumby+10)?>px;' id='thumDivk'>
<div style='position:absolute;top:0; left:0; text-align:center;' id='thumDivk2'>
<?}?>
<table align="center" cellpadding="0" cellspacing="3" border="0"><tr>
<? $h=-1;
for($i=0;$i<$view[file][count]; $i++){
if(!$view[file][$i][view]){$thumbNum--; continue; }
$thum_img="$imgPath/thumbs/{$view[wr_id]}_{$i}.jpg";
$h++;
//큰 이미지 리사이즈
if($resizex && $resizey && ($view[file][$i][image_width]>$resizex || $view[file][$i][image_height]>$resizey) ){
$ret_wh= image_resizetg($view[file][$i][file], $resizex, $resizey, $bo_table, $view[wr_id], $i);
if($ret_wh[0] && $ret_wh[1]){
$view[file][$h][image_width]=$ret_wh[0]; $view[file][$h][image_height]=$ret_wh[1];
}
}
//썸네일 만들기
if(!file_exists($thum_img))
tg_thumb($view[file][$i][file],$thumbx, $thumby, $bo_table, $view[wr_id], $i );
?>
<td class='thumb' align='center' onmouseover="over_cell(<?=$h?>, this)" onmouseout="out_cell(<?=$h?>,this)" onmousedown="view_image(<?=$h?>)" id="thumTD<?=$h?>"><img src="<?=$thum_img?>" ></td>
<?}?>
</tr></table>
<?if($thumbNum>$thumbViewNum){?>
</div></div>
<?}?>
</td>
<?if($thumbNum>$thumbViewNum){?>
<td width='40' class='thumbpre_next' onmousedown="thumbpre_view(2)" onmouseover="this.className='thumbBtnOver';" onmouseout="this.className='thumbpre_next';" align='center'> 〉 </td>
<?}?>
</tr></table>
</td></tr>
</table>
<script src="<?=$board_skin_path?>/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
userAgent = navigator.userAgent.toLowerCase();
chrom= /chrom/.test(userAgent);
imgSize=new Array();
<? $data=''; $deli=''; $h=-1;
for($k=0; $k<$view[file][count]; $k++){ if(!$view[file][$k][view]) continue;
$data.=$deli.$view[file][$k][file]; $deli="|"; $h++;
echo "imgSize[$h]=\"{$view[file][$k][image_width]}|{$view[file][$k][image_height]}\";";
}
?>
Skin_Path="<?=$board_skin_path?>";
viewSize=<?=$view_width?>;
viewSizeH=<?=$view_height?>;
data="<?=$data?>";
imgPath="<?=$imgPath?>";
temp=data.split("|");
var imgObj= document.getElementById('orgmg');
var current=0;
var objk;
var thumbViewNum=<?=$thumbViewNum?>;
var cNum=0;
var page= Math.ceil(temp.length/thumbViewNum)
var eek=(<?=$thumbx?>*1+9)*thumbViewNum;
var movek;
var preTD=0;
$(document).ready(function(){ if(!data) return;
preload_Image=new Array();
for(i=0; i<temp.length; i++){
preload_Image[i] = new Image();
preload_Image[i].src=imgPath+"/"+temp[i];
if(i==0){ imgObj.src=preload_Image[0].src
orgww= imgSize[0].split('|');
if(orgww[0]> viewSize) imgObj.width= viewSize;
}
}
objk=document.getElementById("orgdiv");
if(orgww[1]<parseInt(viewSizeH)) objk.style.height=orgww[1]+'px';
$('#thumTD0').css('backgroundColor','#FF0000');
});
function pop_view(obj){
pww=screen.width; phh=screen.height-25;
opt="width="+pww+",height="+phh;
window.open( Skin_Path+"/image_view.html",'',opt);
}
var c_old=0;
function pre_view(vv){ if(!data) return;
if(vv==1){ current--; if(current<0) current=temp.length-1; }
else{current++; if(current>temp.length-1) current=0; }
view_image(current);
for(h=0; h<temp.length; h++) document.getElementById('thumTD'+h).style.backgroundColor='';
document.getElementById('thumTD'+current).style.backgroundColor='#FF0000';
ccp=Math.floor(current/thumbViewNum)
if(ccp!=cNum){cNum=ccp; cmovek=ccp*eek*-1; $("#thumDivk2").animate({left: cmovek+'px'}, 1000); }
c_old=current;
}
var effectk=new Array( "fade","explode","explode");
var rnd;
var selectedEffect;
var Rnd=0;
var hhk;
function view_image(vv){
sizek=imgSize[vv].split('|');
current=vv;
///////////////////////////////
hhk= sizek[1]<=viewSizeH? sizek[1] : viewSizeH;
objk.style.height=hhk+'px';
objk.style.width=viewSize+"px";
selectedEffect="fade";
options = {}; ani_time=400;
$('#orgdiv').effect( selectedEffect, options, ani_time, callback );
}
function callback() {
imgObj.src=preload_Image[current].src;
sizek=imgSize[current].split('|');
objk.style.left='0px';
var Rd2=Math.round(Math.random()) %2;
if(Rd2 ==0 || chrom) $('#orgdiv').fadeIn("slow");
else $('#orgdiv').slideDown("slow");
imgObj.width= sizek[0]> viewSize? viewSize: sizek[0];
}
function over_cell(num, obj){
document.getElementById('thumTD'+current).style.backgroundColor='';
document.getElementById('thumTD'+c_old).style.backgroundColor='';
document.getElementById('thumTD'+preTD).style.backgroundColor='';
obj.style.backgroundColor="#FF0000";
c_old=preTD=num;
}
function out_cell(num, obj){
if(current!=num) obj.style.background='';
document.getElementById('thumTD'+current).style.backgroundColor='#FF0000';
}
function thumbpre_view(vv){
if(vv==1){ cNum--; if(cNum<0) cNum=page-1; }
else{cNum++; if(cNum>page-1) cNum=0; }
movek=-1*cNum*eek;
$("#thumDivk2").animate({left: movek+'px' }, 1000);
}
</script>
댓글 전체
이게 간단한 소스인가요?
남이 만든 코드를 한번 스윽보고 답변을 해줄 수 있는 내용 같지는 않은데요?
이렇게 해보세요
style에 추가
.imgsubj{displsy:none; padding:7px; }
javascript 시작부분에 추가
$('#subj0').show();
수정1
<table width="750" align="center" cellpadding="0" cellspacing="7" border='0'>
<tr><td>
<?for($n=0; $n<$view[file][count]; $n++){?>
<div id='subj<?=$n?>' class='imgsubj'><?=$view[file][<?=$n?>][bf_content]?></div>
</td></tr>
<tr>
<td align='center' width="100%" height='<?=($view_height+60)?>' id='img_td'><!-- 큰 이미지-->
~~~~
수정2
var prev=0;
function view_image(vv){
$('#subj'+prev).hide();
$('#subj'+vv).show();
prev=vv;
남이 만든 코드를 한번 스윽보고 답변을 해줄 수 있는 내용 같지는 않은데요?
이렇게 해보세요
style에 추가
.imgsubj{displsy:none; padding:7px; }
javascript 시작부분에 추가
$('#subj0').show();
수정1
<table width="750" align="center" cellpadding="0" cellspacing="7" border='0'>
<tr><td>
<?for($n=0; $n<$view[file][count]; $n++){?>
<div id='subj<?=$n?>' class='imgsubj'><?=$view[file][<?=$n?>][bf_content]?></div>
</td></tr>
<tr>
<td align='center' width="100%" height='<?=($view_height+60)?>' id='img_td'><!-- 큰 이미지-->
~~~~
수정2
var prev=0;
function view_image(vv){
$('#subj'+prev).hide();
$('#subj'+vv).show();
prev=vv;