2016-08-12 42 views
0

我嘗試使用多種不同的腳本與我的Behance API密鑰來試圖創建一個在線組合,通過管理我的Behance配置文件自動更新。沒有什麼與我的Behance 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 &amp; 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 &amp; 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 
      } 
     }] 
    }); 
} 

}); 

我看到的代碼沒有問題。然而,這是所有顯示: screenshot

最後,這裏的JSON的屏幕截圖文件,它的拉動,所以我知道,它的打印腳本需要的信息:

screenshot

任何幫助將得到認真的讚賞。我真的不知道我做錯了什麼。我包括我的usernameAPI key,因爲我認爲也許我的帳戶設置錯了,也許有人可以幫助我。

+0

適合我:http://codepen.io/anon/pen/OXdrXL檢查您的控制檯是否有錯誤。 – yuriy636

+0

@ yuriy636我得到[this](http://puu.sh/qz6tl/e996578ea4.png)。我有可能它只是不能在本地機器上工作? –

回答

0

因任何原因導致應用程序在本地機器上無法運行。

相關問題