게시판 컨탠츠 내 이미지별로 넘버링하기 정보
게시판 컨탠츠 내 이미지별로 넘버링하기본문
해당 게시판의 view.skin.php 수정.
<css 추가>
.image-number {
position: absolute;
top: 3%;
left: 3%;
background-color: white;
color: black;
border-radius: 50%;
font-size: 10px;
width: 17px;
height: 17px;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
}
<하단 스크립트 추가>
$(document).ready(function() {
$("#bo_v_con img").each(function(index) {
var imageNumber = index + 1; // 이미지 번호 (1부터 시작)
var numberDiv = $("<div>").addClass("image-number").text(imageNumber);
$(this).css("position", "relative").parent().css("position", "relative");
$(this).before(numberDiv);
});
});
예시
유의사항 : CSS는 본인 환경에 맞도록 조정하셔야 합니다.
추천
6
6
댓글 1개
좋아요 추천합니다.