Пользовательское название Magnific Popup

Question

Я пытаюсь получить Magnific Popup для отображения названия, основанного на других элементах вокруг цели, которую он использует. Учитывая следующую разметку, я хочу, чтобы название было «Foobar».

<div class="container"> 

    <article> 
     <h2>Foo</h2> 
     <figure> 
      <a href="img/img-1.jpg"> 
       <img src="img/img-1.jpg" /> 
      </a> 
      <figcaption> 
       bar1 
      </figcaption>         
     </figure> 
    </article> 

    <article> 
     <h2>Foo</h2> 
     <figure> 
      <a href="img/img-2.jpg"> 
       <img src="img/img-2.jpg" /> 
      </a> 
      <figcaption> 
       bar2 
      </figcaption>         
     </figure> 
    </article> 

</div> 

То, что я пытался при поиске решений в Интернете (в том числе и этот на StackOverflow) является следующий код:

$('.container').magnificPopup({ 
    delegate: 'article figure a', 
    type: 'image', 
    titleSrc: function(item) { 
     return item.el.parent('article').find('h2').text() + item.el.parent('article').find('figcaption').text(); 
    }, 
    gallery:{enabled:true} 
}); 

Выяснение функции, возможно, был вопрос, я даже пытался просто возвращаем постоянную строку, но это, казалось, ничего не делало:

titleSrc: function(item) { 
    return "fake Foobar"; 
} 

У кого-нибудь есть какие-то подсказки, как то, что я делаю неправильно?

ПРИМЕЧАНИЕ: Это действительно работает, если я использую titleSrc: «название», но это не поведение, я хочу, так как это заставляет меня должны дублировать содержание в разметке.

Answer 1

Согласно документации titleSrc: {} должен приходит внутри изображения: {} и вы можете использовать item.el.parents() вместо item.el.parent().

исправленного код

 $('.container').magnificPopup({ 
      delegate: 'article figure a', 
      type: 'image', 
      gallery:{enabled:true}, 
      image: { 
      titleSrc: function(item) { 
      return item.el.parents('article').find('h2').html() + item.el.parents('article').find('figcaption').html(); 
      } 
     } 
     }); 

Answer 2

Мой разработан требуется, чтобы у меня описание названия & с каждым слайдом изображения поэтому я обязательно пользовательский заголовком в Magnific всплывающего окна, я попробовал ответ от @krizna, но я получал только title, чтобы отлаживать, я попал в js-файл всплывающего окна magnex (jquery.magnefic-popup.js) и обнаружил функцию, которая вызывается, когда пользовательская разметка анализируется, она называется соответствующим образом «_getTitle». Получает объект item в качестве параметра. Я зарегистрировал этот объект объекта, чтобы найти его атрибут данных, в котором находится наш параметр item.

I инициализируется всплывающего окна с помощью опции пунктов (третий способ инициализируется в Документах) вот мой пользовательский объект пункт

items: [ 
      { 
       src: 'https://c6.staticflickr.com/9/8785/16698139093_3c30729f1b.jpg"', 
       title: 'We buy Nike shoes', 
       description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout' 
      }, 
      { 
       src: 'https://c2.staticflickr.com/8/7662/17307905305_92ae5081bf_b.jpg"', 
       title: 'You can add HTML code dynamically via JS (directly before the initialization), or have it in the page initially (like it\'s done on the demo page)', 
       description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout' 
      }, 
      { 
       src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg', 
       title: 'Avoid serving big images (larger than 2000x1500px) for mobile, as they will dramatically reduce animation performanc', 
       description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout' 
      } 
     ], 

каждый элемент имеет ГКЗ изображение, название & описание, теперь моя titleSrc функция является

titleSrc: function(item) { 
       return '<p id="gallery-image-title">' + item.data.title +'</p>' + '<p id="gallery-image-description">' + item.data.description +'</p>'; 
     } 

Я также изменил функцию «_getTitle», потому что только разобраны название свойства в объекте элемента (прокомментировал первые две строки), мой «_getTitle» теперь выглядит как этот

_getTitle = function(item) { 
    console.log(item); 
    /*if(item.data && item.data.title !== undefined) 
     return item.data.title;*/ 

    var src = mfp.st.image.titleSrc; 

    if(src) { 
     if($.isFunction(src)) { 
      return src.call(mfp, item); 
     } else if(item.el) { 
      return item.el.attr(src) || ''; 
     } 
    } 
    return ''; 
}; 

Теперь у меня есть контроль над разметкой & есть 2 динамических src для права собственности.