테스트 사이트 - 개발 중인 베타 버전입니다

리스트에서 이미지 링크 문의 채택완료

jpna 2년 전 조회 1,774

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

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

채택된 답변
+20 포인트
2년 전

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

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

 

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

 

 

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

j
jpna
2년 전
감사합니다. 잘되네요.
j
jpna
2년 전
첨부파일은 잘보이는데, 에디터에서 불러온 이미지는 어떻게 불러올까요?

댓글을 작성하려면 로그인이 필요합니다.

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

 

스크립트 추가

</p>

<p>jQuery(function($) {

  // 이미지 목록을 배열에 저장

  var images = <?php echo json_encode($list); ?>;

  var currentImageIndex = 0;</p>

<p>  // 모달 창 열기

  $('.gall_img a').on('click', function(event) {

    event.preventDefault();

    var modalImage = $('#modalImage');</p>

<p>    // 현재 이미지의 순서를 가져와서 다음 이미지로 업데이트

    currentImageIndex = (currentImageIndex + 1) % images.length;</p>

<p>    // 모달 창에 다음 이미지 표시

    modalImage.attr('src', images[currentImageIndex].href);

  });

});

 

모달창 추가

</p>

<p><!-- 모달 창 추가 -->

<div id="myModal" class="modal">

  <span class="close">&times;</span>

  <img id="modalImage" class="modal-content">

</div>

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

j
jpna
2년 전
어렵네요. 감사합니다.
웹메이킹
2년 전
리스트 관련 부분은 그냥 두고 스크립트와 모달창 부분만 적용하시면 됩니다.
j
jpna
2년 전
감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인