갤러리 리스트에서 모달(라이트박스)로 이미지가 뜨는 스킨이 있는가요?

갤러리 스킨에서

이미지를 클릭하면 view페이지로 넘어가지 않고

현재 창에서 모달(라이트박스)로 이미지가 뜨는

갤러리 스킨이 있을까요?

혹시 아시면 알려주세요

|

답변 1개

<a href="<?php echo $list[$i]['href'] ?>">
    <img src="...">
</a>
------------------------------------------------------
<a href="javascript:void(0);" class="gallery_item" data-img="<?php echo $list[$i]['file']['0']['path'].'/'.$list[$i]['file']['0']['file']; ?>">
    <img src="<?php echo $list[$i]['file']['0']['path'].'/'.$list[$i]['file']['0']['file']; ?>">
</a>
-----------------------------------------------------------
<div id="img_modal" style="display:none;">
<div class="modal_bg"></div>
<div class="modal_content">
<img src="" id="modal_img">
</div>
</div>
------------------------------------------------------------------------
#img_modal { position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; }
#img_modal .modal_bg { position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.8); }
#img_modal .modal_content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
#img_modal img { max-width:90vw; max-height:90vh; }
------------------------------------------------------------------------
$(document).on('click', '.gallery_item', function(){
    var img = $(this).data('img');
    $('#modal_img').attr('src', img);
    $('#img_modal').fadeIn();
});

$(document).on('click', '#img_modal .modal_bg', function(){
    $('#img_modal').fadeOut();
});

✅ 텔레그램: @sky1015 ❤️010-7445-7118❤️ 해외서버관리/API개발/프로그램/APP/모바일/랜딩페이지/스포츠커뮤니티 (20년개발자노하우/사후관리)

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