[Launchpad] Turn product page images into fancybox gallery

instruction.md

Turning a product page into a fancybox gallery

1. Find the fancybox code in scripts.js. If your theme doesn't have fancy box loaded then load it up and add the sprites.

2. Find the code, it should look something like this:

$("a.zoom").fancybox({ padding:0, 'titleShow': false, overlayColor: '#000000', overlayOpacity: 0.2, });

3. Add rel attribute (Check the selectors)

$("a.zoom").fancybox({ padding:0, 'titleShow': false, overlayColor: '#000000', overlayOpacity: 0.2, }).attr('rel','gallery');

5. Add rel to the thumbs. We disregard the first thumbnail image as its always a copy of the featured image and we don't want it to show up twice in the gallery; hense the :not(:first) selector.

$(".image.span2 a:not(:first)").fancybox({ padding:0, 'titleShow': false, overlayColor: '#000000', overlayOpacity: 0.2, }).attr('rel','gallery

6. Disable switch image while popup is enabled (use an if statement and check against theme settings) i.e. {% if settings.enable_product_image_zoom %} switchImage($(this).attr('href'), null, $('.featured img')[0]); {% endif %}
7. Test thoroughly.

scripts.js.liquid

  $("a.zoom").fancybox({
    padding:0,
    'titleShow': false,
    overlayColor: '#000000',
    overlayOpacity: 0.2,
  }).attr('rel','gallery');
    
  $(".image.span2 a:not(:first)").fancybox({
    padding:0,
    'titleShow': false,
    overlayColor: '#000000',
    overlayOpacity: 0.2,
  }).attr('rel','gallery');