그누보드 - 갤러리 게시판 내 첨부 파일을 분리하여 출력하기

갤러리 게시판 내 첨부 파일을 분리하여 출력하기 > 그누보드5 팁자료실

그누보드5 팁자료실

갤러리 게시판 내 첨부 파일을 분리하여 출력하기 정보

갤러리 게시판 내 첨부 파일을 분리하여 출력하기

본문

질문 게시판 내

https://sir.kr/qa/542681

첨부 파일이 여러개 일 때 맨 처음만 보이고

그 이외에는 하단에 작은 썸네일로 출력한 다음 클릭 시 상단의 이미지가 변경되는 방법입니다.

아래 움짤 확인하세요

사용하시는 게시판 스킨 / view.skin 파일을 열어 아래 코드를 찾아주세요


<?php
        // 파일 출력
        $v_img_count = count($view['file']);
        if($v_img_count) {
            echo "<div id=\"bo_v_img\">\n";
 
            foreach($view['file'] as $view_file) {
                echo get_file_thumbnail($view_file);
            }
 
            echo "</div>\n";
        }
         ?>

이 코드를 아래 처럼 수정(그냥 변경하세요 싹)해주세요


<?php
    echo "<div id='main-image' style='width: 500px; height: 500px;'>";
    // 첫 번째 이미지 크게 출력
    $v_img_count = count($view['file']);
    if($v_img_count) {
        echo get_view_thumbnail($view['file'][0]['view'], 500);
    }
    echo "</div>";
     
    // 추가 이미지 원본 출력
    if ($v_img_count > 1) {
        echo "<div id='thumbnail-container' style='display: flex; gap: 10px; margin-top: 10px;'>";
        for ($i = 0; $i < min($v_img_count - 1, 6); $i++) {  // 최대 5개의 원본 이미지 표시
            echo "<div class='thumbnail' style='width: 100px; height: 100px; overflow: hidden;'>";
            // 썸네일 생성을 위해 get_file_thumbnail 함수 사용
            $thumb = $view['file'][$i]['view'];
            preg_match('/src="([^"]+)"/', $thumb, $matches);
            $image_url = isset($matches[1]) ? $matches[1] : '';
            // 이미지 주소만 추출
            if ($image_url) {
                echo "<img src='" . $image_url . "' data-full='" . $image_url . "' style='width: 100%; height: 100%; object-fit: cover; cursor: pointer;' />";
            }
            echo "</div>\n";
        }
        echo "</div>\n";
    }
?>
<script>
    document.querySelectorAll('#thumbnail-container .thumbnail img').forEach(function(thumb) {
        thumb.addEventListener('click', function() {
            // 메인 이미지를 클릭된 썸네일의 큰 이미지로 변경
            document.getElementById('main-image').innerHTML = "<img src='" + this.getAttribute('data-full') + "' style='width: 100%; height: 100%; object-fit: cover;' />";
        });
    });
</script>

고맙습니다.