Question

尝试使用SimplyScroll滚动Instagram图像，但无法确定正确的HTML标记以使两个脚本一起运行。

我是一名超级新手网页设计师，我已经做了几天的研究，试图找出正确的JavaScript HTML来让这两个脚本一起工作，但无济于事。任何帮助或对资源的指导都表示赞赏！

最好，我能理解，正确的方法是使用Instafeed HTML创建目标ID，SimplyScroll将其称为源图像。

最近我到目前为止已经到了。

<script type="text/javascript">
var feed = new Instafeed({
get: 'user',
target: 'instagram_list',
userId: XXXXXXXXXXX,
limit: 15,
accessToken: 'XXXXXXXXXXXXXXXXXXXXXX,
resolution: 'thumbnail',
after: function() {
$("#instagram_list").simplyScroll({
  speed: 1,
  frameRate: 20,
  orientation: 'horizontal',
  direction: 'forwards',
  customClass: 'instagram_scroller'
});
}
});
(jQuery);
feed.run();
</script> 

<div id="instagram_list" class="simply-scroll-clip"> </div>

在此示例中，Instafeed加载图像，但未正确设置样式且不滚动。如果用户重新加载页面（不刷新，而是在浏览器中选择URL并点击输入），则按预期工作。

我完全不知道它仅在页面重新加载时如何以及为何起作用。

半工作页面的链接位于

之下

http://integrantsightsandsounds.com/instatest32.html

Answer 1

我也不得不摆弄一下才能使这个工作，我把它放在我为朋友做的网站上，你可以看看它是否有帮助（http://www.zervasandpepper.com - 警告，它播放音乐当你加载它！）我仍然想稍微调整一下，例如加载时防止行重叠，但它确实按预期工作。

我导入了所需的脚本，包括SimplyScroll JavaScript，Instafeed JavaScript和SimplyScroll css。

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
    </script>
    <script type="text/javascript" src="../scripts/Plugins/jquery.simplyscroll.min.js"></script>
    <script type="text/javascript" src="../scripts/Plugins/instafeed.min.js"></script>
    <link rel="stylesheet" href="../scripts/Plugins/jquery.simplyscroll.css" media="all"
        type="text/css">

    <script type="text/javascript">
        (function ($) {
            $(function () { //on DOM ready 
                var feed = new Instafeed({
                    get: 'user',
                    userId: XXXXXXXX,
                    clientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
                    accessToken: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
                });
                feed.run();
                $("#instafeed").simplyScroll({
                    autoMode: 'bounce',
                    startOnLoad: true,
                    auto: true,
                    speed: 1,
                    pauseOnHover: true,
                    pauseOnTouch: true
                });
            });
        })(jQuery);
    </script>

命令的排序让我想知道你的JavaScript中是否有一些东西被命令以防止在加载图像后发生滚动。这可以解释为什么这些图片一旦被Instagram加载就会滚动。

在您的网站上尝试以下脚本（根据需要进行调整）并查看是否有帮助，它会创建Feed，然后应用滚动：

    <script type="text/javascript">
        (function ($) {
            $(function () { //on DOM ready 
                  var feed = new Instafeed({
              get: 'user',
              target: 'instagram_list',
              userId: XXXXXXXXXXXXXXx,
              limit: 15,
              accessToken: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
              resolution: 'thumbnail'
                                });
                                feed.run();
                                $("#instagram_list").simplyScroll({
                  speed: 1,
                  frameRate: 20,
                  orientation: 'horizontal',
                  direction: 'forwards',
                  customClass: 'instagram_scroller'
                }); 
                            });
                        })(jQuery);

</script>

由于

一起使用Instafeed和SimplyScroll

1 个答案: