1

SimplyScroll を使用して Instagram の画像をスクロールしようとしていますが、2 つのスクリプトを一緒に機能させるための適切な HTML マークアップを特定できません。

私は超初心者の Web デザイナーであり、これら 2 つのスクリプトを連携させる正しい JavaScript HTML を作成するために何日も調査を行いましたが、役に立ちませんでした。リソースへの支援、または指示をいただければ幸いです。

私が理解している限り、正しい方法は、SimplyScroll がソース画像として呼び出す Instafeed HTML を使用してターゲット 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

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 に答える