Я использую Magnific Popup.
Я могу заставить его работать с галереями.
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true,
navigateByImgClick: true,
}
});
});
Я также могу смешивать встроенные элементы с изображениями, чего я и хочу:
$('#open-popup').magnificPopup({
items: [
{
src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg',
title: 'Peter & Paul fortress in SPB'
},
{
src: 'http://vimeo.com/123123',
type: 'iframe' // this overrides default type
},
{
src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element
type: 'inline'
},
{
src: '<div class="white-popup">Popup from HTML string</div>', // HTML string
type: 'inline'
},
{
src: '#my-popup', // CSS selector of an element on page that should be used as a popup
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image' // this is a default type
});
Моя проблема в том, что в смешанном примере у меня не отображается миниатюрная «галерея», я в основном хочу миниатюрные изображения, которые при нажатии ведут себя как галерея, но с одним встроенным элементом между ними.
Встроенный элемент будет иметь миниатюру (и фактическое изображение), но при нажатии будет встроенным элементом.
Мне удалось сделать это с помощью fancybox, и вы можете увидеть здесь, если вы нажмете на миниатюры, это может помочь понять, что мне нужно. (Я пытаюсь добиться того же с помощью всплывающего окна Magnific из-за отсутствия мобильной поддержки мобильных устройств).