다연이네

[days02] 복습 - 플러그인(plug-in) 본문

Web/jQuery

[days02] 복습 - 플러그인(plug-in)

　다연　 2020. 12. 21. 21:04
반응형

플러그인은 별도의 자바스크립트 파일로 jQuery에 기능을 추가한다. 플러그인은 외우는 것이 아니라, 각각 사용방법이 다르기 때문에 각 플러그인 웹사이트를 참고하여 만들어야 한다.

 

라이트박스 플러그인 사용해보기

라이트박스 ? 배경은 어둡게 하고 정보가 있는 사각형은 밝게 하는 플러그인

 

http://avioli.github.io/jquery-lightbox/

 

avioli/jquery-lightbox @ GitHub

A jQuery plugin, inspired and based on Lightbox 2 by Lokesh Dhakar jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery's selector. lightB

avioli.github.io

접속한 후 플러그인 압축 다운, 압축 풀기

<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet" href="./plugin/css/jquery.lightbox.css" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="./plugin/js/jquery.lightbox.js"></script>
<script src="./plugin/js/jquery.lightbox.min.js"></script>
<script src="./plugin/js/jquery.jquery.1.2.3.js"></script>



<script>
$(function() {
	$('a.light').lightBox();
});
</script>

</head>
<body>
<!-- p426 플러그인 사용 -->
<a class="light" href="./plugin/photos/image1.jpg">LightBox</a>
<a class="light" href="./plugin/photos/image2.jpg">LightBox</a>
<a class="light" href="./plugin/photos/ima ge3.jpg">LightBox</a>

</body>
</html>

 

 

Masonry 플러그인 사용해보기

Masonry ? 핀터레스트처럼 타일형 웹페이지를 만들때 사용

https://masonry.desandro.com/ 

 

Masonry

Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower:  bower install masonry --save Install with npm:  npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works o

masonry.desandro.com

접속한 후 

해당 코드 복붙

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>

<style>
*{margin:0; padding: 0;}
.box{
	background: black;
	margin: 5px;
}
</style>

</head>
<body>
<!-- Mansonry 플러그인 사용 -->
<script>
$(function() {
	for (var i = 0; i <100; i++) {
		$("<div></div>").addClass('box').css({
			width:100,
			height: Math.floor(Math.random()*100)+50
		}).appendTo('body');
	}
	
	$('body').masonry({
		columnWidth: 110
	});
});
</script>
</body>
</html>

columnWidth: 110으로 지정한 이유

현재 스타일 시트에서는 .box의 margin을 5px로 지정했고, 

script내부 div태그의 width 속성을 100px로 지정했다.

=> margin속성은 사방에 적용되므로 100+5*2 = 110px가 사각형의 너비이다.

 

 

반응형
저작자표시 비영리

'Web > jQuery' 카테고리의 다른 글

[days02] 복습 - 갤러리  (0) 2020.12.21
[days02] 복습 - 1) 프레임 애니메이션 / 2) 문서 객체 생성과 추가  (0) 2020.12.21
[days02] 복습 - 1) 보이기/안보이기(~toggle) 2) 애니메이션(animate) 효과  (0) 2020.12.21
[days02] 복습 - on()/off() 이벤트 연결/제거  (0) 2020.12.21
[days02] 복습 - attr()  (0) 2020.12.21
'Web/jQuery' Related Articles more
Comments