javascript - 在线轮播中显示图像不起作用

Question

我正在尝试为我的 personal website 创建一个画廊.问题是画廊没有出现在轮播中，而是像网格画廊一样显示。我已经关注了官方的一切setup指导。当我检查 page ，我在控制台中写了这样的东西:

blueimp Gallery: No or empty list provided as first argument. HTMLCollection[18]

画廊代码:

<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>
 <div id="instafeed"></div>
<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        userId: '',
        accessToken: '',
        clientId: '',
        template: {% raw %}'<a href = {{image}}  ><img src = "{{image}}"></a>'{% endraw %},
        sortBy: 'most-recent',
        limit: 18,
        links: false
    });
    feed.run();
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.blueimp-gallery.min.js"></script>
<script>
blueimp.Gallery(
    document.getElementById('instafeed').getElementsByTagName('a'),
    {
        container: '#blueimp-gallery-carousel',
        carousel: true
    }
);
</script>

{% raw %} 因为网站是用 jekyll 制作的，所以使用了。我读过它here .图片库可以在我的底部找到 personal site .

更新代码:

<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
 </div>
 <div id = "instafeed">
 </div>
<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        userId: '270912755',
        resolution: 'standard_resolution',
        accessToken: '270912755.4e019ce.38f9a6730d14410b919b96cc3ee658dd',
        clientId: '4e019ce8ec2744dca631db3ddf85607d',
        template: {% raw %}'<a href = "{{image}}" ><img src = "{{image}}"></a>'{% endraw %},
        sortBy: 'most-recent',
        limit: 18,
        links: false,
        mock: true,
        success: function(response) {
            blueimp.Gallery(
            document.getElementById('instafeed').getElementsByTagName('a'),
            {       container: '#blueimp-gallery-carousel',
                    carousel: true
            }
            );
        }
    });
    feed.run();
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.blueimp-gallery.min.js"></script>

Answer 1

下面的代码应该可以解决您的计时问题:

var feed = new Instafeed({
    get: 'user',
    userId: '',
    accessToken: '',
    clientId: '',
    template: '{% raw %}<a href = {{image}}  ><img src = "{{image}}"></a>{% endraw %}',
    sortBy: 'most-recent',
    limit: 18,
    links: false,
    after: startCarousel
});
feed.run();

function startCarousel()
{
  blueimp.Gallery(
    document.getElementById('instafeed').getElementsByTagName('a'),
    {
        container: '#blueimp-gallery-carousel',
        carousel: true
    }
  );
}

我已将 Carousel 代码包装到一个函数中，该函数由 Instafeed 代码使用选项 after 回调。这应该会在加载来自 Instagram 的图像后启动 Carousel。

Advanced Options (from the Instafeed Github)

• before (function) - A callback function called before fetching images from Instagram.
  • after (function) - A callback function called when images have been added to the page.
  • success (function) - A callback function called when Instagram returns valid data. (argument -> json object)
  • error (function) - A callback function called when there is an error fetching images. (argument -> string message)
  • mock (bool) - Set to true fetch data without inserting images into DOM. Use with success callback.
  • filter (function) - A function used to exclude images from your results. The function will be given the image data as an argument, and expects the function to return a boolean. See the example below for more information.