웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] lightbox gallery plugin 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] lightbox gallery plugin

해피CGI윤실장 2021. 9. 13. 09:23

jQuery 를 이용하여 라이트 박스를 만들 수 있습니다.

사용자 정의가 가능합니다. 

이미지, 비디오(YouTube, Vimeo, Wistia, Brightcove), Soundcloud 트랙, IFRAME 및 AJAX 콘텐츠를 지원하도록 제작되었습니다.

반응형 으로 제작 되었습니다.

MIT 라이센스 입니다.



사용법은 간단 합니다.


1. 라이브러리 호출
<script src="http://code.jquery.com/jquery-x.x.x.min.js"></script> <script src="jquery.poptrox.min.js"></script>
2. 컨텐츠 선언
<div id="gallery"> <a href="path/to/image1.jpg"><img src="path/to/image1_thumbnail.jpg" /></a> <a href="path/to/image2.jpg"><img src="path/to/image2_thumbnail.jpg" /></a> <a href="path/to/image3.jpg"><img src="path/to/image3_thumbnail.jpg" /></a> <a href="path/to/image4.jpg"><img src="path/to/image4_thumbnail.jpg" /></a> <a href="path/to/image5.jpg"><img src="path/to/image5_thumbnail.jpg" /></a> <a href="path/to/image6.jpg"><img src="path/to/image6_thumbnail.jpg" /></a> </div>빨간색은 라이트박스에 보여질 썸네일 입니다.
파란색은 리스트에 보여질 썸네일 입니다.


3. 실행
var foo = $('#gallery'); foo.poptrox();

실행화면 입니다.

 

 

 

Comments