FancyBox Implementation in Minimal Theme(Product gallery)

Tourist
5 0 0

Hey all,

 

So I've been trying to implement Fancybox on my product pages as a gallery that will appear under the fold, but without much luck. 

 

So far, I've built a for loop and managed to display the correct images(code seen below). I've imported FancyBox, but what it does when a user clicks on an image, is that it auto directs to a new page where the image is displayed instead of it opening the Fancybox gallery itself. 

 

This was achieved after I follow this guide: https://help.shopify.com/en/themes/customization/store/add-lightbox-to-images

 

But fancybox isn't working. I've tried lightbox as well, but I can't get that to work either.

 

My code in the product.liquid template looks like this:

 

 

 <div class="one-half" 
         data-fancybox="gallery"
         style="
                display:flex; 
                flex-direction:row;    
                ">
      {% for image in product.images limit:8 %}
      <a  
         href="{{ image | img_url: 'large' }}"
         data-fancybox="gallery"
         data-caption="image.id"
       >
      <img 
           src="{{ image | img_url: 'medium' }}"
       	   alt="Product image"
       >
        </a>
      {% endfor %} 
    </div>

 

 

 

It looks like this on the shop(I know flexbox must be messing with it):

Screenshot 2019-11-13 at 02.50.11.png

 

What I am trying to accomplish is something like this centered nicely right under the fold:

Screenshot 2019-11-13 at 02.54.47.png

 

 

0 Likes
Shopify Expert
665 170 199

Hi, @CloudOne ,

This is Evita from On The Map.

 

Can you add your store URL? I think the fancy box is not imported in your project.

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Tourist
5 0 0

Hi OTM,

 

You are right, Fancybox wasn't properly installed. However, I figured out how to install it properly, and it works now when an image is clicked, but the CDN's and script I used to import them interacts & interferes with a lot of other things on the shop. So I had to disable them, order buttons weren't working and some banner images on the Home page were suddenly gone.

 

I used these CDN's found on Fancybox's own pages, it worked, but like I said, messed up a lot of other things. I threw them right before the closing body tag in theme.liquid

 

 

<!-- 1. Add latest jQuery and fancybox files -->

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

 

 

I'm using the Minimal theme, any ideas on how to solve this issue?

 

The URL is https://www.rowdybags.com

 

0 Likes