Как я могу комбинировать встроенные элементы с изображениями во всплывающем окне Magnific с отображаемой галереей

Я использую 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 из-за отсутствия мобильной поддержки мобильных устройств).


person Trufa    schedule 31.07.2013    source источник


Ответы (2)


Вы можете добавить класс CSS mfp-TYPE к элементу эскиза, который не должен иметь тип контента по умолчанию. http://dimsemenov.com/plugins/magnific-popup/documentation.html#content_types

person Dmitry Semenov    schedule 02.08.2013
comment
Большое спасибо, извините за задержку с ответом, я был в отпуске :) Это сработало отлично! Спасибо за помощь, и, кстати, плагин потрясающий!! - person Trufa; 13.08.2013

person    schedule
comment
Спасибо за этот фрагмент кода, который может предоставить некоторую ограниченную немедленную помощь. правильное объяснение значительно улучшит его долгосрочную ценность, показав, почему это хорошее решение проблемы и сделать его более полезным для будущих читателей с другими, похожими вопросами. Пожалуйста, отредактируйте свой ответ, чтобы добавить некоторые пояснения, включая сделанные вами предположения. - person Raul Sauco; 18.02.2018