$(function(){
\t
\t // tabbed menus
\t
\t //$('.menu .item').tab();
\t
\t // first script to pull posts
\t
var accessToken = '271323200.1677ed0.67c49d5002704bc09c3c77320ec138a2'; // use your own token
$.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
$.each(insta.data,function (photos,src) {
var parsedDate = new Date(1000*this.created_time);
if (photos === 100) { return false; }
\t \t // template
$(
'<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 grip_wrap">' +
'<div class="grip_hang_topp"></div>' +
'<div class="col-xs-12 grip">' +
'<a class="fancybox zero" rel="gallery1" href="' + this.images.standard_resolution.url + '">' +
'<img src="' + this.images.thumbnail.url + '" />' +
'</a>' +
'<div class="description">' + this.user.username + '</div>' +
\t '<span class="right floated">' + '<i class="fa fa-heart">'+ '</i>' + this.likes.count +' 0 likes'+'</span>' +
\t '<span class="left floated">' + '<i class="second fa fa-comment">'+ '</i>' + this.comments.count +' comments'+'</span> '+ moment(parsedDate).format('MM/DD/YYYY') +
'</div>' +
'<div class="grip_hang_bott"></div>' +
'</div>'
).appendTo('#instafeed');
});
});
\t
// script to for search
//var accessToken = ''; // use your own token \t
\t /*
$('.ui.search')
.search({
type : 'category',
minCharacters : 200,
apiSettings : {
onResponse: function(githubResponse) {
var
response = {
results : {}
}
;
// translate GitHb API response to work with search
$.each(githubResponse.items, function(index, item) {
var
language = item.language || 'Unknown',
maxResults = 200
;
if(index >= maxResults) {
return false;
}
// create new language category
if(response.results[language] === undefined) {
response.results[language] = {
name : language,
results : []
};
}
// add result to category
response.results[language].results.push({
title : item.name,
description : item.description,
url : item.html_url
});
});
return response;
},
url: '//api.github.com/search/repositories?q={query}'
}
})
;
*/
});
.ui.card .meta, .ui.cards > .card .meta { display: none; }
.ui.card > .content > .header+.description, .ui.card > .content>.meta + .description, .ui.cards > .card > .content > .header + .description, .ui.cards > .card > .content > .meta + .description { margin-top: 0; }
.ui.card > .extra, .ui.cards > .card > .extra { font-size: 10px; }
i { margin-right: 3px; }
.second { margin-left: 10px; }
.floated { font-size: 11px; }
@media only screen and (max-width: 480px) {
.ui.card > .content > .header:not(.ui), .ui.cards>.card>.content>.header:not(.ui) {
font-weight: normal;
font-size: 1em;
}
.ui.card > .content, .ui.cards > .card > .content { padding: .5em; }
}
/*-- --*/
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
padding: 8px;
}
h1 {
font-size: 28px;
margin-bottom: 10px;
padding: 8px;
}
h2 {
/* border-top: dotted 2px blue; */
font-size: 24px;
padding-top: 8px;
margin-bottom: 4px;
margin-top: 8px;
}
.tupper {
/* border-bottom: solid 2px blue; */
padding: 0;
padding-bottom: 8px;
margin: 0;
}
.main_wrap {
padding-bottom: 0;
border-bottom: solid 2px blue;
margin-bottom: 10px;
}
.grip_wrap:after {
content: '';
position: absolute;
z-index: 1;
display: block;
width: 50px;
height: 5px;
background: blue;
top: 50%;
right: 0;
}
.grip_wrap:before {
content: '';
position: absolute;
z-index: 1;
display: block;
width: 50px;
height: 5px;
background: blue;
top: 50%;
left: 0;
}
/* .grip_wrap:first-child:before { display: none; }
.grip_wrap:last-child:after { display: none; } */
/* .grip_wrap:nth-child(4n+4):after { display: none; } */
/* .grip_wrap:nth-child(5):before,
.grip_wrap:nth-child(9):before,
.grip_wrap:nth-child(13):before
{ display: none; } */
/* .grip_wrap:before > .grip:hover, .grip_wrap:after > .grip:hover { } */
.grip {
/* opacity: .5; */
position: relative;
z-index: 2;
min-width: 150px;
background: #fff;
padding: 10px;
border: solid 2px blue;
border-radius: 10px;
/* overflow: hidden; */
-webkit-box-shadow: 0px 0px 18px -5px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 18px -5px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 18px -5px rgba(0, 0, 0, 1);
}
.grip:hover {
border: solid 2px green;
cursor: pointer;
}
.grip img {
/* opacity: 0; */
display: block;
width: 124px;
height: 124px;
border: solid 1px #000;
margin: 0 auto;
}
.grip a {
position: relative;
display: block;
width: 124px;
height: 124px;
margin: auto;
}
.grip .icent {
position: absolute;
display: block;
width: 124px;
height: 124px;
left: 50%;
}
.grip div {
padding: 5px;
padding-top: 3px;
margin-top: 8px;
width: 100%;
max-height: 28px;
overflow: hidden;
text-align: center;
background: #cccccc;
}
.grip_hang_topp {
content: '';
position: absolute;
z-index: 1;
height: 50px;
width: 5px;
background: blue;
left: 50%;
top: 0;
}
.grip_hang_bott {
content: '';
position: absolute;
z-index: 1;
height: 50px;
width: 5px;
background: blue;
left: 50%;
bottom: 0;
}
.panel-body {
padding: 0;
}
.panel {
border-top: solid 2px blue;
border-bottom: solid 2px blue;
}
.panel-default >.panel-heading {
background: #ead554;
border: none;
}
.panel-heading a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <div class="ui bottom attached tab active" data-tab="first">-->
<div class="ui container">
<d**strong text**iv id="instafeed" class="ui three column doubling centered grid container"></div>
</div>
<!--</div> -->
'（date.getMonth（） +1 ）+ '+' date.getDate（） '+' date.getFullYear（） '+ '試行'（date.getMonth（）+ 1）+'/'+ date.getDate（）+'/'+ date.getFullYear（ ）+ ' –
私はこれをコンソールエラーにしようとしましたIm取得は日付が定義されていません – riotgear
私はそれを修正しようとしましたが、今はデータエラーが発生しています – riotgear