1

Attempting to use SimplyScroll to scroll Instagram images, but can't determine the proper HTML markup to get the two scripts to function together.

I'm a super novice web designer, and I've done days of research in trying to work out the correct JavaScript HTML to get these two scripts working together, but to no avail. Any assistance, or direction to resources is appreciated!

Best as I can understand, the correct method is to create a target ID with the Instafeed HTML , which SimplyScroll calls as the source images.

Closest I've gotten so far is below. 

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

In this example, Instafeed loads the images, but is not styled properly and does not scroll. If the user reloads the page (not refresh, but instead selects the URL in the browser and hits enter) it works as intended.

I'm completely stumped on how and why it works on page reload only.

Link for the semi-working page is below

http://integrantsightsandsounds.com/instatest32.html

4

1 回答 1

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 加载就会滚动。

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

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

谢谢

于 2014-11-23T01:41:22.813 回答