Solution - Fancy Box 3 (New Version) to Supply Theme

Raza_Lilani
New Member
1 0 0

After checking all those lengthy methods - I found an easy way out to apply FancyBox to the Supply Theme. You can also try this with other themes. RECOMMENDED - to make a copy of your theme and implement on that first. (This method requires basic knowledge of HTML)

Step 1: Download the zip file FancyBox 3 from their website fancybox.net

Step 2: Download this file - http://code.jquery.com/jquery-3.1.1.min.js

Step 3: Go to Your Themes > ... > Edit HTML/CSS

Step 4: In Assets folder - 'Add a new Asset'
- upload the file download from Step 2
- upload FancyBox/dist/jquery.fancybox.min.css (the file from downloaded zip folder)
- upload FancyBox/dist/jquery.fancybox.min.js

Step 5: Go in Layout folder and open Themes.liquid
Add the following code in CSS section below the existing code of theme.scss.css

{{ 'jquery.fancybox.min.css' | asset_url | stylesheet_tag }}

Save and Close the Themes.liquid

Step 6: Open the file Product-template.liquid  from the Sections folder and Add the following code above the first <img> tag.

<a href="{{ featured_image | img_url: '1424x1424'  }}" data-fancybox="images">

 

Step 7: Above the Second <img> tag, there is URL code which looks something like this...

<a href="{{ image.src | img_url: 'Large' }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}">

* Change the img_url: 'Large'   to   img_url: '1424x1424'
*
Add this data-fancybox="images" before > tag closes.

It will look something like this:

<a href="{{ image.src | img_url: '1424x1424' }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}" data-fancybox="images">

 

Step 8: After the {% endif %} add the following script

<script src="{{ 'jquery-3.1.1.min.js' | asset_url }}"></script>
<script src="{{ 'jquery.fancybox.min.js' | asset_url }}"></script>

 

Step 9: Swayyyy :)

Well, I would suggest testing the code first lol.

Good Luck!

0 Likes
Perfect_Line
New Member
1 0 0

Aloha Raza, thank you for this awesome update. Been trying to figure out how to implement FancyBox, but had not found online guidance until now. Just a couple things:

1. I had to close the <a> tag in Step 6 immediate after. Is this correct place to close it.

2. Also, on the mobile, i dont see the navigation icons for next, close, etc. Can you help with correcting this?

3. Lastly, where do I put code to show the "Image Alt Text" for the product?

Thanks for all your help.

Mahalo,
Rob 

0 Likes
SNG
Tourist
37 0 1

I have been trying to get this to work, but it appears when it "works", I get 26 photos whereas the 20 of the is the same when fancybox opens. Been trying to tweak and place the code different places in product-template.liquid, but without any luck.

 <a href="{{ featured_image | img_url: '1424x1424'  }}" data-fancybox="images">

Any way you could share your code of this particular spot?

0 Likes
NichCitarella
Shopify Partner
6 0 3

Okay so I figured I'd update this with something that actually WORKS!

This looks like ALOT of steps, but please don't get nervous. A lot of it is me over-explaining.

 

Step 1: IGNORE THE CODE ADDED IN STEPS 6 & 7 

Step 2: Find the first <img> wrapper. As of this post it appears like this:

 

<img id="{{ img_id }}"
    {% if forloop.first == true %}
    src="{{ featured_image | img_url: '300x300' }}"
    {% endif %}
    class="lazyload no-js lazypreload"
    data-src="{{ img_url }}"
    data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
    data-aspectratio="{{ image.aspect_ratio }}"
    data-sizes="auto"
    alt="{{ image.alt | escape }}"
    {% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}>

See that part of this code that says:

{% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}>

this is what we are going to alter.

 

Step 2a: Delete the following code from this section:

data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"

The only code you should have left is:

{% if section.settings.product_image_zoom_enable %}  {% endif %}>

Step 2b: Add the following code to the section you just deleted code from:

href="{{ image | img_url: '1424x1424'}}" data-fancybox="images" style="cursor:pointer;"

The section should now look something like this:

{% if section.settings.product_image_zoom_enable %} href="{{ image | img_url: '1424x1424'}}" data-fancybox="images" style="cursor:pointer;"{% endif %}>

Step 3: Resume the previous instructions at Step 8. Save and Smile.

 

EXPLANATION OF CHANGE:

In the previous method the FancyBox code was implemented mid-loop. If you got save duplicate pictures in your light box, this is why. FancyBox works by pulling all images that have a the "data-fancy" tag. So the code added in Step 6 added the main image to the page.

The <img> tag pulled in the main image into the tag AGAIN. The code we would have edited in Step 7 altered the thumbnails and added the "data-fancy" tag AGAIN. So each of these got pulled into FancyBox and appear as duplicate images.

 

By using this method, we add the ability to turn this feature ON or OFF in the theme customization menu as "Product Zoom". If you are seeing no change make sure that you have this setting turned ON

mrtn
Tourist
7 0 0

@NichCitarella wrote:

Okay so I figured I'd update this with something that actually WORKS!

This looks like ALOT of steps, but please don't get nervous. A lot of it is me over-explaining.

 

Step 1: IGNORE THE CODE ADDED IN STEPS 6 & 7 

Step 2: Find the first <img> wrapper. As of this post it appears like this:

 

<img id="{{ img_id }}"
    {% if forloop.first == true %}
    src="{{ featured_image | img_url: '300x300' }}"
    {% endif %}
    class="lazyload no-js lazypreload"
    data-src="{{ img_url }}"
    data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
    data-aspectratio="{{ image.aspect_ratio }}"
    data-sizes="auto"
    alt="{{ image.alt | escape }}"
    {% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}>

See that part of this code that says:

{% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}>

this is what we are going to alter.

 

Step 2a: Delete the following code from this section:

data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"

The only code you should have left is:

{% if section.settings.product_image_zoom_enable %}  {% endif %}>

Step 2b: Add the following code to the section you just deleted code from:

href="{{ image | img_url: '1424x1424'}}" data-fancybox="images" style="cursor:pointer;"

The section should now look something like this:

{% if section.settings.product_image_zoom_enable %} href="{{ image | img_url: '1424x1424'}}" data-fancybox="images" style="cursor:pointer;"{% endif %}>

Step 3: Resume the previous instructions at Step 8. Save and Smile.

 

EXPLANATION OF CHANGE:

In the previous method the FancyBox code was implemented mid-loop. If you got save duplicate pictures in your light box, this is why. FancyBox works by pulling all images that have a the "data-fancy" tag. So the code added in Step 6 added the main image to the page.

The <img> tag pulled in the main image into the tag AGAIN. The code we would have edited in Step 7 altered the thumbnails and added the "data-fancy" tag AGAIN. So each of these got pulled into FancyBox and appear as duplicate images.

 

By using this method, we add the ability to turn this feature ON or OFF in the theme customization menu as "Product Zoom". If you are seeing no change make sure that you have this setting turned ON


Thanks for the solution - much appreciated.

 

I seem to have a problem with the Lazyload where the Fancybox works for the featured image. I get the 'Requested content cannot be loaded error' whenever I try to display next image/s. However, when I refresh page and clear cache (CTRL+F5) everything works as it should.

 

I have commented out the following which seems to have fixed the problem:

                  class="lazyload no-js lazypreload"
                  data-src="{{ img_url }}"
                  data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ image.aspect_ratio }}"
                  data-sizes="auto"

Whilst not ideal as I from what I understand I lose the Lazyload functionality. Any ideas how it can be fixed?

0 Likes
alexehilary
Excursionist
50 0 2

hi!
but should it also work in the case of more than one image?
always only magnifies the first image

0 Likes
Perry_au
New Member
1 0 0

ok, im not much of a programmer, but my story so far is i followed all the instruction to incrporate fancybox in the steps above and i was running into 2 problems

1) if i commented out the lines below, fancy box would work fine when enlarged, however only my first image would show on the product page, but 2nd and 3rd onwards wouldn't show as blank, although they appeared the resize when just flipping through the images on the preview (product) page

2) with nothing commented out, the previews worked fine, but only my first fancybox image would appear enlarged, the remaining pictures had the load error

 

Now this is what worked, i removed the comment tabs and added the 1024 and 1424 sizes in the 'data widths' line as below:

 

// class="lazyload no-js lazypreload"
// data-src="{{ img_url }}"
// data-widths="[180, 360, 540, 720, 900, 1080, 1024, 1424, 1296, 1512, 1728, 2048]"
// data-aspectratio="{{ image.aspect_ratio }}"
// data-sizes="auto"

 

this has taken weeks of trial and error.. hope it helps someone.

 

good luck and let me know if someone sees an issue

0 Likes
Katman
New Member
7 0 0

First off, a BIG thanks to the OP (Raza) and the rest who contributed (the best they could) for this FancyBox integration work around for the Supply theme - a feature that should be included by default with this theme!!

I followed the instructions provided by Raza then the changes/fixes suggested by NichCitarella and Perry_au on my friend's company site here: 
https://aerogenicsusa.com 

After modifying code, I too am experiencing random fancybox glitches where with some listings all photos will load, while some error out if there are more than 4 photos, and sometimes even the 1st image errors out. Plus there's no navigation controls on mobile viewing tho naturally swiping left/right flips through the images while swiping down closes the gallery.

Example, on this listing fancybox glitches hard: 
https://aerogenicsusa.com/products/2002-06-honda-cr-v-3rd-brake-light-cover

I'm wondering if the images themselves are causing the errors because they're not a square aspect ratio? (ie 1024x1024, testing this theory out soon)

Aside from that, I wanted to consolidate and hybrid all of the mentioned working code + instructions into one post so that others won't have to piece together separate posts and feel bewildered, so here goes...


@Raza_Lilani wrote:

After checking all those lengthy methods - I found an easy way out to apply FancyBox to the Supply Theme. You can also try this with other themes. RECOMMENDED - to make a copy of your theme and implement on that first. (This method requires basic knowledge of HTML)

Step 1: Download the zip file FancyBox 3 from their website fancybox.net

Step 2: Download this file - http://code.jquery.com/jquery-3.1.1.min.js

Step 3: Go to Your Themes > ... > Edit HTML/CSS

Step 4: In Assets folder - 'Add a new Asset'
- upload the file download from Step 2
- upload FancyBox/dist/jquery.fancybox.min.css (the file from downloaded zip folder)
- upload FancyBox/dist/jquery.fancybox.min.js

Step 5:
Go in Layout folder and open Themes.liquid
Add the following code in CSS section below the existing code of theme.scss.css

{{ 'jquery.fancybox.min.css' | asset_url | stylesheet_tag }}

Save and Close the Themes.liquid

Step 6:
(updated per @NichCitarella + @Perry_au instructions)
:

Find the first <img> wrapper. As of this post it appears like this:
(then replace/update code shown in bold).

<img id="{{ img_id }}" 
{% if forloop.first == true %}
src="{{ featured_image | img_url: '300x300' }}"
{% endif %}
class="lazyload no-js lazypreload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1024, 1424, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}"
{% if section.settings.product_image_zoom_enable %} href="{{ image | img_url: '1424x1424'}}" data-fancybox="images" style="cursor:pointer;"
{% endif %}>


Step 7
:
After the {% endif %}> add the following script

<script src="{{ 'jquery-3.1.1.min.js' | asset_url }}"></script>
<script src="{{ 'jquery.fancybox.min.js' | asset_url }}"></script>


EXPLANATION OF STEP 6 CHANGE:

In the previous method the FancyBox code was implemented mid-loop. If you got save duplicate pictures in your light box, this is why. FancyBox works by pulling all images that have a the "data-fancy" tag. So the code added in Step 6 added the main image to the page.

The <img> tag pulled in the main image into the tag AGAIN. The code we would have edited in Step 7 altered the thumbnails and added the "data-fancy" tag AGAIN. So each of these got pulled into FancyBox and appear as duplicate images.

By using this method, we add the ability to turn this feature ON or OFF in the theme customization menu as "Product Zoom". If you are seeing no change make sure that you have the "Product Zoom" setting turned ON.

Good Luck!


Any tips on fixing the random gallery loading errors/glitches and mobile navigation would be golden!

0 Likes
EugeniuS
Shopify Partner
9 0 0

Using fancybox on desktop, it closes when clicked outside the content. Using it on a mobile device, it closes ONLY when the content is slided up or down (it doesn't react to clicking outside the content).

Is it possible (and how) to close fancybox on a mobile device just by clicking outside the content ?

0 Likes