Enable Fancybox on Shopify 3d models

[afaqmehmood]

Hi there,

I am using fancybox on shopify store which has 3d models as well. Fancybox works perfectly on normal product gallery but it does not work on 3d models. any help would be appreciated

[fancyapps]

Hi,

Could you please provide a link to a page that uses 3d models? I tried googling, but could not find any.

[afaqmehmood]

@fancyapps Thanks for the reply here is the link

https://dbtfy-dev-theme.myshopify.com/collections/3d/products/3d-product
store Password: debutify

[fancyapps]

First, your page redirects to 404.

Anyway, speaking about 3D objects. You should not expect that Fancybox will parse, convert Autodesk Maya files, Photoshop files, etc. to HTML. But Fancybox can display any HTML content. So, if you can create smth like <div>YOUR 3D VIEWER</div> and it works fine in the browser, then there is absolutely no problem to display it in the Fancybox. The same is for PDF. Fancybox will not download PDF file and will not convert it to HTML (so that any browsers would be able to display it), therefore you have to use PDF.js or similiar project for that.

[afaqmehmood]

@fancyapps sorry for the link. s was missing from the end of the link here is the updated one!
https://dbtfy-dev-theme.myshopify.com/collections/3d/products/3d-products

it is actually an html content. but when I open the fancybox it returns the error "The requested content cannot be loaded. please try again later"

[fancyapps]

Well, you have

<a href="ModelDrop" data-fancybox="gallery-7325478224119" class="productGallery" tabindex="0" rel="gallery">...</a>

First, it is not required to use <a> tags, you can use, for example <div data-src="#ID_OF_YOUR_CONTENT" data-fancybox="gallery-7325478224119">...</div>

And secondly, Fancybox works as expected. You have href="ModelDrop" and Fancybox can not load content, because it does not know what to load.

[afaqmehmood]

So you mean by replacing the anchor with div will work for our case?

[fancyapps]

I mean, you have to provide the correct source of the content. See documentation on how Fancybox works. I hoped you will realize that href="ModelDrop" has to be changed to smth else, like href="#ID_OF_YOUR_CONTENT"

[afaqmehmood]

Ok Thanks! for your help @fancyapps! Just one last query.

The pointers you gave work for the link given above but it does not display thumbnails as normal products do. can you please help me with that?