<!DOCTYPE html>
<html xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>KOMVO</title>
<link rel="stylesheet" type="text/css" href="../css/base.css"/>
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/komvo-ui.js"></script>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../css/swiper.css">
<!-- Demo styles -->
<style>
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-container-horizontal>.swiper-pagination { position:relative; top:0; right:0%; height:24px; border-bottom:1px solid #e2e3e4; overflow:hidden; }
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet {margin:0 24px;}
.swiper-pagination-clickable .swiper-pagination-bullet { background:#ff0000; height:24px; margin:0 24px; }
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet { height:12px; margin-top:8px; background:url(../images/mnu_sub.png) no-repeat; background-size:500px auto; border-radius:0; }
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(1) {width:64px; background-position:0 0;}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(2) {width:49px; background-position:-111px 0;}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(3) {width:98px; background-position:-208px 0;}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(4) {width:60px; background-position:-354px 0;}
.swiper-pagination-bullet-active {opacity:100%;}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active {background-position:0 -15px;}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active {background-position:-111px -15px;}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(3).swiper-pagination-bullet-active {background-position:-208px -15px;}
.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(4).swiper-pagination-bullet-active {background-position:-354px -15px;}
.swiper-wrapper {height:100%; min-height:480px; }
.swiper-slide {
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.subContent .cds_h2 { height:50px; overflow:hidden; }
.subContent .sector {background:url(../images/mnu_sub.png); background-size:500px 28px; }
.subContent .sector.smnu01 {background-position:0 0;}
.subContent .sector.smnu02 {background-position:112px 0;}
.subContent .sector.smnu03 {background-position:208px 0;}
.loadingOn {
background : url(../images/komvo_Loding1.gif) 0 0 no-repeat;
-webkit-background-size : 28px 12px;
background-size : 28px 12px;
}
.loadingOff {
background : url(../images/komvo_Loding2.gif) 0 0 no-repeat;
-webkit-background-size : 28px 12px;
background-size : 28px 12px;
}
.hr_ld {margin:20px 0; overflow:hidden;}
.loadingOn,
.loadingOff {text-align:center;display:block; height:12px; background-position:50% 50%; }
.loadingOn em,
.loadingOff em {border:0; position:absolute; top:-10000px; left:-10000px; height:1px;font-size:1px; line-height:1px;}
</style>
<script>
var result_json="";
var renult_nextPage="";
var result_nextValue="";
var isComplete = false;
var lank =0;
$(document).ready(function(){
fn_load("0");
});
fn_load = function(type){
// 마지막 데이타 체크
if ( type != "0" && renult_nextPage == undefined ){
alert('더이상 데이타가 없습니다.');
return;
}
$.ajax({
url: "https://www.googleapis.com/youtube/v3/playlistItems?"
+ [
"part=snippet",
"playlistId=PLSJkNdQGrU_z6TaXcxywg11bUKe6JFL71",
"order=date",
"maxResults=10",
"pageToken="+renult_nextPage,
"key=AIzaSyApAIIzHW07iHsS1z_ON4fLC_IAHy4sp64"
].join("&"),
dataType: "jsonp",
success: function(data){
result_json = data.items;
renult_nextPage = data.nextPageToken;
if(result_json.length >0)
{
for(i=0;i<result_json.length;i++){
//alert(result_json[i].id.videoId);
//alert(result_json[i].snippet.channelTitle);
lank = lank + 1;
var result_Value="<div class='wrp_cds'><div class='cds'>";
result_Value= result_Value + "<div class='cds_addition'>";
result_Value= result_Value + "<object type='text/html' data='http://www.youtube.com/embed/" + result_json[i].snippet.resourceId.videoId +"' allowFullScreen></object>";
result_Value= result_Value + "</div>";
result_Value= result_Value + "</div></div>";
$("#now").append(result_Value);
/*
var result_Value="<div class='wrp_cds'><div class='cds'>";
result_Value= result_Value + "<div class='cds_addition'><img data-src='"+result_json[i].snippet.thumbnails.high.url+"' width='100%' alt='' src='"+result_json[i].snippet.thumbnails.high.url+"'>"+lank+"</div>";
result_Value= result_Value + "<div class='cds_explain'><h2 class='cds_h2'><a href='play_jw.html?v=" + result_json[i].id.videoId + "&title=" + escape(result_json[i].snippet.title) + "' >" + result_json[i].snippet.title +"</a></h2></div>";
result_Value= result_Value + "<div class='cds_bundle'><a href='play_jw.html?v=" + result_json[i].id.videoId + "&title=" + escape(result_json[i].snippet.title) + "' class='cds_send _MM_SHARE' ><span class='imh im_send'>33,636,054 views</span></a></div><a href='#' class='cds_a' ><div><span class='blind'>"+result_json[i].snippet.publishedAt +"</span></div></a>";
result_Value= result_Value + "</div></div>";
*/
//console.log(result_Value);
//alert(result_Value);
//$("#now").append(result_Value);
}
}
}
});
}
// 하단 스크롤 데이타 append
$(document).ready(function (event){
$(window).scroll(function(){
var scrollHeight = $(window).scrollTop() + $(window).height();
var documentHeight = $(document).height();
//스크롤이 맨아래로 갔는지 아닌지 확인하는 if문
if(scrollHeight == documentHeight){
fn_load("2")
}
});
});
</script>
<!-- Swiper JS -->
<script src="../js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 30,
});
</script>
</head>
<body>
<nav class="snb">
<div class="container">
<ul class="menuList">
<li><a href="#none">Home</a></li>
<li><a href="#none">TV Program</a></li>
<li><a href="#none" class="on">Entertainment</a></li>
<li><a href="#none">Fan’s Video</a></li>
<li><a href="#none">Favorite</a></li>
</ul>
<div class="userCtrlWrap">
<div class="setting">
<a href="#">Settings</a>
</div>
</div>
</div>
</nav>
<div id="wrap">
<header>
<div class="top">
<a href="#" class="btnMenu jsNavSnb">목록</a>
<!-- SubPage -->
<h1><a href="#"><span class="tit">TV Program</span></a></h1>
<a href="#" class="orderP">Popular</a>
<!--
<a href="#" class="orderP on">Popular</a>
<a href="#" class="orderL">Latest</a>
<a href="#" class="orderL on">Latest</a>
-->
<!-- MainPage Only -->
<!-- <h1><a href="#"><span class="logo">KOMVO logo</span></a></h1> -->
<a href="#" onclick="javascript:openLayerPop1(0);return false;" class="btnSearch">Search</a>
<div class="laypopup inPop search">
<!-- Search -->
<div class="search_form" id="form_base">
<label>Search</label>
<div class="fit-textinput-unit">
<input type="text" placeholder="Search Artists or Videos" >
<div class="fit-clear-btn"><a href="#">Delete</a></div>
</div>
</div>
<!--// Search -->
</div>
</div>
</header>
<div id="content" class="subContent">
<div id="contWrap">
<!-- flicking view start -->
<div class="swiper-container">
<div class="swiper-pagination"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div id="now" class="wrap id_now"></div>
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
</div>
<!-- flicking view End -->
</div>
</div>
<div id="footer">
<a href="#" class="spr btnTop">Top</a>
</div>
</div>
</body>
</html>
':::: 개발 :::: > ::: JSCRIPT :::' 카테고리의 다른 글
| 여러건 체크박스 동시 체크 (0) | 2015.09.11 |
|---|---|
| 체크박스 체크 유무 파악후 변수 만들기 (0) | 2015.09.10 |
| 무한스크롤 / 하단 이벤트 잡아서 한개씩 붙이기.. (2) | 2015.07.01 |
| Flick 테스트 (2) | 2015.05.26 |
| Node.js 전역변수.. __filename __dirname 전역객체 (0) | 2015.03.31 |
| node.js express 설치 할때 애러 ( UNABLE_TO_VERIFY_LEAF_SIGNATURE) (2) | 2015.03.23 |
| 유튜브 api 활용 목록 가져오기 (0) | 2014.12.18 |
| 크롬 에서 animate scrollTop 오류 (0) | 2014.11.24 |