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
});
私の問題は、混合の例では、サムネイルの「ギャラリー」が表示されていないことです。基本的に必要なのは、クリックするとギャラリーのように動作しますが、その間にインライン要素が1つあるサムネイル画像です。
インライン要素にはサムネイル (および実際の画像) がありますが、クリックするとインライン要素になります。
ファンシーボックスでそれを行うことができました。サムネイルをクリックすると、ここで見ることができます。必要なものを明確にするのに役立つかもしれません. (モバイルのモバイルサポートがないため、マグニフィックポップアップで同じことを達成しようとしています)。