고수님들...부탁드립니다.
본문
아래코드 확인부탁드립니다.
갤러리 에 1번사진과 5번까지 호출하는데요 1번사진은 큰이미지로 그 다음부터는 작은 사진으로
호출하고싶은데요 1번은 호출이 됩니다. 2번부터 나오지 않아 글을 올립니다....
<?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, 6); $i++) { // 최대 5개의 원본 이미지 표시
echo "<div class='thumbnail' style='width: 100px; height: 100px; overflow: hidden;'>";
// get_view_thumbnail 함수를 사용하여 썸네일 생성
echo "<img src='" . get_view_thumbnail($view['file'][$i]['view'], 100) . "' data-full='" . $view['file'][$i]['view'] . "' 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>
답변 2
원하시는 결과 화면이 위 내용과 같나요 ?
썸네일은 자동으로 이미지 태그까지 완성되기 때문에 나타나는 현상입니다.
코드를 아래 처럼 변경해주세요
<?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";
}
?>
관련 내용 팁 게시판에 작성해두겠습니다.
정말감사합니다.
ㅜ.ㅜ
답변을 작성하시기 전에 로그인 해주세요.