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

Question

Я пытаюсь сделать так, чтобы пользовательский заголовок Fotorama отображался по-разному, в зависимости от того, имеет ли img атрибут data-title или нет. Сейчас он выглядит как "неопределенный", но я бы хотел, чтобы он вообще пропускал этот атрибут, если его там нет. Я попытался использовать операторы if / else и проверить, имеет ли элемент img этот атрибут или нет, но безрезультатно. Я не могу использовать подход "div" Fotorama, потому что мне нужно, чтобы галерея была ограничена и соответственно увеличивал размеры изображений.

Вот как выглядят мои теги 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 нет атрибута data-title:

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

Заранее спасибо!

Answer 1

Обдумал обходной путь для этого с помощью CSS, если у кого-то еще есть такая же проблема. Я боролся с созданием операторов if... else для отображения заголовка в зависимости от того, был ли определен атрибут data-title, но по какой-то причине он не проверял каждый activeFrame на наличие в нем data-title атрибут или нет- только первый. Может быть проблема, связанная с тем, что плагин или я что-то упускаем.

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

Я сделал новый атрибут для каждого тега img ("data-class"), который будет иметь значение "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; }

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