0
私はBehaviour APIを使用して自動的に更新されたオンラインポートフォリオを作成するために、Behavior APIキーでさまざまなスクリプトを使用しようとしました。私のBehaviour APIキーでは何も動作しません
私が今使っているのは、jQuery、JSONだけを使って見つけたのがもっとも簡単なもので、TwitterのBootstrapと統合されています。ここで
は、私のソースコードは次のとおりです。
HTML：
<!DOCTYPE html>
<html lang="en">
<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>Bootstrap Portfolio with Behance API & jQuery</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css" rel="stylesheet">
<link href="vendor/prism.css" rel="stylesheet">
<!-- http://fontpair.co/ -->
<link href="//fonts.googleapis.com/css?family=Quando|Judson" rel="stylesheet">
<!-- Demo stylesheet -->
<link href="demo.css" rel="stylesheet">
</head>
<body class="demo">
<div class="demo-intro">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<a href="http://siamkreative.com/">
<img src="https://secure.gravatar.com/avatar/f634817190acb57d0f3e61e7c68eabbb?s=160" alt="Julien Vernet" class="avatar img-circle">
</a>
<h1>Bootstrap Portfolio<br> with Behance API & jQuery</h1>
<p class="lead">If you're using Behance to showcase your projects and you would like to embed your portfolio on your site, look no further.</p>
<p>This quick example show you how to retrieve your projects from Behance using their API, store the data in the browser, and display it using Bootstrap 3 markup. To render the template we use jQuery, but you could also use a template engine such as <a href="http://beebole.com/pure/">pure.js</a> or <a href="http://handlebarsjs.com/">handlebars</a>. Find the most suitable template engine <a href="https://garann.github.io/template-chooser/">here</a>.</p>
<div class="btn-group" role="group">
<a href="#grid" class="btn btn-lg btn-default">Grid Layout</a>
<a href="#slider" class="btn btn-lg btn-primary">Slider Layout</a>
</div>
</div>
</div>
</div>
</div>
<div class="demo-grid" id="grid">
<div class="container">
<h2>Grid Layout <small>Using Bootstrap Grid</small></h2>
<div id="be_grid" class="row be__portfolio be__grid">Loading...</div>
</div>
</div>
<div class="demo-slider" id="slider">
<div class="container">
<h2>Slider Layout <small>Using Slick Carousel</small></h2>
<div id="be_slider" class="row be__portfolio be__slider">Loading...</div>
</div>
</div>
<div class="demo-source" id="source">
<div class="container">
<h2>Source code</h2>
<!-- http://prismjs.com/plugins/file-highlight/ -->
<pre class="line-numbers" data-src="https://raw.githubusercontent.com/SiamKreative/Bootstrap-Portfolio-Behance-API/master/jquery.behance.js"></pre>
</div>
</div>
<div class="demo-comments">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h3>Leave your feedback below :)</h3>
<br>
<div id="disqus_thread"></div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/layzr.js/1.4.3/layzr.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.5.6/jquery.smooth-scroll.min.js"></script>
<script src="vendor/prism.js"></script>
<script src="jquery.behance.js"></script>
<script>
$(function() {
$('a').smoothScroll();
});
</script>
<script>
(function() {
var d = document, s = d.createElement('script');
s.src = '//siamkreative.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</body>
</html>
はここでjQueryの：
$(function() {
var beUsername = 'josephrobee27e',
beApiKey = 'ugCqRrCuAuHAD6gvDTmegYXLxO2lWVca',
bePerPage = 12,
beProjectAPI = '//www.behance.net/v2/users/' + beUsername + '/projects?callback=?&api_key=' + beApiKey + '&per_page=' + bePerPage,
beItemWidth = 360,
beItemHeight = 282,
beLazyLoad = true,
beLinkTarget = '_self';
/**
* Get Data from Behance API
*/
if (sessionStorage.getItem('behanceProject')) {
setPortfolioTemplate();
} else {
// Load JSON-encoded data from the Behance API & Store it in sessionStorage
$.getJSON(beProjectAPI, function (project) {
sessionStorage.setItem('behanceProject', JSON.stringify(project));
setPortfolioTemplate();
});
}
/**
* Populate Data
*/
function setPortfolioTemplate() {
var projects = JSON.parse(sessionStorage.getItem('behanceProject')).projects;
var portfolio = $('.be__portfolio').html('');
var items = '';
var image = '';
$.each(projects, function (i, val) {
// If Lazy load is enabled, edit the markup accordingly
beLazyLoad ? image = 'src="images/loading.png" data-lazy="' + val.covers.original + '"' : image = 'src="' + val.covers.original + '"';
// Create the items template
items += '<div class="be__item be__item__' + val.id + ' col-lg-4 col-md-4 col-sm-4 col-xs-6 col-xxs-12">';
items += '<a href="' + val.url + '" title="' + val.name + '" target="' + beLinkTarget + '">';
items += '<img class="img-responsive" ' + image + ' width="' + beItemWidth + '" height="' + beItemHeight + '" alt="' + val.name + '">';
items += '</a>';
items += '</div>';
// How many items are shown
return i < bePerPage;
});
// Append items only once
portfolio.each(function (index, el) {
$(el).append(items);
});
// Create Lazy Load instance for Grid Layout
if (beLazyLoad) {
var layzr = new Layzr({
container: '.be__grid',
selector: '[data-lazy]',
attr: 'data-lazy'
});
}
// Slider Layout
$('.be__slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
lazyLoad: 'ondemand',
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
}
});
私はコードでは問題を見ていません。 
は、最後にここにJSONのスクリーンショットは、それが引いてのファイルですので、私はそれが情報にスクリプトを印刷していますことを知っている必要があります：
任意の助けになるしかし、これはすべてのことが表示されています真剣に感謝する。私は正直なところ、私が間違っていることを知りません。私はusernameとAPI keyを含んでいました。私のアカウントが間違って設定されている可能性があり、誰かがそれを手伝ってくれるかもしれないと思ったからです。
私のためにうまく働いています：http://codepen.io/anon/pen/OXdrXLコンソールでエラーがないか確認してください。 – yuriy636
@ yuriy636私は[this]（http://puu.sh/qz6tl/e996578ea4.png）を手に入れています。私はそれがローカルマシン上で動作しない可能性がありますか？ –