Javascript 同时使用Instafeed和SimplyScroll

尝试使用SimpleScroll滚动Instagram图像，但无法确定正确的HTML标记以使两个脚本一起工作

我是一个超级新手的网页设计师，我已经做了几天的研究，试图找出正确的JavaScript HTML，使这两个脚本一起工作，但没有任何效果。感谢您对资源的任何帮助或指导

据我所知，正确的方法是使用Instafeed HTML创建目标ID，SimpleScroll将其作为源图像调用

到目前为止，我得到的最接近的是下面

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

var feed=新Instafeed({
获取：“用户”，
目标：“instagram_列表”，
用户ID:XXXXXXXXXX，
限额：15，
accessToken:'XXXXXXXXXXXXXXXXXXXXXX，
分辨率：“缩略图”，
之后：函数（）{
$（“#instagram_列表”）。simplyScroll({
速度：1，
帧率：20，
方向：“水平”，
方向：'向前'，
customClass:“instagram\u scroller”
});
}
});
（jQuery）；
feed.run（）；

在本例中，Instafeed加载图像，但未正确设置样式，也不会滚动。如果用户重新加载页面（不是刷新，而是在浏览器中选择URL并按enter键），它将按预期工作

我完全搞不懂它是如何以及为什么只在重新加载页面时工作的

下面是半工作页面的链接

---

我还需要花点时间来让它工作，我已经把它放在我为一个朋友做的一个网站上，你可以看看它是否有用（-警告，当你加载它时它会播放音乐！）我仍然想稍微调整一下，例如，在加载时防止行重叠，但它确实按预期工作

我导入了所需的脚本，包括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>

（函数（$）{
$（DOM就绪上的函数（）{//）
var feed=新Instafeed({
获取：“用户”，
用户ID:XXXXXXXX，
clientId:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'，
accessToken:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
});
feed.run（）；
$（“#instafeed”）.simplyScroll({
自动模式：“反弹”，
startOnLoad：是的，
是的，
速度：1，
pauseOnHover:是的，
pauseOnTouch：真的
});
});
})（jQuery）；

命令的顺序让我怀疑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> 

（函数（$）{
$（DOM就绪上的函数（）{//）
var feed=新Instafeed({
获取：“用户”，
目标：“instagram_列表”，
用户ID:XXXXXXXXXXXXX，
限额：15，
accessToken:'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX'，
分辨率：“缩略图”
});
feed.run（）；
$（“#instagram_列表”）。simplyScroll({
速度：1，
帧率：20，
方向：“水平”，
方向：'向前'，
customClass:“instagram\u scroller”
}); 
});
})（jQuery）；

---

谢谢

很高兴听到它：）如果它现在起作用，你可以把它标记为有用的答案。期待在您的网站上看到它！由于Instagram的新要求，Emma再次陷入困境。以下安装程序在Safari的错误控制台中生成错误ReferenceError“找不到变量：Instafeed”。我脑子里都想不出来了！。。。对不起，我不是想给你的答案加上新问题！正在尝试添加到线程。