1

I've been trying to make a dynamically generated content, a simple gallery using Owl Carousel from Imgur API in a centered modal.

This is basic HTML structure:

<article id="XYZ">

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

</article>

The API is consumed when a <figure> is clicked, generating Owl Carousel's markup, with all images, e.g:

<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>

I would like to make this #gallery instead of being visibly generated, in this case below the cover photo, to open centered like a modal and when any of the <img> inside the gallery is clicked, the modal is closed.

The result I expect, as much simple as possible and most important, mobile-friendly, is to have the gallery occupying the whole viewport of the smartphone (mandatory) or, if viewing from desktop browser, centered, with the usual background overlay.

Although I know this might be simple, I'm struggling more than I should.

user5613506
  • 286
  • 1
  • 16

1 Answers1

0

UPDATES:

Do you already have the modal code? If not, you first will need the modal, and then add the gallery into it. And if you do so, you can have the anchor path to wherever you want; or add the "close modal" markup (which will depend on the modal code you choose) to close the modal window if the user click on the image.

I believe is something like that what you want. Right? Or maybe you can choose one of these modals and insert the owl snippet into the modal. This last website provides tons of great types of modals, including image sliders.

This article gives you some options to display images in full screen mode. Here you can find another option, quite awesome! Now, if you're using Bootstrap, you can try this snippet, or this one here which is styled by this CSS file.

If you don't find any modal code from that examples I gave you that would satisfy your needs, this article explains how to do it with jQuery.

ORIGINAL:

Perhaps this could help: <a href="path.html"><img class="lazyOwl" data-src="http://i.imgur.com/ABC789.jpg" /></a>.

Or maybe adding an onclick event to the image, like here.

Otherwise you will need to customize your code using Owl Documentation and their own onclick event.

Community
  • 1
  • 1
Virtua Creative
  • 2,025
  • 1
  • 13
  • 18
  • But in this case what would be the anchor URL? I don't want to redirect to somewhere, I want to... "focus" the gallery built hidden. It's not a matter of modify/customize Owl, I believe, instead it would my in implementation to create the modal with pre-existing markup. Or maybe open the modal first, consume the API and build the gallery markup within the modal. Think about Tumblr galleries, but instead open only one picture, it would open HTMl content. Owl would do the rest. – user5613506 Nov 28 '15 at 17:00
  • All right, I might have misunderstood you... Sorry if I did. Do you already have the modal code? If not, you first will need the modal, and then add the gallery into it. And if you do so, you can have the anchor path to wherever you want; or add the "close modal" markup (which will depend on the modal code you choose) to close the modal window if the user click on the image. Is that it what you want? – Virtua Creative Nov 28 '15 at 17:28
  • I think I know what you want. Give me a min and I'll try to find it in my library. – Virtua Creative Nov 28 '15 at 17:30
  • Look, I believe is something like [that](http://www.cssscript.com/demo/pure-javascript-gallery-lightbox-library-lightbox/) what you want. Right? Or maybe you can choose one of these [modals](http://www.cssscript.com/categories/modal-popup/) and insert the owl snippet into the modal. This last website provides tons of great types of modals, including image sliders. I'm certain you will find what you need. If you need to keep owl, this [script](http://www.cssscript.com/creating-simple-modal-windows-with-kbmodal-js/) might be helpful to insert your slider inside the modal. – Virtua Creative Nov 28 '15 at 18:03
  • This [article](https://www.freshdesignweb.com/fullscreen-jquery-slider/) gives you some options to display images in full screen mode. Here you can find [another option](http://visuallightbox.com/jquery-image-lightbox.html), quite awesome! Now, if you're using Bootstrap, you can try this [snippet here](http://bootsnipp.com/snippets/featured/carousel-inside-modal), or this one [here](http://ironsummitmedia.github.io/startbootstrap-full-slider/) which is styled by this [CSS](http://ironsummitmedia.github.io/startbootstrap-full-slider/css/full-slider.css) file. – Virtua Creative Nov 28 '15 at 18:23
  • I don't have the modal, that's the biggest problem and reason I'm so stupidly frustrated. I was trying to implement one called Featherlight, but it didn't work (that's another story). About your example, I need only the modal effect, not the gallery related to it. Gallery will be handled by Owl due lazy loading of images. All the script has to do is open with the contents of another element after this element is populated through the API. – user5613506 Nov 28 '15 at 18:28
  • Got it. Did you find any modal code from that examples I gave you that would satisfy your needs? If you don't, [this article](http://inspirationalpixels.com/tutorials/custom-popup-modal) explains how to do it with jQuery. – Virtua Creative Nov 28 '15 at 18:52
  • Yes! I had to remove some of "dynamism" since every gallery dynamically create will have its markup in the same DIV, but it worked! Thank you very much – user5613506 Nov 28 '15 at 21:13
  • You're welcome! I'm glad to have helped! :) Please, if may I ask, would you mark the answer as useful and/or right? (if you agree to that of course) Thanks and best of luck to your project! – Virtua Creative Nov 28 '15 at 21:29
  • Before I do that, I suggest you to reformat your answer with the real solution to make it more evident for those with the same problem in the future – user5613506 Nov 29 '15 at 14:06
  • Oh yeah, you're absolutely right! I won't have time to do it now, but it will be done until tomorrow! ;) Best of luck to your project! – Virtua Creative Nov 30 '15 at 13:45
  • hi @user5613506, it's done! I believe now your question was properly answered, right? Best of luck for you! ;) – Virtua Creative Dec 05 '15 at 16:06