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>

由于该网站是在jekyll中制作的，因此使用了

{％raw％}。我读到了它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代码包装到一个函数中，该函数由带有选项after的 Instafeed 代码回调。这应该在加载 Instagram 的图像后启动Carousel。

高级选项（来自Instafeed Github）


before（function） - 在从Instagram获取图像之前调用的回调函数。

after（function） - 在图像添加到页面时调用的回调函数。

success（function） - 当Instagram返回有效数据时调用的回调函数。（参数 - ＆gt; json对象）

error（function） - 获取图像时出错时调用的回调函数。（参数 - ＆gt;字符串消息）

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
    }
 );
});

在内联播放器中显示图像不起作用

3 个答案: