Как включить заголовок для галереи, используя увеличенное всплывающее окно?

Question

Я пытаюсь добавить подпись к реальной веб-странице под изображением, используя всплывающую галерею великолепия. Используя теги div и class, или carousel-caption, я не могу сделать это, если изображения в галерее не будут располагаться вертикально один за другим. Как я могу это сделать?

<a href="img/base/ggg.PNG" title="HELLO" class="chicken">
  <img src="img/base/pop.PNG" alt="remember your alt tag" />
</a>

$(document).ready(function() {
      $('.chicken').magnificPopup({ 
         type: 'image',
         gallery:{enabled:true}
         // other options here
         // end each line (except the last) with a comma
      });
   });

js fiddle: https://jsfiddle.net/sb4btox7/

Answer 1

Поскольку у меня еще недостаточно репутационных баллов, чтобы комментировать, я комментирую здесь, в дополнение к предоставлению решения.

Комментарий: JSFiddle не работает с вашими изображениями http: //, потому что JSFiddle пытается обслужить их из https: //

Решение:

Вы на полпути там. Есть две части, чтобы сделать работу надписей.

1. Вы правильно поместили ссылку в тег привязки, а не тег изображения

2. Вы должны указать свой источник заголовка в скрипте инициализации следующим образом.

   $(document).ready(function() {
       $('.chicken').magnificPopup({ 
           type: 'image',
           gallery:{enabled:true},
           type: 'image',
           image: {
               titleSrc: 'title' 
               // this tells the script which attribute has your caption
           }
       });
   });
   

Затем скрипт автоматически записывает вашу подпись в ее div с пометкой class="mfp-title"

Бонусное решение: мне нужно было, чтобы мое изображение лайтбокса открылось в новом окне, чтобы пользователи на их телефонах могли увеличивать его, поэтому я добавил это после первого titleSrc объявление:

    titleSrc: 'title',
    titleSrc: function(item) {
        return '<a href="' + item.el.attr('href') + '">' + item.el.attr('title') + '</a>';
        }

Эта информация находится в документации: http://dimsemenov.com/plugins/magnific-popup/documentation.html в разделе "Тип изображения"

Answer 2

Я попытался использовать выбранный ответ, но даже с использованием документации примеры не работали для меня. В итоге я использовал:

$('.elements').magnificPopup({
   type: 'image',
   gallery: {
       enabled: true
   },
   image: {
       titleSrc: function(item) {
          return item.el.find('img').attr('title');
       }
   }
});

Вероятно, это как-то связано с версией, которую я использовал, но не было ясно, для какой версии предназначена документация. Надеюсь, это кому-то будет полезно.