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

Question

我正在尝试为我的 personal website. The problem is that the the gallery doesn't show up in a carousel but instead shows like a grid gallery. I have followed everything from the official setup guide. When I inspect the 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.

Answer 2

试试这个：

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

Answer 3

在inst feed的after call函数中调用blueimp.Gallery

<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,
 after: function () {    
               blueimp.Gallery(
    document.getElementById('instafeed').getElementsByTagName('a'),
    {
        container: '#blueimp-gallery-carousel',
        carousel: true
    }
);
            },
    });
    feed.run();
</script>

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

Display images in inline carousel not working

javascript

blueimp

instafeedjs