0

私は instafeed ライブラリを使用して自分のウェブサイトに instagram の画像を取得しています。現在、instafeed ライブラリを使用すると、画像のキャプションを簡単に取得できます。

今私の問題は、すべての画像の下部にキャプション テキストを表示したいということです。

しかし、これは動的に作成されるため、出力された html を操作することはできません。そのため、CSS を使用してすべての画像の下部に画像テキストを配置できるかどうか疑問に思います。

HTML

<div id="instafeed">
<img src="http://distilleryimage9.s3.amazonaws.com/3a81fe1e206d11e38bc322000a9d0dcb_7.jpg">
<div class="caption">#windows #shadows #art #bw #abstract #overlap</div>
</div>

CSS

.caption {
    background-color:#ccc;
    }

img {
width: 33.33%;
float: left;

 }

JSFiddle

4

2 に答える 2

2

instafeed ライブラリを使用すると、レイアウトに適した方法でテンプレートを指定できます。

たとえば、テンプレートを次のように変更します。

var feed = new Instafeed({
    get: 'tagged',
    tagName: 'overlap',
    clientId: 'baee48560b984845974f6b85a07bf7d9',
    sortBy: 'random',
    links: false,
    resolution: 'standard_resolution',
    template: '<div class="wrap"><img src="{{image}}"/><div class="caption">{{caption}}</div></div>'
});

画像とキャプションを囲む div を提供します。

スタイルを定義して、必要な効果を得ることができます。

Demo Fiddle またDemo txt on img

于 2013-09-18T22:55:38.140 に答える