Фоторама - разные подписи, основанные на том, если элемент имеет атрибут

Question

Я пытаюсь сделать пользовательский фоторама подписи, по-разному, в зависимости от того, имеет ли IMG, имел атрибут заголовка данных или нет.Прямо сейчас он появляется как «undefined», но я хотел бы, чтобы он просто опускал этот атрибут, если он не там.Я пытался использовать операторы, если / else и проверки, имеет ли элемент IMG, имел этот атрибут или нет, но безрезультатно.Я не могу использовать подход Fotorama «Div», потому что мне нужна галерея, которая должна быть ограничена и размера изображения соответственно.

Вот как смотрите мои метки 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">

.

Это код, который я использую для создания пользовательского формата заголовка:

$('.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();

.

И вот как я хочу, чтобы подписи читал, если нет атрибута заголовка данных на div:

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

.

Спасибо заранее!

Answer 1

Выяснил обходной путь для этого с использованием CSS, если кто-то еще имеет ту же проблему.Я сражался с созданием, если ... иначе операторы для того, как заголовок будет отображаться на основе того, был ли определен ли атрибут заголовка данных, но по какой-то причине не проверял каждую акцию ActiveFrame для того, имел ли он название данныхатрибут или нет ... только первый.Может быть неотъемлемой проблемой с плагином или мной с видом на что-то.

в любом случае, решение!

Я сделал новый атрибут на каждом теге IMG («CASS)), который будет иметь значение« Work_Link »или« 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">

.

Я поменял заголовок HTML в сценарии, чтобы прочитать так, как это так, как это дает ссылку либо класс «Work_Link», либо «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>'
);

.

И, наконец, сделанный класс «Work_Link» имеет базовый стиль CSS, а класс «NO_LINK» не отображается.

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

.

Возможно, не самый чистый способ сделать это, но работает как шарм!