게시판 목록에서 썸네일 롤링되게 하려고 하는데 도와주세요 ㅠㅠ
본문
게시판 등록할때 첨부파일을 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);
}