[ jQuery ] Light Box 사용하여 팝업창 만들기

jQuery

[ jQuery ] Light Box 사용하여 팝업창 만들기

dauneee 2022. 2. 23. 17:02

위에 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>