Gallery

How to add the FancyBox lightbox to the Supply theme

I'm happy to help everyone with implementing a lightbox effect for their product photos on the Supply theme, but there are a couple items I feel need to be cleared up before we start.

The first being that the Supply theme actually does not use Fancybox. Fancybox is the name of a specific plugin from an author. A "lightbox" effect is used to showcase product photos and there are a number of plugins that accomplish this like Colorbox, Slimbox or Fancybox. If you look in the Assets folder once you've downloaded the Supply theme, you'll see that there aren't any of the same files in there that the fancyApps website says you'll need. http://fancyapps.com/fancybox/

Second, the customization below will have the lightbox effect be the default effect for a product feature images. If you choose to turn on "Enable Image Zoom" from your Customize Theme page, then that will prevent the lightbox effect from happening on click. So this is a decision between being able to zoom in tight on photos on mouseover, or have them enlarge on click.

Third, getting Fancybox working with your Supply theme, with the ability to navigate through a gallery, and not sacrifice the option to have the zoom feature for Supply's product images is going to be a pretty heavy customization. I have the steps below, and I strongly recommend you make these modifications on a duplicate of your theme and not on your actual published theme. You may even want to ask someone with a good amount of experience manipulating HTML and Javascript to help you out. Once you have it working on your duplicate, it's a simple step to publish it as your public-facing theme.

Final item: If you choose to make this customization, it will be your responsibility to implement and maintain it. You'll be making changes to some pretty important files across multiple locations, so a Shopify employee won't be able to help you fix any issues that come up from implementing this.

Cool. Here we go!

We'll be using version 1.3.4 found at http://fancybox.net/.

Step 1: Getting your files

Head to http://fancybox.net/howto and download the zip file by clicking "Version 1.3.4" or click this link, which ever you want.

In that zip file are some files we don't need, like an out-dated version of jQuery. So unzip the jquery.fancybox-1.3.4.zip file, find the fancybox directory inside it. Those are the files we want.

http://snapify.shopify.com/02-36-fbotv-zhu1u.png

Uploading this many files to your Asset directory can be a pain, so you may want to download your theme to your computer and upload your files offline. You can find more information about that in our online documentation about bulk uploads.

Step 2: Setup your script and style files

In your theme.liquid file, add the following code before the closing </head> tag so your browser has access to the files. You won't be able to just copy-paste from fancybox.net's How To because your files are in a different location than the example.

Here is the code in liquid form that you'll want to past before the closing </head>.

  <!-- Fancybox plugin files ======== -->
  {{ 'jquery.fancybox-1.3.4.js' | asset_url | script_tag }}
  {{ 'jquery.fancybox-1.3.4.css' | asset_url | stylesheet_tag }}

  <!-- Option: Fancybox easing transitions -->
  {{ 'jquery.easing-1.3.pack.js' | asset_url | script_tag }}

Then at the bottom of your theme.liquid template, paste the code that will make Fancybox "fire", or activate, when a customer clicks one of product featired image. Right before your closing </body> put the following script.

  <script>
    $(document).ready(function() {

    /* This is basic - uses default settings */

  $("a#fancy_image").fancybox({
    'transitionIn'  : 'fade',
    'transitionOut' : 'fade',
    'speedIn'   : 300,
    'speedOut'    : 200,
    'overlayShow' : true
  });

  /* Using custom settings */

  $("a#inline").fancybox({
    'hideOnContentClick': true
  });

  /* Apply fancybox to multiple items */

  $("a.fancy_group").fancybox({
    'transitionIn'  : 'fade',
    'transitionOut' : 'fade',
    'speedIn'   : 300,
    'speedOut'    : 200,
    'overlayShow' : true
  });

});
  </script>

What this says is that any link elements that have the id of "fancy_image" or the class of "fancy_group" will be using the Fancybox plugin. I have the same settings being applied to both "#fancy_image" and ".fancy_group".

I'll talk briefly about these settings later on, but if you're curious what 'overlayShow' : true actually means, check out the Options available to you at http://fancybox.net/api.

Step 3: Bug fix for the main fancybox file

Because this version of Fancybox was made well before our current day version of jQuery, there is a quick fix we need to make. In your jquery.fancybox-1.3.4.js file, replace line 29 with the following:

isIE6 = navigator.userAgent.match(/msie/i) && navigator.userAgent.match(/6/) && !window.XMLHttpRequest,

Step 4: Prep your product page images

Option 1: Just one lightboxed image

Head to your product.liquid template and look for the lines of code where the featured product photo is referrenced. Assuming you haven't made any code changes yet, it will be line 12. Replace the line: <img id="productPhotoImg" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" {% if settings.product_image_zoom_enable %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}>

With these lines:

<a id="fancy_image" href="{{ featured_image | img_url: 'master'}}">
   <img id="productPhotoImg" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" {% if settings.product_image_zoom_enable %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}>
</a>

Option 2: Gallery images on product page

If we want to have visitors be able to navigate through a gallery of product images, we'll need to add the classes we defined in Step 2.

On our featured image's <a> element, we are going add class="fancy_group" and rel="group1". We are still going to add id="fancy_image" because it will be needed for a modification to our shop.js file later. Those lines should now look like this:

<a id="fancy_image" class="fancy_group" rel="group1" href="{{ featured_image | img_url: 'master'}}">
  <img id="productPhotoImg" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" {% if settings.product_image_zoom_enable %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}>
</a>

And then down in our for-loop that displays different product thumbnails, we are going to add a "dummy link" before each thumbnail image. Our dummy link will be:

<a href="{{ image.src | img_url: 'master' }}" class="fancy_group" rel="group1"></a>

So now your for loop for images in product.images should look like this:

{% for image in product.images %}
  <li class="grid-item medium--down-one-quarter large--one-quarter">
    <a href="{{ image.src | img_url: 'master' }}" class="fancy_group" rel="group1"></a>
    <a href="{{ image.src | img_url: 'large' }}" class="product-photo-thumb">
      <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
    </a>
  </li>
{% endfor %}

Why did I just put in this dummy link? Because we need a way to tell Fancybox which links are all part of the same group ('group1', in this case). I couldn't simply change the link wrapping the actual thumbnail image because then clicking that thumbnail would open a lightbox instead of changing the featured image above the thumbnails.

Something to note: This gallery option is going to let your visitors scroll through a lightbox gallery of all the product photos on the screen. This means that the featured image is going to show up twice in that gallery because it also appears in the list of thumbnails. Just a heads up!

About image sizes

In this setup, I've chosen 'master' for the image size to dispaly in the lightbox. That is the largest product image size available - which is currently 2048x2048. If you are interested in what your other options are, check out the parameters available here.

Step 5: Modifiying our shop.js file

One of the last things we need to think about is the fact the "featured image", the largest image at the top, is going to change everytime a visitor click a thumbnail image. Therefore, we need to update the <a> tag around the featured image everytime the featured image changes.

Go to your shop.js file and find the timber.productImageSwitch function. This should be on line 253 if you haven't done any code changes to this file before. You are going to add some code right before the "on click" event ends. You can replace the whole productImageSwitch function with the following:

timber.productImageSwitch = function () {
  if ( timber.cache.$thumbImages.length ) {
    // Switch the main image with one of the thumbnails
    // Note: this does not change the variant selected, just the image
    timber.cache.$thumbImages.on('click', function(evt) {
      evt.preventDefault();
      var newImage = $(this).attr('href');
      timber.switchImage(newImage, null, timber.cache.$productImage);

      //New link for Fancy image
      var $fancyImage = $('#fancy_image');
      if ($fancyImage) {
        var fancyLink = newImage.replace('_large.', '.');
        $fancyImage.attr('href', fancyLink);
      }

    });
  }
};

Next steps?

After you've implemented Fancybox version 1.3.4 as detailed above, you may want to experiment with the different options available.

In that that block of script we inserted in at the bottom of theme.liquid is where you can add different options, or change the value of them. Don't like the overlay? Just change it's value to false. Wish people could endlessly cycle through your gallery? And 'cyclic' : true to the list of parameters:

  $("a.fancy_group").fancybox({
    'transitionIn'  : 'elastic',
    'transitionOut' : 'elastic',
    'speedIn'   : 600,
    'speedOut'    : 200,

    'overlayShow' : false,
    'cyclic' : true

  });

Also, now that you have Fancybox installed, you can easily add a lightbox effect to other images on your website - not just product images. We have documentation online here about how to set that up, but you've already done about 80% of the work. You'll just need to be sure the images you want lightboxed are wrapped in an <a> tag with the attributes id="fancy_image" and href="{{ the url of the image you want to dispaly }}".

As I said, this customization is fairly involved, so I strongly recommend attempting it on a duplicate of your theme.

Best of luck!