文章/答案/技术大牛

发布

社区首页 >问答首页 >将Instafeed和SimplyScroll结合使用

问将Instafeed和SimplyScroll结合使用
EN

Stack Overflow用户

提问于 2014-11-12 20:20:11

回答 1查看 1.5K关注 0票数 1

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

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

据我所理解，正确的方法是使用Instafeed HTML创建一个目标ID，SimplyScroll调用该ID作为源图像。

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

<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

javascript

html

simplyscroll

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-11-23 01:41:22

我还得花点功夫才能让它发挥作用，我把它放到了一个我为朋友做的网站上，你可以看看它是否有用(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>

谢谢

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26895833

复制

相似问题

问将Instafeed和SimplyScroll结合使用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将Instafeed和SimplyScroll结合使用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将Instafeed和SimplyScroll结合使用
EN