mixitup jquery内の画像にキャプションを追加

Question

私はフィルタリング可能でソート可能なギャラリーに優れたMixItUp jqueryを使用しています。 いくつかの例を確認し、画像を使用するように基本的な使用例を変更しました。 私はしかし、キャプションの任意のフォームを取得することはできません。 私はALTテキストを引っ張ってイメージを重ねたjqueryスクリプトをいくつか試してみました。

http://codepen.io/anon/pen/dMwLJZ

をコンテナだけで画像をロードし、フィルタと並べ替えのために割り当てられたクラスやデータのタグを持っています。ここ

は、私はちょうどそれにいくつかの画像をロードしている基本的な例のフォークです。

<div id="Container" class="container"> 
    <img class="mix category-1" data-myorder="1" src="http://placehold.it/350x150"> 
    <img class="mix category-1" data-myorder="2" src="http://placehold.it/350x150"> 
    <img class="mix category-2" data-myorder="3" src="http://placehold.it/350x150"> 
    <img class="mix category-2" data-myorder="4" src="http://placehold.it/350x150"> 

    <div class="gap"></div> 
    <div class="gap"></div> 
</div> 

字幕の表示方法を実演してもらえますか？ 理想的には画像の下部にはあるが、画像の下に表示されるテキストを得ることができたとしても、もちろんそれぞれの画像で並べ替えることができればOKである。コンテナの可能なキャプションが内部に配置することができますよう、画像の周りにラッピングdivを追加

おかげ

Answer 1

が機能します。
属性data-myorderと画像のクラスは、新しいラッピングペアレントに移動されます。

こちらをご覧ください：https://jsfiddle.net/6jc1ynbf/

HTML：

[...] 
<div class="img-wrapper mix category-1" data-myorder="2"> 
    <img src="http://placehold.it/350x150"> 
    <span class="caption">I'm a caption</span> 
</div> 
[...] 

はCSS：

.container .img-wrapper { 
    display: inline-block; 
    position: relative; 
} 
.container .img-wrapper > img { 
    max-width: 100%; 
    max-height: 100%; 
} 
.container .img-wrapper > .caption { 
    color: #eee; 
    font-size: 15px; 
    text-align: right; 
    padding: 4% 6%; 
    float: right; 
} 

あなたの擬似要素はイメージができません（すべてで有効になりますその方法それらの内部にHTMLコンテンツを配置することができないため、擬似的な効果があります）。

キャプションをより柔軟に配置する場合は、position: absoluteを使用し、好きなように配置します（ラッパーのposition: relativeが重要です）。

---

すでに擬似要素にcontent: attr()を経由して行ったようにあなたは、データの属性ごとにキャプションを挿入することができます。
これを参照してください：https://jsfiddle.net/6jc1ynbf/1/