Fotororama - Diverse didascalie basate su se l'elemento ha attributo

Question

Sto cercando di effettuare una didascalia di fotorama personalizzata appaiono in modo diverso a seconda che l'IMG abbia un attributo Titolo dati o meno.In questo momento, è attualmente apparire come "indefinito", ma vorrei solo omettere quell'attributo del tutto se non è lì.Ho provato a utilizzare le dichiarazioni di se / alnne e verificando se l'elemento IMG ha quell'attributo o meno, ma non disponibile.Non sono in grado di utilizzare l'approccio "Div" Fotorama perché ho bisogno della Galleria per essere vincolate e taglia le immagini di conseguenza.

Ecco come stanno cercando i miei tag IMG:

<img src="images/whatever.jpg" data-caption="Brief description goes here." data-author="Additional description here" data-title="http://www.link.com" border="0">

.

Questo è il codice che sto usando per creare il formato di didascalia personalizzato:

$('.fotorama')
.on('fotorama:show', function (e, fotorama) {
fotorama.$caption = fotorama.$caption || $(this).next('.example_blurb');
var activeFrame = fotorama.activeFrame;
fotorama.$caption.html(
  '<p><em>' + activeFrame.caption + ' <a target="_blank" href="' + activeFrame.title + '">(link)</a></em></p><p>' + activeFrame.author + '</p>'
);
})
.fotorama();

.

Ed questo è il modo in cui voglio che la didascalia leggi se non c'è attributo title di dati sul div:

'<p><em>' + activeFrame.caption + '</em></p><p>' + activeFrame.author + '</p>'

.

Grazie in anticipo!

Answer 1

ha capito una soluzione alternativa per questo usando CSS se qualcuno ha lo stesso problema.Ho combattuto con la creazione di se ... Altri estratti conto per come verrà visualizzata la didascalia in base al fatto che l'attributo titolo dei dati sia stato definito, ma per qualche motivo non sembrava controllare ciascun attivo per se avesse il titolo dei datiattributo o no ... solo il primo.Potrebbe essere un problema intrinseco con il plugin o mi trascura di fronte a qualcosa.

Comunque, la soluzione!

Ho fatto un nuovo attributo su ogni tag IMG ("Classe dati"), che avrà il valore "work_link" o "no_link":

<img src="images/whatever.jpg" data-caption="Brief description goes here." data-author="Additional description here" data-title="http://www.link.com" data-class="work_link" border="0">
<img src="images/whatever.jpg" data-caption="Brief description goes here." data-author="Additional description here" data-class="no_link" border="0">

.

Ho cambiato l'html della didascalia nello script per leggere come ... essenzialmente dando il collegamento con la classe "work_link" o "no_link":

fotorama.$caption.html(
  '<p><em>' + activeFrame.caption + '<a class="' + activeFrame.class + '" target="_blank" href="' + activeFrame.title + '">(link)</a></em></p><p>' + activeFrame.author + '</p>'
);

.

e infine reso la classe "work_link" ha lo styling CSS di base e la classe "No_LINK" non viene visualizzata.

.work_link { margin-left: 12px; }
.no_link { display: none; }

.

Forse non il modo più pulito per farlo, ma funziona come un fascino!