게시판 컨탠츠 내 이미지별로 넘버링하기

해당 게시판의 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는 본인 환경에 맞도록 조정하셔야 합니다.