test iFixIt-style assembly guide

Signed-off-by: Michel-FK <michel.stempin@funkey-project.com>

docs/assets/js/custom.js

@@ -1,24 +1,45 @@
 $(document).ready(function () {
-  let imageGroups = []
-  $(".lightbox").each(function () {
-    let imageSource = $(this).attr('src')
-    let imageAlt = $(this).attr('alt').replace(/ /g,"")
-    let imageTitle = $(this).attr('alt')
-    if (imageTitle) {
-      imageTitle = 'title="' + imageTitle + '" '
-    }
-    else {
-      imageTitle = ''
-    }
-    $(this).
-        wrap('<a class="boxedThumb ' + imageAlt + '" ' +
-            imageTitle + 'href="' + imageSource + '"></a>')
-    imageGroups.push('.' + imageAlt)
-  })
-  jQuery.unique(imageGroups)
-  imageGroups.forEach(imageGroupsSet)
+    $(".step-container img:first-child").each(function () {
+	$(this)
+	    .clone()
+	    .removeClass("thumb")
+	    .addClass("large-image")
+	    .insertBefore($(this));
+	$(this).addClass("active");
+    })
 
-  function imageGroupsSet (value) {
-    $(value).simpleLightbox()
-  }
+    let imageGroups = []
+    $(".lightbox").each(function () {
+	let imageSource = $(this).attr('src')
+	let imageAlt = $(this).attr('alt').replace(/ /g,"")
+	let imageTitle = $(this).attr('alt')
+	if (imageTitle) {
+	    imageTitle = 'title="' + imageTitle + '" '
+	}
+	else {
+	    imageTitle = ''
+	}
+	$(this).
+            wrap('<a class="boxedThumb ' + imageAlt + '" ' +
+		 imageTitle + 'href="' + imageSource + '"></a>')
+	imageGroups.push('.' + imageAlt)
+    })
+    jQuery.unique(imageGroups)
+    imageGroups.forEach(imageGroupsSet)
+
+    function imageGroupsSet (value) {
+	$(value).simpleLightbox()
+    }
 })
+
+// Attach a delegate function on mouse over thumbnail
+$(".thumb").on("mouseover", function() {
+
+    // Set large image source to the thumbnail image source
+    $(this).siblings("img:first")
+	.attr("src", $(this).attr("src"));
+
+    // Activate the corresponding step-thumbnail and deactivate all others
+    $(this).addClass("active")
+	.siblings().removeClass("active");
+});