Hinzufügen von Bildunterschriften zu Bildern in Mixitup jquery

Question

Ich benutze die ausgezeichnete MixItUp jQuery für eine filterbare und sortierbare Galerie. Ich habe einige Beispiele überprüft und eines der grundlegenden Anwendungsbeispiele so geändert, dass Bilder verwendet werden. Ich kann jedoch keine Form von Bildunterschriften erhalten. Ich habe versucht mit und habe auch ein paar jquery-Skripts ich gefunden, die ALT-Text gezogen und überlagerte das Bild mit dem. Hier

ist ein Fork des Grund Beispiel, wo ich nur ein paar Bilder hinein geladen:

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

Der Behälter nur lädt Bilder und hat Klasse und Daten Tags für die Filter und Sortierungen zugeordnet.

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

Könnte jemand bitte demonstrieren, wie man irgendeine Form der Titelvertretung erhält? Idealerweise über den unteren Rand des Bildes, aber selbst wenn die Texte unterhalb eines Bildes angezeigt werden könnten, wäre das ok, solange es natürlich mit dem jeweiligen Bild noch sortierbar ist.

Dank

Answer 1

Verpackung Hinzufügen divs um die Bilder als Behälter möglich Beschriftungen dienen kann im Inneren platziert werden.
Die Attribute data-myorder und die Klassen für die Bilder werden in die neuen Umbrucheltern verschoben.

Siehe hier: 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; 
} 

Auf diese Weise Ihre Pseudo-Elemente wirken auf allen (Bilder haben nicht können Pseudoeffekte haben, da kein HTML-Inhalt darin platziert werden kann).

Wenn Sie flexibler bei der Positionierung der Beschriftungen sein möchten, verwenden Sie position: absolute und platzieren Sie sie wie Sie möchten (position: relative auf dem Wrapper ist wichtig).

---

Sie können Beschriftungen pro Datenattribut einfügen, wie Sie bereits über content: attr() auf einem Pseudo-Element hat.
Sehen Sie diese bearbeitete Geige: https://jsfiddle.net/6jc1ynbf/1/