썸네일 hover시 첫 게시글만 작동됩니다
본문
안녕하세요,
움짤 갤러리를 만들려고 합니다.
갤러리 썸네일에 마우스 호버시, 미리 준비해둔 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
$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>
앗 정말 감사합니다. 신기하네요 id랑 class차이로 어떻게 이게 다를수 있을까요?
https://homzzang.com/b/css-5 참고해 보세요.
감사합니다 신비님. 이론적으로는 다 알고 있다고 생각하였는데 역시 실전은 다르네요 ㅋㅋ