Nothing works with my Behance API Key

Question

I've tried to use a multitude of different scripts with my Behance API key to try and create an online portfolio updated automatically through my managing of my Behance Profile.

The one I'm using now is the simplest I've found, using only jQuery, JSON, and is integrated with Bootstrap by Twitter.

Here's my source code:

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>

Here's the 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
            }
        }]
    });
}

});

I see no issues in the code. However this is all that is displayed: 屏幕截图

Lastly here's a screen shot of the JSON file it's pulling, so I know that it's printing the information the script requires:

屏幕截图

Any help will be seriously appreciated. I honestly have no clue what I'm doing wrong. I included my username and API key because I thought maybe my account was set up wrong and maybe someone could help me with that also.

Answer 1

出于任何原因证明该应用程序无法在本地计算机上运行。

Nothing works with my Behance API Key

Question

1 answers

solution1
0 2016-08-13 18:52:10

Nothing works with my Behance API Key

Question

1 answers

solution1 0 2016-08-13 18:52:10

solution1
0 2016-08-13 18:52:10