Flickity with Light Gallery light box?

[lisarose66]

Hi,

Thank you for taking the time. I do love the sliders and carousels. Customization is easy and many options. But the CSS control over the 'fullscreen' is very awkward, and I am having trouble getting it to max out the image size, rather than just putting the slider or carousel in front of a dark background. So, I thought what if I call a lightbox? Since I already have Light Gallery I tried that instead of going fullscreen with Flickity? It works great with the carousel no issues, but the slider loses the imagesLoaded settings and they look wonky and will not fit properly. I did see the closed post about wrapping images in anchor tags, but that did not help me.

I tried to adapt the CodePen already with that post but I couldn't follow which parts of the JS to use with my example. And, I am more of a JS newbie, I get the structure and generally know enough to make minor customizations. For things like this, however, it is above my pay grade. If it's acceptable, I've provided a link to the page on my test server.

test case: http://lisareisman.com/tests/flickity-lg-test.html

I greatly appreciate your help and have a great day!

Lisa Rose, Atlanta

[clarknelson]

if you are using jQuery, i've sometimes used this code piece instead of the imagesLoaded option:

$(window).on('load', function(){ // create the flickity gallery here });

[lisarose66]

Thank you Clark, I do apologize , but I am not very JS nor JQuery savvy, I do have jQuery v3.3.1 loaded. This is the current script I am using that is part of the theme:

[CODE] function enableFlickitySlider(){ $('.flickity-slider-container').each( function( i, container ) { var $container = $( container ); var $sliderMain = $container.find('.flickity-slider-main').flickity({ imagesLoaded: true, percentPosition: false, wrapAround: true, pageDots: false, prevNextButtons: false, fullscreen: $container.hasClass('fullscreen') ? true : false }); $container.find('.flickity-slider-nav').flickity({ asNavFor: $sliderMain[0], imagesLoaded: true, percentPosition: false, pageDots: false, contain: true, prevNextButtons: false }); $container.find('.flickity-slider-main').css({ opacity: 1 }); $container.find('.flickity-slider-nav').css({ opacity: 1 }); }); } enableFlickitySlider(); [/CODE]

This is how I used the code you provided:

[CODE] $('.flickity-slider-container').on('load', function( i, container ) { [/CODE] and I have ‘imagesLoaded' commented out.

It did not work in this format, so I know it is wrong, but hoping you can help me at least try it properly. Sorry to be such a pain, I really appreciate the help!

Have a great day!

Lisa R. Reisman Atlanta, GA lisa.reisman@icloud.com

On Feb 10, 2020, at 4:08 PM, Clark Nelson notifications@github.com wrote:

if you are using jQuery, i've sometimes used this code piece instead of the imagesLoaded option:

$(window).on('load', function(){ // create the flickity gallery here });

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/metafizzy/flickity/issues/1021?email_source=notifications&email_token=ABZBVZYLNPYIY75YEKKEJP3RCG64VA5CNFSM4KP6ASJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELKIYWA#issuecomment-584354904, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABZBVZ65ITWRWBRJLE6DWXDRCG64VANCNFSM4KP6ASJQ.

[clarknelson]

No need to appologize, I will help if I can.

I believe you will need to replace this line:

enableFlickitySlider();

with this code:

$(window).on('load', function(){ enableFlickitySlider(); });

This should only create the galleries after all the images have loaded (in the window).