0

正直なところ、これをどこから始めればよいかわかりません。しかし、私は頭の中でアイデアを思いついたので、それが実行可能かどうかを非常に知りたいと思っています.

Instagram jQuery プラグインを使用して、ハッシュタグに基づいて Instagram 画像を読み込みます。私が達成したい (というか、誰かに達成を手伝ってもらいたい) ことは、ロードする画像の数と、ウィンドウのサイズに応じた幅を設定することです。

元。1 ウィンドウの幅が 1200px の場合、各画像に幅 100px の 12 個の画像を読み込みます。2 ウィンドウの幅が 800px の場合、各画像に幅 80px の画像を 10 個ロードします。

ただし、画像の数とその幅が常にウィンドウの幅の合計に対応するように、これを動的に行う必要があります。これは、画像が1行だけであることを確認するためのものです（「オーバーフロー隠し」などを使用せずに）。

これが私がこれまでに持っているものです

$(document).ready(function() {
var insta_container = $(".instaflow"), insta_next_url

insta_container.instagram({
    hash: 'ASuperAwesomeHashTag',
    clientId : 'MY_CLIENT_ID',
    show : 16,
    onComplete : function (photos, data) {
        insta_next_url = data.pagination.next_url
        var instaimg = $('img.instagram-image');
        instaimg.css({ 'width': ($(window).width()/1) });
    }
})

$('button').on('click', function(){
var button = $(this), text = button.text()

    if (button.text() != 'LOADING' && button.hasClass('icon-plus-sign-alt')){
        button.removeClass('icon-plus-sign-alt')
        button.addClass('loading')
        button.text('LOADING')
        insta_container.instagram({
            next_url : insta_next_url,
            show : 8,
            onComplete : function(photos, data) {
                if ($('.instagram-placeholder').children().text() != ""){
                    button.remove();
                }
                insta_next_url = data.pagination.next_url
                button.text(text)
                button.removeClass('loading')
                button.addClass('icon-plus-sign-alt')
            }
        })
    }
})
});

したがって、「表示」値は、使用する幅に相対的でなければなりません。わずか 600 ピクセル幅のウィンドウに 20 枚の写真を読み込むと、見栄えがよくありません。+ 画像が 1 行しかないことを確認したい (DIV などにオーバーフローが隠されているのを使用しない)。[さらに読み込む] ボタンがあるため、DIV に「トラップ」されている場合、「より多くの画像が表示されない」そのため、ウィンドウの幅を持つ画像の数に基づいて幅も定義する必要があります。

これが「拡散」の質問かもしれないことを理解しています。しかし、誰かが私がこれを成し遂げるのを手伝ってくれると感じたら、私はとても感謝しています.

4

1 に答える 1