리스트에서 이미지 링크 문의

리스트에서 이미지 링크 문의

QA

리스트에서 이미지 링크 문의

본문

갤러리 게시판에 리스트에서 이미지를 클릭하면 모달창으로 뜨고 있습니다.

혹시, 리스트에 보이는건 1번째 이미지가 보이고 클릭을해서 모달창이 열리면 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>

이 질문에 댓글 쓰기 :

답변 2

if(isset($thumb) && $thumb['src']) {  <===이 행 다음행에다 다음처럼 추가하세요

 if($list[$i]['file'][1]['view']) $thumb['ori'] = $list[$i]['file'][1]['path'].'/'.$list[$i]['file'][1]['file'];

 

두번째 화일이 있으면 두번째 것, 없으면 첫번째 것을 보여줍니다

 

 

 

다음과 같이 해볼 수 있을 것 같습니다.

 

스크립트 추가


jQuery(function($) {
  // 이미지 목록을 배열에 저장
  var images = <?php echo json_encode($list); ?>;
  var currentImageIndex = 0;
  // 모달 창 열기
  $('.gall_img a').on('click', function(event) {
    event.preventDefault();
    var modalImage = $('#modalImage');
    // 현재 이미지의 순서를 가져와서 다음 이미지로 업데이트
    currentImageIndex = (currentImageIndex + 1) % images.length;
    // 모달 창에 다음 이미지 표시
    modalImage.attr('src', images[currentImageIndex].href);
  });
});

 

모달창 추가


<!-- 모달 창 추가 -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img id="modalImage" class="modal-content">
</div>

참고하셔서 수정 및 추가 하시면 되지 않을까 합니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 36
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT