정렬 및 사이즈 조절 문의 채택완료

</p>

<p><?php

    echo "<div id='main-image' style='width: 100%; height: auto;'>";

    // 첫 번째 이미지 크게 출력

    $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%; align-items: center; object-fit: cover; cursor: pointer;' />";

            }

            echo "</div>\n";

        }

        echo "</div>\n";

    }

?></p>

<p><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></p>

<p>