Skip to content

jquery_in_depth_5

Jump to bottom
paul edited this page May 16, 2017 · 1 revision

์‹ค์ „์˜ˆ์ œ - ์ด๋ฏธ์ง€ ๋ทฐ์–ด

๋‹ค์Œ ์นด์นด์˜ค์˜ ์ด๋ฏธ์ง€ ๊ฒ€์ƒ‰ API๋ฅผ ์ด์šฉํ•ด ์ด๋ฏธ์ง€ ๋ทฐ์–ด๋ฅผ ๋งŒ๋“ ๋‹ค.
์ด ์˜ˆ์ œ๋Š” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ๊ณผ jQuery๋ฅผ ๊ฒฐํ•ฉํ•ด ๊ตฌํ˜„ํ•œ๋‹ค.

๋‹ค์Œ APIํ‚ค ๋ฐœ๊ธ‰

๋‹ค์Œ ๊ฐœ๋ฐœ์ž ์„ผํ„ฐ ๋‹ค์Œ ๊ฐœ๋ฐœ์ž ์„ผํ„ฐ - ์ด๋ฏธ์ง€ ๊ฒ€์ƒ‰

๋ถ€ํŠธ์ŠคํŠธ๋žฉ

  • bootstrap : ์›น ๊ฐœ๋ฐœ์šฉ ํ”„๋ก ํŠธ์•ค๋“œ ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค. ๋‹ค์–‘ํ•œ UI ์ปดํฌ๋„ŒํŠธ์™€ ํ…Œ๋งˆ, ํ…œํ”Œ๋ฆฟ๋“ฑ์„ ์ œ๊ณตํ•œ๋‹ค.
  • bootstrap lightbox : bootstrap ๋ผ์ดํŠธ๋ฐ•์Šค ํ”Œ๋Ÿฌ๊ทธ์ธ

๊ฒฐ๊ณผ ํ™”๋ฉด

jquery_in_depth_5_1

ํด๋ผ์ด์–ธํŠธ ์ฝ”๋“œ

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>์ด๋ฏธ์ง€ ๋ทฐ์–ด ์˜ˆ์ œ</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/ekko-lightbox.min.css">
<style>
	body {  padding-top: 70px; }
	.portfolio-item {	 margin-bottom: 25px;  }
	footer {	  margin: 50px 0; }
</style>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ekko-lightbox.min.js"></script>
<script src="https://www.jsviews.com/download/jsrender.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var url = "https://apis.daum.net/search/image?callback=?";
	var param = {
		pageno:1, result:20, output:"json", sort : "accu",
		apikey : "14fcbd665c07cb9e546f5bb2df6d0883"
	};
	//๊ฒ€์ƒ‰์šฉ ํ•จ์ˆ˜: JSONP ๊ธฐ๋ฒ• ์ด์šฉ
	var searchImages= function() {
		$.getJSON(url, param, function(data) {
			var tmpl = $.templates("#image_template");
			var str =  tmpl.render(data.channel.item);
			$("#imagelist").append(str);
		});
	};
	//๋‹ค์Œ 20๊ฐœ ๊ฐ€์ ธ์˜ค๊ธฐ๋ฅผ ํด๋ฆญํ–ˆ์„ ๋•Œ์˜ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ
	$("#getNext").on("click", function() {
		param.pageno++;
		searchImages();
	});
	//'๊ฒ€์ƒ‰' ๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ์˜ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ
	$("#inquery").on("click", function() {
		$("#imagelist").empty();
		param.pageno = 1;
		param.q = $("#keyword").val();
		searchImages();
	});
	//๊ฒ€์ƒ‰์–ด ์ž…๋ ฅ์„ ์œ„ํ•œ ํ…์ŠคํŠธ๋ฐ•์Šค์—์„œ ์—”ํ„ฐํ‚ค๋ฅผ ๋ˆŒ๋ €์„ ๋•Œ๋„ ๊ฒ€์ƒ‰์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ํ•จ.
	$("#keyword").on("keyup", function(e) {
		if (e.keyCode == 13) {
			$("#inquery").trigger("click");
		}
	});
	//์ด๋ฒคํŠธ ์œ„์ž„ ์ฒ˜๋ฆฌ๋ฅผ ํ†ตํ•ด ๊ฒ€์ƒ‰๋œ ์ธ๋„ค์ผ ์ด๋ฏธ์ง€๋ฅผ ํด๋ฆญํ–ˆ์„ ๋•Œ ๋ผ์ดํŠธ๋ฐ•์Šค ์ฒ˜๋ฆฌ
	$("#imagelist").on("click", "div.portfolio-item  a", function(e) {
		e.preventDefault();
		$(this).ekkoLightbox();
	});
});
</script>
<script id="image_template" type="text/x-jsrender">
        <div class="col-md-2 portfolio-item">
            <a data-toggle="lightbox" data-gallery="multis"
				data-title="{{:title}}" href="{{:image}}">
                <img class="img-responsive" src="{{:thumbnail}}" alt="{{:title}}">
            </a>
        </div>
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
            	data-toggle="collapse"
            	data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">์ด๋ฏธ์ง€ ๊ฒ€์ƒ‰</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a href="https://developers.daum.net/services/apis/search/image">
                    DAUM ์ด๋ฏธ์ง€ ๊ฒ€์ƒ‰ ํŽ˜์ด์ง€</a>
                </li>
                <li>
                    <a href="https://developers.daum.net/">
                    DAUM Developers Center</a>
                </li>
                <li>
                    <a href="https://en.wikipedia.org/wiki/JSONP">JSONP Wiki</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- Page Content -->
<div class="container">
    <div class="row">
        <div id="navbar" class="navbar-collapse navbar-form navbar-left">
        	<div class="form-group col-lg-12">
        		<input id="keyword" type="text" placeholder="๊ฒ€์ƒ‰์–ด" class="form-control">
        		<button id="inquery" class="btn btn-success form-control">๊ฒ€ ์ƒ‰</button>
        	</div>
        </div>
	</div>

    <div id="imagelist" class="row">

    </div>

    <footer>
        <div class="row">
	        <div class="navbar-collapse navbar-form navbar-left">
    	        <div class="form-group col-lg-12">
        	        <button type="submit" id="getNext" class="btn btn-primary">
              	      ๋‹ค์Œ 20๊ฐœ ๊ฐ€์ ธ์˜ค๊ธฐ</button>
            	</div>
            </div>
        </div>
    </footer>
</div>

</body>
</html>

Clone this wiki locally