80 이미지 클릭시 확대하기 - fancyapps
80.1 fancyapps 빠른시작
본문 이미지를 클릭시 확대하여 볼수 있는 기능을 추가합니다.
fancyapps 에서 제공하는 플러그인을 사용하여 간단하게 구현합니다.
fancyapps 에서 제공하는 cdn css 와 js를 소스에 추가합니다.
...
...
<link href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
80.2 fancybox적용하기
사용법은
a 태그에 img url과 data-fancybox, data-caption 을 추가하면 간단하게 적용됩니다.
<div class="card-body">
...
...
<a href="{{list.img_url|imagePathContent:list.new_img_url }}" data-fancybox="gallery" data-caption="{{list.sub_title}}">
<img class="lazyload img-fluid" data-src="{{list.img_url|imagePathContent:list.new_img_url }}" alt="{{list.sub_title}}" title="{{list.sub_title}}" />
</a>
</div>
...
...
현재글 : 80 이미지 클릭시 확대하기 - fancyapps
다음글 :
81 Django iframe 설정 허용하기
Comments
Login: