[lightgallery.js] 경량, 다중 장치 지원, 고기능 이미지 라이브러리 제작
4864 단어 JavaScriptCSS
css와 js를 조금만 수정하면 간단하게 맞춤형으로 제작할 수 있고 사용하기 쉬우니 사용 방법을 소개합니다.
lightgallery.js
lightgallery.js는 경량의 jQuery에 의존하지 않는lightbox계 플러그인입니다.
이미지, 애니메이션, YouTube/동영상, iframe 등을 사용할 수 있으며 간단하고 기능이 높은 스크립트로 수동, 다중 장치, 애니메이션 등을 쉽게 사용자 정의할 수 있다.
DEMO 페이지 동작 확인 가능.
lightgallery.js의 특징
lightgallery.js의 이용 방법
먼저 Top 페이지 중간에 있는 "View on github"를 클릭하고 github 페이지로 들어가세요.
github의 "Clone or download"단추를 누르고 "Download ZIP"를 누르면 원본 코드를 다운로드할 수 있습니다.
다운로드 후 파일 압축을 풀면 다음과 같은 파일과 데이터가 있습니다.
이 안에 "dist"라고 적힌 폴더가 있습니다.
이 파일을 열면 네 개의 폴더가 있습니다.
플러그인을 사용하는 데 필요한 파일이 됩니다.
lightgallery.읽기 js
우선, 문서에lightgallery가 있습니다.css를 추가합니다.
<head>
<link type="text/css" rel="stylesheet" href="css/lightgallery.css" />
</head>
lightgallery 플러그인을 포함하기를 희망하는 경우,lightgallery.js 다음에 추가할 수 있습니다.
<body>
....
<script src="js/lightgallery.js"></script>
<!-- lightgallery plugins -->
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
</body>
플러그인 추가
lightgallery의javascript는 기능에 따라 분리되므로 사용하고 싶은 기능이 있으면 이 플러그인을 추가하십시오.
표식
lightgallery의 표시는 다음과 같은 설명을 사용하도록 권장합니다.
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
...
</div>
플러그인 호출
플러그인을 호출하여 라이브러리를 시작합니다.
<script type="text/javascript">
lightGallery(document.getElementById('lightgallery'));
</script>
Reference
이 문제에 관하여([lightgallery.js] 경량, 다중 장치 지원, 고기능 이미지 라이브러리 제작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hiroyukiwk/items/21426fe22afd269c79bf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
