이승윤 / OpenSource-MyCookBook

Go to a project
Toggle navigation Toggle navigation pinning
이승윤
0f29049d 1 parent 4a5c9389

feat: category, video db 홈페이지 반영

Inline Side-by-side
Showing 2 changed files with 27 additions and 21 deletions
1 <% include ./includes/header.ejs %> 1 <% include ./includes/header.ejs %>
2 <div id="masonry_container"> 2 <div id="masonry_container">
3 - 한식 3 + <% var count = 0; %>
4 - <% for (var i in videos) { %> 4 + <% for (var i in video) { %>
5 - <div id="<%=videos[i].id%>" vid="<%=videos[i].video_id%>"> 5 + <div>
6 + <%=video[i].category.title%>
6 </div> 7 </div>
7 - <%};%> 8 + <% for (var j in video[i].videos) { %>
9 + <div id="<%=count%>" vid="<%=video[i].videos[j].video_id%>">
10 + </div>
11 + <%count++;};};%>
8 </div> 12 </div>
9 13
10 -<style type="text/css"> 14 + <style type="text/css">
11 -.masonry-grid img { max-width: 260px; } 15 + .masonry-grid img {
12 -</style> 16 + max-width: 260px;
13 -<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> 17 + }
14 -<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script> 18 + </style>
15 -<script type="text/javascript"> 19 + <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
20 + <script type="text/javascript"
21 + src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
22 + <script type="text/javascript">
16 var $masonry_container = $('#masonry_container'); 23 var $masonry_container = $('#masonry_container');
17 - $masonry_container.imagesLoaded(function(){ 24 + $masonry_container.imagesLoaded(function () {
18 $masonry_container.masonry({ 25 $masonry_container.masonry({
19 - itemSelector : '.masonry-grid', 26 + itemSelector: '.masonry-grid',
20 - columnWidth : 270 27 + columnWidth: 270
21 }); 28 });
22 }); 29 });
23 -</script> 30 + </script>
24 -<script> 31 + <script>
25 var tag = document.createElement('script'); 32 var tag = document.createElement('script');
26 33
27 tag.src = "https://www.youtube.com/iframe_api"; 34 tag.src = "https://www.youtube.com/iframe_api";
28 var firstScriptTag = document.getElementsByTagName('script')[0]; 35 var firstScriptTag = document.getElementsByTagName('script')[0];
29 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 36 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
30 -
31 var player; 37 var player;
32 var players = []; 38 var players = [];
33 var videoIds = []; 39 var videoIds = [];
34 - for (var i = 0;i<10;i++) { 40 + for (var i = 0; i < 30; i++) {
35 players.push(String(i)); 41 players.push(String(i));
36 - videoIds.push($('#'+i).attr('vid')); 42 + videoIds.push($('#' + players[i]).attr('vid'));
37 } 43 }
38 44
39 function onYouTubeIframeAPIReady() { 45 function onYouTubeIframeAPIReady() {
...@@ -56,5 +62,5 @@ ...@@ -56,5 +62,5 @@
56 // } 62 // }
57 // function stopVideo() { 63 // function stopVideo() {
58 // } 64 // }
59 -</script>
60 -<% include ./includes/footer.ejs %>
...\ No newline at end of file ...\ No newline at end of file
65 + </script>
66 + <% include ./includes/footer.ejs %>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
30 </div> 30 </div>
31 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9"> 31 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
32 <ul class="nav navbar-nav"> 32 <ul class="nav navbar-nav">
33 - <li class="active"> 33 + <li>
34 <a href="/">Home</a> 34 <a href="/">Home</a>
35 </li> 35 </li>
36 <li><a href="/categori/products">Categori</a></li> 36 <li><a href="/categori/products">Categori</a></li>
......