라이트 박스 갤러리 게시판 문의

라이트 박스 갤러리 게시판 문의

QA

라이트 박스 갤러리 게시판 문의

답변 1

본문

갤러리 게시판을 라이트 박스를 이용해서 사용하고 있습니다.

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>

 

참고 하셔서 원하시는 형식으로 구현하시면 될 것 같습니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 10
© SIRSOFT
현재 페이지 제일 처음으로