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

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

QA

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

답변 2

본문

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

혹시, 리스트에 보이는건 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>

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

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