라이트 박스 갤러리 게시판 문의
본문
갤러리 게시판을 라이트 박스를 이용해서 사용하고 있습니다.
1. 이미지 첨부파일이 2개일 경우 2번째 첨부파일을 리스트에서 이미지 클릭시 띄우고 싶습니다.
2. 에디터에 올린 파일을 리스트에서 이미지 클릭시 띄우고 싶습니다.
어떻게 해야 할까요? 고수님들의 고견 부탁드립니다.
------------------------------------------------------------------------------
<ul id="gall_ul" class="gall_row">
<?php for ($i=0; $i<count($list); $i++) {
$classes = array();
$classes[] = 'gall_li';
$classes[] = 'col-gn-'.$bo_gallery_cols;
if( $i && ($i % $bo_gallery_cols == 0) ){
$classes[] = 'box_clear';
}
if( $wr_id && $wr_id == $list[$i]['wr_id'] ){
$classes[] = 'gall_now';
}
?>
<li class="<?php echo implode(' ', $classes); ?>">
<div class="gall_box">
<div class="gall_chk chk_box">
<?php if ($is_checkbox) { ?>
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>" class="selec_chk">
<label for="chk_wr_id_<?php echo $i ?>">
<span></span>
<b class="sound_only"><?php echo $list[$i]['subject'] ?></b>
</label>
<?php } ?>
<span class="sound_only">
<?php
if ($wr_id == $list[$i]['wr_id'])
echo "<span class=\"bo_current\">열람중</span>";
else
echo $list[$i]['num'];
?>
</span>
</div>
<div class="gall_con">
<div class="gall_img">
<?php
if (!$list[$i]['is_notice']) {
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);
}
if(isset($thumb) && $thumb['src']) {
?>
<a href="<?php echo $thumb['ori'] ?>" data-lightbox="bbs-lightbox" data-title="<?php echo $list[$i]['subject'] ?>">
<?php } else { ?>
<a href="<?php echo $list[$i]['href'] ?>">
<?php } ?>
<?php
if ($list[$i]['is_notice']) { // 공지사항 ?>
<span class="is_notice">공지</span>
<?php } else {
if($thumb['src']) {
$img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" >';
} else {
$img_content = '<span class="no_image">no image</span>';
}
echo $img_content;
}
?>
</a>
</div>
</div>
</div>
</li>
<?php } ?>
<?php if (count($list) == 0) { echo "<li class=\"empty_list\"></li>"; } ?>
</ul>
답변 1
다음과 같은 방법으로 해볼 수 있을것 같습니다.
이미지 첨부파일이 2개일 경우 2번째 첨부파일을 리스트에서 이미지 클릭 시 띄우기
<!-- 라이트 박스 스크립트를 로드합니다. -->
<script src="라이트박스 라이브러리 경로"></script>
<script>
// 이미지 클릭 시 라이트 박스를 띄우기 위한 JavaScript 코드
document.addEventListener("DOMContentLoaded", function () {
// 이미지 클릭 이벤트 핸들러를 등록합니다.
var images = document.querySelectorAll("#gall_ul .gall_img a");
for (var i = 0; i < images.length; i++) {
images[i].addEventListener("click", function (e) {
e.preventDefault(); // 기본 동작 방지
var imageSrc = this.getAttribute("href");
var imageTitle = this.getAttribute("data-title");
// 라이트 박스를 띄웁니다.
lightbox.open({
source: imageSrc,
title: imageTitle
});
});
}
});
</script>
에디터에 올린 파일을 리스트에서 이미지 클릭 시 띄우기
<!-- 라이트 박스 스크립트를 로드합니다. -->
<script src="라이트박스 라이브러리 경로"></script>
<script>
// 이미지 클릭 시 라이트 박스를 띄우기 위한 JavaScript 코드
document.addEventListener("DOMContentLoaded", function () {
// 이미지 클릭 이벤트 핸들러를 등록합니다.
var images = document.querySelectorAll("#gall_ul .gall_img a");
for (var i = 0; i < images.length; i++) {
images[i].addEventListener("click", function (e) {
e.preventDefault(); // 기본 동작 방지
var imageSrc = this.getAttribute("href");
var imageTitle = this.getAttribute("data-title");
// 라이트 박스를 띄웁니다.
lightbox.open({
source: imageSrc,
title: imageTitle
});
});
}
});
</script>
참고 하셔서 원하시는 형식으로 구현하시면 될 것 같습니다.
감사합니다. 공부해 보겠습니다.