블로그 이미지 fslightbox 적용
작성일: 2023-10-23Prerequisite
- Notion 이미지 만료 이슈 개선
사용자 편의 기능인 이미지 클릭 시 이미지가 확대되는 기능을 추가했습니다.
대표적인 오버레이 이미지 라이브러리로는 Lightbox가 있지만 jQuery를 사용해야 한다는 것이 상당히 마음에 걸려 바닐라 자바스크립트로 작동 가능한 fslightbox를 사용했습니다.
_includes/lazyload.html
{% if include.image_src %}
<div class="image-flex">
<div class="image-item">
<div class="image-item-img">
<a data-fslightbox="{{include.image_src}}" href="{{include.image_src}}" data-type="image"
aria-label="This is fslightbox">
<div class="skeleton_loading">
<div class="skeleton_img"></div>
</div>
<img data-src="{{include.image_src}}" alt="" title="" width="500" height="300" class="lazyload" />
</a>
</div>
</div>
</div>
{% endif %}
적용 후 이미지 클릭 시 잘 적용된 것을 확인할 수 있습니다.
