How to Use Model Viewer with Fancybox?

[EyeOfEnigma]

Hello,

I'm having an issue using googles 3d model-viewer with fancybox. I placed my model viewer in a div and used data-src to pull it into fancybox.

The model viewer works correctly but the click and drag to move the camera around the object causes fancybox to slide left/right/up/down.

I need to be able to use the model viewer like the fancybox google map viewer.

When displaying a map you can drag the map in all directions and fancybox does not try to move to the next slide or close.

I'm wondering how I can get this behavior with the model viewer. This also needs to be achieved with keeping the swipe left/right and up/down functionality as the gallery has other content and images. It would be nice to detect if the click and drag is on the content vs on the outside of the content.

Any idea how I can do this with the latest fancybox?

Thank you.

[fancyapps]

Hi,

Can you show some demo with your current progress? It would be great if you use any code playground like jsfiddle, codepen, codesandbox, stackblitz, etc. You can also easily fork any demo found in the documentation.

[EyeOfEnigma]

Sure.

https://jsfiddle.net/g4tds819/11/

The first image will be the 3d viewer, as you can see once it loads it can be panned around in 3d space, but fancybox also wants to pan, even if the click starts inside the 3d viewport.

I want to keep the ability for fancybox to swipe between images and drag to close but stop fancybox from doing that if panning around the 3d object. (Similar to how fancybox maps work.)

Setting the carousel panzoom touch to false fixes the first problem but also disables the ability to swipe between slides and drag to close.

[fancyapps]

Here is an example:

Fancybox.bind('[data-fancybox="gallery"]', {
  Carousel : {
    Panzoom : {
      touch : (panzoom, event) => {
        return event?.target.nodeName == "MODEL-VIEWER" ? false : true;
      }
    }
  }
});    

https://jsfiddle.net/4a2b0msw/

[EyeOfEnigma]

Perfect, thank you so much! So simple and I spent hours messing with settings, good to know you can pass anonymous functions to settings like that.