Открытая динамически сгенерированная галерея в центре мода

Question

Я пытаюсь создать динамически созданный контент, простую галерею с использованием Owl Carousel от Imgur API по центру.

Это основной HTML структура:

<article id="XYZ"> 

    <figure class="cover"> 
     <img src="http://i.imgur.com/XYZ1234.jpg"> 
    </figure> 

</article> 

В API расходуется при <figure> щелкают, создавая разметку Owl Carousel, в со всеми изображениями, например:

<div id="gallery" class="ow-carousel"> 
    <div class="item"> 
     <img class="lazyOwl" data-src="http://i.imgur.com/XYZ1234.jpg" /> 
    </div> 

    <div class="item"> 
     <img class="lazyOwl" data-src="http://i.imgur.com/XYZ4567.jpg" /> 
    </div> 


    <div class="item"> 
     <img class="lazyOwl" data-src="http://i.imgur.com/ABC789.jpg" /> 
    </div> 
</div> 

Я хотел бы сделать это #gallery вместо того, чтобы быть видимым сгенерированным, в этом случае под фотографией обложки, чтобы открыть центрированный как модальный, и когда нажата любая из <img> внутри галереи, модальный cl osed.

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

Хотя я знаю, что это может быть просто, я боюсь больше, чем следовало бы.

Answer 1

ОБНОВЛЕНИЕ:

У Вас уже есть код модальный? Если нет, вам сначала понадобится модальный, а затем добавьте в него галерею. И если вы это сделаете, у вас может быть якорный путь туда, где вы хотите; или добавьте разметку «close modal» (которая будет зависеть от выбранного модального кода), чтобы закрыть модальное окно, если пользователь нажимает на изображение.

Я верю что-то вроде that что вы хотите. Правильно? Или, может быть, вы можете выбрать один из этих modals и вставить фрагмент совы в модальный. Этот последний веб-сайт содержит множество отличных типов модалов, включая слайдеры изображений.

Это article дает вам возможность отображать изображения в полноэкранном режиме. Здесь вы найдете another option, довольно классный! Теперь, если вы используете Bootstrap, вы можете попробовать этот snippet, или этот here который оформлен этим CSS файлом.

Если вы не нашли какой-либо модальный код из этих примеров, я дал вам то, что удовлетворит ваши потребности, это article объясняет, как это сделать с помощью jQuery.

---

ORIGINAL:

Возможно, это могло бы помочь: <a href="path.html"><img class="lazyOwl" data-src="http://i.imgur.com/ABC789.jpg" /></a>.

Возможно, вам нужно добавить фотоаппарат onclick, как here.

В противном случае вам нужно будет настроить свой код с помощью Owl Documentation и их собственных onclickevent.