Instagram - 带有 instafeedjs 的 Bootstrap 3 轮播答案

【问题标题】：Instagram - Bootstrap 3 carousel with instafeedjsInstagram - 带有 instafeedjs 的 Bootstrap 3 轮播
【发布时间】：2015-05-20 09:22:23
【问题描述】：

我正在使用 instafeedjs 在网站上显示图片。我正在尝试通过以下链接添加 Bootstrap 3 轮播。 - http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=carousel-methods.
当我运行代码时，它什么也不显示。

   <script type="text/javascript">  
    var feed = new Instafeed({  

        get: 'tagged',
        tagName: '****',
        clientId: '*************',
        limit: 20,
        sortBy: 'most-recent',
        template: '<div class="item"><img src="{{image}}"/></div>',
        success: function (data) {
            $('.carousel').carousel({ interval: 3000 });
            for (var i = 0; i < $(data.data).size() ; i++) {
          $('.carousel-inner').append('<div class="item"></div>');
       $('.item').append('<div class="col-sm-2 instagram-  placeholder"><img  src=' + data.data[i].images.standard_resolution.url + ' class="img-responsive"></div>');
            }  
            $('.carousel').carousel('next');

            },
            after: function () {
            $('#instafeed > div:nth-child(1)').addClass('active');
      }

   });
    feed.run();
</script>

这是 HTML：

  <div id="carousel" class="carousel slide" data-interval="false">
    <div class="carousel-inner" id="instafeed"></div>
 </div>

【问题讨论】：

标签： javascript jquery html instagram instafeedjs

【解决方案1】：

这是支持加载提要轮播的代码。图像的数量受限于 instafeed 属性“limit”设置的值，并且轮播无限运行。

HTML

<html>
<head>
    <title>Example of Bootstrap 3 Carousel with Instafeed Instagram feeds - Ajith</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="http://sriajith.info/blog/wp-content/uploads/2015/05/instafeed.min_.js"></script>
</head>

<body>
    <div class="bs-example">
        <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
            <div class="carousel-inner" id="instafeed">
            </div>
        </div>
    </div>
</body>
</html>

JavaScript

<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'ajith',
        clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
        limit: 20,
        sortBy: 'most-recent',
        resolution: "low_resolution",
        template: '<div class="item"><img src="{{image}}"/></div>',
        after: function () {
            $('#instafeed > div:nth-child(1)').addClass('active');
        }
    });
    feed.run();
</script>

找到工作演示 here

【讨论】：