What is Reddit's opinion of Magnific Popup?

From 3.5 billion Reddit comments

I would avoid using fancybox. Last time I used it (which was admittedly a couple of years ago now), it was pretty bloated and terrible on mobile devices.

I use Magnific Popup - http://dimsemenov.com/plugins/magnific-popup/

It's lightweight, responsive and doesn't use images, so it looks great on retina displays.

dimsemenov routinely makes the best javascript plugins out there, check out his royalslider (paid) and Magnific Popup

Any carousel plugin should work for you. You might be using something too heavy and need to dial it back to a more fundamental approach.

If I were doing this, I would use Magnific Popup for the lightbox/modal and then use Slick Carousel for the slider portion.

If you don't want/need the modal, you can exclusively use Slick.

There is an optional flag you can enable for lazy loading so you don't request a bazillion JPG files when the user loads the page. Using a couple PHP foreach loops it should be trivial to get the markup you need.

Obviously you'll need jQuery as well for those plugins to work, but most WordPress themes use jQuery already. If not, you'll need to enqueue it for your theme.

If you do put your slider inside of a modal, you'll need to initialize the slider when the modal is triggered. You can pass that callback into the modal options when you instantiate it.

The docs for both projects are pretty good and probably why they're so popular.

Let me know how it works out!

I had the exact same issue and decided to go with Magnific. I actually found out about it on PhotoSwipe's FAQ page (it has another recommendation there as well)!

That's usually known as a lightbox or a modal.

If you're using a popular front-end framework (like Bootstrap) chances are it'll have one bundled. If you're not or it doesn't, there are plenty of JS libraries that'll make doing this easy. Magnific.js is my go-to for quick jobs (requires jQuery though)

http://dimsemenov.com/plugins/magnific-popup/

You're using Magnific Popup for the lightbox, I think. http://dimsemenov.com/plugins/magnific-popup/documentation.html#when-popup-is-opened-scrollbar-of-window-disappears-and-creates-empty-space-or-shifts-some-fixed-positioned-menu-or-whatever

edit: Just tried it on my Divi tester. Divi uses Magnific Popup to do the lightbox effect on images. Not sure if you can fix that through Divi or not. My advice is not use the built-in lightbox and use a separate plugin instead.

The white bar is padding on #left-area.

#left-area { width: 79.125%; padding-bottom: 23px; }

Change the padding-bottom to 0px;

1.) I would suggest you to use Magnific Popup instead of Fancybox (I think it's much more developer and user friendly).

2.) What you are experiencing is actually not a bug, it's an expected behavior. Fancybox doesn't care whether your images/thumbnails/links are visible or not, the only thing it cares about is the data-fancybox-group parameter. I see you have already figured that out and you are attempting to change the parameter on filtering, but you are making a mistake when doing this: $(selector).find(".fancybox").attr("data-fancybox-group", selector);

So what you are doing is looking for elements with fancybox class inside of the elements that match your selector, but what you should be doing is looking for elements that match your selector AND have a fancybox class.

So the correct code would be this: $(selector + ".fancybox").attr("data-fancybox-group", selector);

Try it and I think it should work.

> Is this something that someone who has zero knowledge on web design can build? If so, how should i go on about starting it? Thanks.

Yeah, I think so. It's really simple to create a page that has a full-sized image and nothing else. Creating another page containing an image gallery is a tiny bit trickier, but not much.

The hardest part is going to be getting those thumbnails to expand into a large image. It depends if you just want to link the thumbnail to an image (so when the user clicks a thumbnail, they're taken to another page containing the actual image), or whether you want it to expand nicely on top of the page.

If you want it to expand nicely, you can look into a Javascript library like Magnific Popup, which looks really nice and is fairly straightforward to use.

So you've kind of got 3 different aspects with 3 increasing levels of difficulty.

To start with the simple image page, you'll just need to look into how to make a basic HTML site. You can use an img element to display your image, inside an a element to link it to your gallery page.

To start with the gallery page, you can look up 'html image grid' on Google, or something similar. Here's an example.

For the third part (expanding images to overlay the page, if that's what you want to do), you can just read the Magnific Popup documentation, or look into another library. Or like I said earlier, just link the gallery thumbnails to the direct URL of the image.

jQuery UI is not enqueued on the frontend (unless you enqueue it yourself), some parts of it are available on the backend however.

We have been using Magnific Popup in our sites. It's very slim, great features, 5 minute integration.

http://dimsemenov.com/plugins/magnific-popup/

Check out this site http://dimsemenov.com/plugins/magnific-popup/

Look at the Dialog with CSS animation, Popup with Form, and Modal popup.

I'm waiting for the Wordpress plugin because my coding skill aren't that high yet :(

Hope that helps

I think that depends on whether or not the site itself is already mobile-friendly. We use modal overlays for responsive designs, but the plugin we use has specific support for mobile and touch devices so it all works just fine.