From 06f54ca6e10eba35ca276e2fb880b6329440d641 Mon Sep 17 00:00:00 2001
From: Shawn King <srk6992@gmail.com>
Date: Wed, 29 May 2019 22:03:37 -0400
Subject: [PATCH] FTR - JS is loading now so I am adding auto incrementing for
 the product thumbnails

---
 BC-Layout.html                      | 1 +
 BC-Product.html                     | 2 +-
 assets/scripts/product-slideshow.js | 7 +++++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/BC-Layout.html b/BC-Layout.html
index 2ac11ab..f773c61 100644
--- a/BC-Layout.html
+++ b/BC-Layout.html
@@ -248,6 +248,7 @@ <h1 class="custom-page-header page-title has-dash">{{ page.name }}</h1>
     <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
     <script src="//cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js"></script>
     <link href="https://cdn.jsdelivr.net/gh/sk5/sk5.github.io/assets/css/styles.css" rel="stylesheet" type="text/css" />
+    <script src="//cdn.jsdelivr.net/gh/sk5/sk5.github.io/assets/scripts/product-slideshow.js"></script>
     <script src="{{ 'api' | theme_js_url }}"></script>
     <script src="{{ theme | theme_js_url }}"></script>
 </body>
diff --git a/BC-Product.html b/BC-Product.html
index 70dba88..79106ae 100644
--- a/BC-Product.html
+++ b/BC-Product.html
@@ -21,7 +21,7 @@
                 <!-- 1. Add unique class names to onclick and the images above -->
                 <!-- 2. When clicking a unique thumbnail, show the corresponding image -->
                 <!-- 3. Hide all other child images parent <li>'s -->
-                <a href="#" onclick="show(1)">
+                <a href="#" class="product__thumbnail--link" onclick="show(1)">
                     <img class="product--image" src="{{ image | product_image_url | constrain: 300 }}" alt="Image of {{ product.name | escape }}">
                 </a>
             </li>
diff --git a/assets/scripts/product-slideshow.js b/assets/scripts/product-slideshow.js
index ab04712..5b9b983 100644
--- a/assets/scripts/product-slideshow.js
+++ b/assets/scripts/product-slideshow.js
@@ -1,8 +1,15 @@
 window.onload = function () {
+    // Auto increment main images
     var list = document.getElementsByClassName("product__slide");
     for (var i = 0; i < list.length; i++) {
         list[i].setAttribute("data-slide", "image" + i);
     }
+    //
+    // Auto increment thumbnails
+    var thumbnailList = document.getElementsByClassName("product__thumbnail--link");
+    for (var j = 0; j < thumbnailList.length; j++) {
+        list[j].setAttribute("onclick", "show" + j);
+    }
 };
 
 function show(nr) {