javascript - 一起使用 Instafeed 和 SimplyScroll

Question

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

我是一名 super 新手网页设计师，我已经进行了数天的研究，试图找出正确的 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 并按 Enter 键)，它将按预期工作。

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

半工作页面的链接如下

http://integrantsightsandsounds.com/instatest32.html

Answer 1

我还得费点功夫才能让它工作，我把它放在我为 friend 做的网站上，你可以看看是否有帮助( 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 加载图片后就会滚动。

在您的网站上尝试如下脚本(根据需要进行调整)，看看是否有帮助，它会创建提要，然后应用滚动:

    <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> 

谢谢