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

라이트 갤러리 적용 관련 질문 드립니다. 채택완료

주퍼 10개월 전 조회 2,005

 

아래  라이트 박스를 적용했습니다.

그런데 링크 걸린 홈페이지 로고등 이미지가 모두 나오네요.

바디(바디안쪽) 이미지 부분만 나올수 있는지 여쭤 봅니다.

 

<body> 
<div class="container"  style="border:15px solid #F0F0F0; background-color: #fff; padding: 10px;" >

<div class="col-6 phtos2">
<?php
$filename = $view['file'][1]['file'];
$filepath = G5_DATA_PATH.'/file/'.$bo_table;
$filesrc = G5_DATA_URL.'/file/'.$bo_table.'/'.$filename;
$thumbsrc = G5_DATA_URL.'/file/'.$bo_table.'/'.$thumb;
?>
<img src="<?=$filesrc?>" class="phtos1">
</div>    
<div class="col-6 phtos2" >
<?php
$filename = $view['file'][2]['file'];
$filepath = G5_DATA_PATH.'/file/'.$bo_table;
$filesrc = G5_DATA_URL.'/file/'.$bo_table.'/'.$filename;
$thumbsrc = G5_DATA_URL.'/file/'.$bo_table.'/'.$thumb;
?>
<img src="<?=$filesrc?>"  class="phtos1">
</div>    
<div class="col-6 phtos2"  >
<?php
$filename = $view['file'][3]['file'];
$filepath = G5_DATA_PATH.'/file/'.$bo_table;
$filesrc = G5_DATA_URL.'/file/'.$bo_table.'/'.$filename;
$thumbsrc = G5_DATA_URL.'/file/'.$bo_table.'/'.$thumb;
?>
<img src="<?=$filesrc?>"  class="phtos1">
</div>    
<div class="col-6 phtos2" >
<?php
$filename = $view['file'][4]['file'];
$filepath = G5_DATA_PATH.'/file/'.$bo_table;
$filesrc = G5_DATA_URL.'/file/'.$bo_table.'/'.$filename;
$thumbsrc = G5_DATA_URL.'/file/'.$bo_table.'/'.$thumb;
?>
<img src="<?=$filesrc?>"  class="phtos1">
</div>    
</div>    
</body>
 

    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.4.1/index.min.js"></script>

    <script>
// <img> 태그에 <a> 태그를 래핑함
function wrap(img) {
    const el = document.createElement('a');
    
    el.setAttribute('data-fslightbox', 'gallery');
    el.href = img.src;
    // 첫번째 인수로 전달받은 노드를, 두번째 인수로 전달한 노드의 바로 앞에 삽입
    img.parentElement.insertBefore(el, img);
    el.appendChild(img);
}

document.querySelectorAll('img').forEach((el, idx) => {
        wrap(el);
});

refreshFsLightbox(); // fslight 재설정
  </script>

 

http://sir.kr/data/editor/2412/2009966780_1734825785.9623.png" width="100%" />

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

답변 1개

채택된 답변
+20 포인트
10개월 전

</p>

<p>document.querySelectorAll('.container img').forEach((el, idx) => {

        wrap(el);

});</p>

<p>

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

답변에 대한 댓글 2개

주퍼
10개월 전
베르만님 덕분에 해결되었습니다.^^ 매번도움주셔서 감사합니다. 초보라 많은 도움이 됩니다.
주퍼
6개월 전
베르만님 알려주신거 작동은 잘됩니다. 혹시 사진 삭제시 액박뜨는 문젝 생기는데 요건 어느부분에서 수정해야 될런지요?

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

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

로그인