Owl Caroussel: First image not loaded in Foobox

I had a look at your page, and I am not sure why it is not loading on the first image in the carousel.

Can you try adding the foobox class to the container, so the div with class of owl-carousel

and see if that works

Hi,

Thanks for your very quick reply! I added the foobox class the owl-carousel div, but that resulted in the second image opening in foobox when clicking on the first image… I also tried adding the fokbox the the owl-stage div (had to do that through javascript) but that has no effect at all.

I have a copy of the site running at https://mghia.nl/vin/ where I kept the foobox class on the owl-carousel div, for review.

when I visit https://mghia.nl/vin/ and click on the images, they load correctly

Hmmm… The second carousel, when I click the first image (with the circular arrows), the second picture (four arrows down) opens in FooBox… tested in Chrome and Firefox. You are sure you get the correct pic?

@bradvin could you check again? In the mean time the site was published and you can it at https://crystallize.nl/
Both carousels won’t show the first picture in foobox (the pic that says ‘Tenderwise’ in the first, and the one with the circular graphic and the table in the second).
Mind you, it specifically these first images in any Owl carousel, al the others work fine.

THX!

I suspect it is caused by the way OwlCarousel is manipulating the DOM when it is initialised or changes on the page.

@steveush – please can you investigate.

Hi @smit_ralph,

@bradvin is correct that the issue here is being caused by the way Owl Carousel is cloning the DOM but it is only occurring due to FooBox initializing itself before Owl has performed its manipulations. Simply calling FOOBOX.init() again fixes the issue as FooBox can then inspect the altered DOM and bind itself appropriately.

To fix this I would make two changes, the first one is simple as you have done it on your test site https://mghia.nl/vin/. Simply add the foobox class to the owl-carousel element in the DOM. This lets FooBox see that DIV as a container for items and creates a single modal containing multiple items rather than multiple modals with a single item in each as is currently happening on your https://crystallize.nl/ site.

The second change requires some custom JS however this should also be fairly straight forward as I see you have created a child theme to house your modifications, onelight-child. Inside this child theme you have an includes/extras.js file. At the top of this file you initialize Owl Carousel and also have a callback for the onInitialized event on line 26. This is the same place where you created the custom JS to add the foobox CSS class to the owl-stage, which is not required. In this callback we should just need to add the code FOOBOX.init() so that your callback looks like the following:

onInitialized: function(e) {
	if (carItems >= e.item.count) {
		car.trigger('stop.owl.autoplay');
	} else {}
	FOOBOX.init();
}

Once that’s done I’m hoping everything should be working as expected.

Thanks
Steve

It seems like initialising foobox after Owl is initialised, like you said, works. So thanks a lot!!!

I have one more issue, but it might need another thread: After Foobox opens on this page , I can click though ALL the pictures in the page, no matter where they are, carousel or not. Can I turn that off? I can’t seem to find it.

hey @smit_ralph

I am glad the initial issue has been resolved.

FooBox FREE does not allow you to target specific containers, but the PRO version allows you to target any container using the Specific CSS Class setting, which allows you to target the owlcarousel containers with the relevant class, for example .owl-gallery.

If you want to try it out, there is a free trial for PRO so you can test it, and if there are any issues you can log a ticket to get some help