게시판 목록에서 썸네일 롤링되게 하려고 하는데 도와주세요 ㅠㅠ
본문
게시판 등록할때 첨부파일을 4개 등록할수 있게 하고
1,2번 첨부파일은 썸네일로 목록 페이지에만 보여지고
3,4번 첨부파일은 본문 페이지에만 나오게 했거든요
근데 썸네일 이미지가 2개 일때 롤링이 되고
썸네일 첨부파일이 1개면 롤링이 안되게 하려고 하는데
첨부를 1번만 하든 1,2번 둘다 하든 다 롤링이 되어 버려서요 ...
list.skin.php 에 있는 썸네일 불러오는 코드입니다.
<div class="selfie_thumb">
<?php
$thumb = get_list_thumbnail3($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], 'false', 'true', 'center', 'false', '80/0.5/3', 0);
$thumb2 = get_list_thumbnail3($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], 'false', 'true', 'center', 'false', '80/0.5/3', 1);
if($thumb['src']) {
$img_content = '<img class="thumb thumb1 active" src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';
$img_content .= '<img class="thumb thumb2" src="'.$thumb2['src'].'" alt="'.$thumb2['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';
} else {
$img_content = '<div class="no_image">No Image</div>';
}
echo $img_content;
?>
</div>
<style>
.thumb{position:relative; opacity:0; transition:opacity 0.8s ease-in-out; -webkit-transition:opacity 0.8s ease-in-out; -moz-transition:opacity 0.8s ease-in-out; -o-transition:opacity 0.8s ease-in-out;}
.thumb2{position:absolute; top:0; left:0; }
.thumb.active{opacity:1;}
</style>
<script>
$(document).ready(function(){
$(".selfie_thumb").each(function(){
var t = this;
if($(this).find("img").length >= 1){
setInterval(
function(){
$(t).find("img.active").removeClass("active").siblings().addClass("active");
}
, 2800);
}
});
});
</script>
그리고 썸네일 첨부파일이 1개일때는 이미지가 롤링 안되고 한개만 보여지게 해야하는데
첨부파일이 1개라도 2개로 출력되고 하나는 엑박으로 나오고 롤링이 되버리네요ㅠㅠ
어떻게해야지 첨부파일 1개일때는 롤링이 안되고 첨부파일이 두개일때는 롤링이 되도록 할수 있을까요 ? ㅠㅠ 제발 도와주세요 ㅠㅠ
혹시 몰라
write.skin.php 에서 첨부파일 부분 코드도 올릴께요 ㅠㅠ
<tr>
<th>썸네일</th>
<td>
<div class="cont">
<p style="color:#ff0000; font-size:14px; font-weight:500; margin:5px 0;">썸네일 이미지 크기 : 가로 280px, 세로 280px 이상으로 가로, 세로 비율 동일하게 업로드 부탁드립니다.</p>
<input type="file" name="bf_file[]" id="bf_file_1" title="파일첨부 1 : 용량 <?php echo $upload_max_filesize ?> 이하만 업로드 가능" class="form-control field txt" style="height:32px; line-height:32px;">
</div>
<?php if($w == 'u' && $file[0]['file']) { ?>
<span class="file_del" style="font-size:11px;">
<input type="checkbox" id="bf_file_del0" name="bf_file_del[0]" value="1"> <label for="bf_file_del0"><?php echo $file[0]['source'].'('.$file[0]['size'].')'; ?> 파일 삭제</label>
</span>
<?php } ?>
</td>
</tr>
<tr>
<th>썸네일</th>
<td>
<div class="cont">
<p style="color:#ff0000; font-size:14px; font-weight:500; margin:5px 0;">썸네일 이미지 크기 : 가로 280px, 세로 280px 이상으로 가로, 세로 비율 동일하게 업로드 부탁드립니다.</p>
<input type="file" name="bf_file[]" id="bf_file_2" title="파일첨부 1 : 용량 <?php echo $upload_max_filesize ?> 이하만 업로드 가능" class="form-control field txt" style="height:32px; line-height:32px;">
</div>
<?php if($w == 'u' && $file[1]['file']) { ?>
<span class="file_del" style="font-size:11px;">
<input type="checkbox" id="bf_file_del1" name="bf_file_del[1]" value="2"> <label for="bf_file_del1"><?php echo $file[1]['source'].'('.$file[1]['size'].')'; ?> 파일 삭제</label>
</span>
<?php } ?>
</td>
</tr>
<?php for ($i=2; $is_file && $i<$file_count; $i++) { ?>
<tr>
<th>본문 이미지</th>
<td>
<div class="cont">
<input type="file" name="bf_file[]" id="bf_file_<?php echo $i+1 ?>" title="파일첨부 <?php echo $i+1 ?> : 용량 <?php echo $upload_max_filesize ?> 이하만 업로드 가능" class="form-control field txt" style="margin:6px 0; height:32px; line-height:32px;">
</div>
<?php if($w == 'u' && $file[$i]['file']) { ?>
<span class="file_del" style="font-size:11px;">
<input type="checkbox" id="bf_file_del<?php echo $i ?>" name="bf_file_del[<?php echo $i; ?>]" value="<?php echo $i+1 ?>"> <label for="bf_file_del<?php echo $i ?>"><?php echo $file[$i]['source'].'('.$file[$i]['size'].')'; ?> 파일 삭제</label>
</span>
<?php } ?>
</td>
</tr>
<?php } ?>
답변 1
if($(this).find("img").length >= 1){
setInterval(
function(){
$(t).find("img.active").removeClass("active").siblings().addClass("active");
}
, 2800);
}
위 부분을 아래와 같이 해보세요.
if($(t).find("img.active").length > 1){
setInterval(
function(){
$(t).find("img.active").removeClass("active").siblings().addClass("active");
}
, 2800);
}
이렇게 수정하니 롤링 자체가 되지 않네요 ㅠㅠ
아 제가 롤링쪽 코드를 잘못이해 했네요
thumb2가 없음에도 엑박형태로 img를 추가하고 있었네요
그래서 thumb2가 없는 경우 넘어가게 했습니다.
<div class="selfie_thumb">
<?php
$thumb = get_list_thumbnail3($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], 'false', 'true', 'center', 'false', '80/0.5/3', 0);
$thumb2 = get_list_thumbnail3($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], 'false', 'true', 'center', 'false', '80/0.5/3', 1);
$img_content = "";
if($thumb['src'] != "") {
$img_content .= '<img class="thumb thumb1 active" src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';
}
if($thumb2['src'] != ""){
$img_content .= '<img class="thumb thumb2" src="'.$thumb2['src'].'" alt="'.$thumb2['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';
}
if($img_content == ""){
$img_content = '<div class="no_image">No Image</div>';
}
?>
</div>
<style>
.thumb{position:relative; opacity:0; transition:opacity 0.8s ease-in-out; -webkit-transition:opacity 0.8s ease-in-out; -moz-transition:opacity 0.8s ease-in-out; -o-transition:opacity 0.8s ease-in-out;}
.thumb2{position:absolute; top:0; left:0; }
.thumb.active{opacity:1;}
</style>
<script>
$(document).ready(function(){
$(".selfie_thumb").each(function(){
var t = this;
if($(this).find("img").length >= 1){
setInterval(
function(){
$(t).find("img.active").removeClass("active").siblings().addClass("active");
}
, 2800);
}
});
});
</script>
위 처럼해서 해결이 안되면
$thumb, $thumb2 값을 print_r해서 값이 어떻게 들어오는지 확인해보셔야 해요
넵 감사합니다~!
같은 방법은 아니지만 이렇게 해결했습니다~!
현재는 이 방법으로 잘 나오고 있는데 오류 없이 계속 구동 잘 되었으면 좋겠네요 ㅎㅎ
혹시 보시고 이상하거나 오류가 날거 같은게 있으면 말씀 부탁드려요~!!
<div class="selfie_thumb">
<?php
$thumb = get_list_thumbnail3($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], 'false', 'true', 'center', 'false', '80/0.5/3', 0);
$thumb2 = get_list_thumbnail3($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], 'false', 'true', 'center', 'false', '80/0.5/3', 1);
$file = get_file($bo_table, $list[$i]['wr_id']);
if(preg_match("/\.({$config['cf_image_extension']})$/i", $file[1]['file']) && preg_match("/\.({$config['cf_image_extension']})$/i", $file[0]['file'])) {
$img_content = '<img class="thumb thumb1 active" src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';
$img_content .= '<img class="thumb thumb2" src="'.$thumb2['src'].'" alt="'.$thumb2['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';
} else if(preg_match("/\.({$config['cf_image_extension']})$/i", $file[0]['file'])) {
$img_content = '<img class="thumb thumb1 active" src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';
} else {
$img_content = '<div class="no_image">No Image</div>';
}
echo $img_content;
?>
</div>
답변을 작성하시기 전에 로그인 해주세요.
