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

Question

我正在尝试为我的个人网站制作画廊。问题是画廊没有出现在轮播中，而是像网格画廊一样显示。我已遵循官方设置指南中的所有内容。当我检查页面时，我会在控制台中看到类似这样的内容：

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">‹&lt;/a>
    <a class="next">›&lt;/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 制作的。我在这里读到了。图片库可以在我的个人网站底部找到。

更新代码：

<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹&lt;/a>
    <a class="next">›&lt;/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 代码使用 option回调after。 这应该在加载来自Instagram的图像后启动轮播。

高级选项（来自 Instafeed Github）

• before (function) - 在从 Instagram 获取图像之前调用的回调函数。
  • after (function) - 当图像被添加到页面时调用的回调函数。
  • success (function) - Instagram 返回有效数据时调用的回调函数。（参数 -> json 对象）
  • error (function) - 获取图像出错时调用的回调函数。（参数 -> 字符串消息）
  • mock (bool) - 设置为 true 获取数据而不将图像插入 DOM。与成功回调一起使用。
  • filter (function) - 用于从结果中排除图像的函数。该函数将获得图像数据作为参数，并期望该函数返回一个布尔值。有关更多信息，请参见下面的示例。

Answer 2

在 inst feed 的调用函数后调用 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>

Answer 3

尝试这个：

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