안녕하세요,
움짤 갤러리를 만들려고 합니다.
갤러리 썸네일에 마우스 호버시, 미리 준비해둔 gif로 바뀌게 하려고 하는데, gif 파일은 jpg썸네일과 같은 이름으로 같은 data/file/$bo_table로 지정을 하였고, 확장자만 gif로 thumbnail.lib에 함수get_list_thumbnail에 정의해놨습니다. 그리고 jquery를 이용하여 list.skin에, 이렇게 추가하였는데요,
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id']);
if ($thumb['src']) {
$img_content = '<img id="showgif" src="'.$thumb['src'].'" >';
} else {
$img_content = '<div class="no_image" style="--aspect-ratio:16/9;"><span class="noimg-text">no image</span></div>';
}
echo $img_content;
}
?>
<script>
$('#showgif').hover(
function() {
$(this).attr('src', $(this).attr('src').replace('jpg', 'gif'));
},
function() {
$(this).attr('src', $(this).attr('src').replace('gif', 'jpg'));
}
);
</script>
문제는 list.skin의 첫 게시물만 작동이 잘 됩니다. 그 뒤로 둘째 게시글부터는 마우스 호버시 gif파일이 작동이 안됩니다. 혹시 어떻게 코드를 수정해야할까요? 아니면 다른 방법이라도 있을까요? 감사합니다
답변 1개 / 댓글 3개
bonobono$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id']);
if ($thumb['src']) {
$img_content = '<img class="showgif" src="'.$thumb['src'].'" >';
} else {
$img_content = '<div class="no_image" style="--aspect-ratio:16/9;"><span class="noimg-text">no image</span></div>';
}
echo $img_content;
}
?>
<script>
$('.showgif').hover(
function() {
$(this).attr('src', $(this).attr('src').replace('jpg', 'gif'));
},
function() {
$(this).attr('src', $(this).attr('src').replace('gif', 'jpg'));
}
);
</script>
답변에 대한 댓글 3개
답변을 작성하려면 로그인이 필요합니다.