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

질문 게시판 내 

https://sir.kr/qa/542681

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

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

아래 움짤 확인하세요

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

[code]

<?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";

        }

         ?>

[/code]

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

[code]

<?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>

[/code]

고맙습니다.