라이트 갤러리 적용 관련 질문 드립니다.
관련링크
본문
아래 라이트 박스를 적용했습니다.
그런데 링크 걸린 홈페이지 로고등 이미지가 모두 나오네요.
바디(바디안쪽) 이미지 부분만 나올수 있는지 여쭤 봅니다.
<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>
답변 1
document.querySelectorAll('.container img').forEach((el, idx) => {
wrap(el);
});
베르만님 덕분에 해결되었습니다.^^ 매번도움주셔서 감사합니다. 초보라 많은 도움이 됩니다.
