[ jQuery ] Light Box 사용하여 팝업창 만들기
2022. 2. 23. 17:02ㆍjQuery
위에 lightbox라고 적혀있는 링크를 누르게 되면 위에 사진 같은 팝업창이 생긴다.
< 코드 >
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>lightbox 플러그인</title>
<link rel="stylesheet" href="jquery.lightbox-0.5.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.lightbox').lightBox();
});
</script>
<a class="lightbox" href="image/pic01.jpg">lightbox</a> <!-- 메뉴 이름 -->
<a class="lightbox" href="image/pic02.jpg">lightbox</a> <!-- 메뉴 이름 -->
<a class="lightbox" href="image/pic03.jpg">lightbox</a> <!-- 메뉴 이름 -->
</body>
</html>'jQuery' 카테고리의 다른 글
| [ jQuery ] Masonry 플러그인하여 박스 애니메이션 효과 주기 (0) | 2022.02.23 |
|---|---|
| [ jQuery ] 배너형 갤러리 만들기 (0) | 2022.02.23 |
| [ jQuery ] Drop down 메뉴바 만들기 (0) | 2022.02.22 |
| [ jQuery ] Infinite Scroll 무한 스크롤 이벤트 적용하기 (0) | 2022.02.22 |
| [ jQuery ] 라이브러리 CDN 방식으로 연결하기 (0) | 2022.02.22 |