Front-end, better product images view

assets/template/scripts_js_file.go

@@ -1349,10 +1349,13 @@ $(document).ready(function() {
 		controls: false,
 		download: false
 	});
-});
-
-$(document).ready(function(){
 	$('#product_image img').css('cursor', 'pointer').click(function() {
-		$('#product_thumbnails a.thumbnail:first').click();
+		$($('#product_thumbnails a.thumbnail').get($(this).data('index'))).click();
+    });
+	$('#product_thumbnails a.thumbnail').each(function() {
+		$(this).mouseover(function() {
+			$('#product_image img').attr('src', $(this).data('hover'));
+			$('#product_image img').data('index', $(this).data('index'));
+		});
     });
 });`)

assets/template/shop_product_html_file.go

@@ -27,7 +27,7 @@ var VarShopProductHtmlFile = []byte(`{{template "header.html" .}}
 							<div class="card mt-1">
 								<div id="product_thumbnails" class="thumbnails d-flex flex-wrap">
 									{{range $index, $img := $.Data.Shop.Product.Images}}
-										<a class="thumbnail{{if gt $index 5}} thumbnail-hidden{{end}}" href="{{.ThumbnailFull}}" data-src="{{.ThumbnailFull}}">
+										<a class="thumbnail{{if gt $index 5}} thumbnail-hidden{{end}}" href="{{.ThumbnailFull}}" data-src="{{.ThumbnailFull}}" data-hover="{{.Thumbnail3}}" data-index="{{$index}}">
 											<img class="img-responsive" alt="" src="{{.Thumbnail0}}" />
 										</a>
 									{{end}}

hosts/localhost/template/scripts.js

@@ -1347,10 +1347,13 @@ $(document).ready(function() {
 		controls: false,
 		download: false
 	});
-});
-
-$(document).ready(function(){
 	$('#product_image img').css('cursor', 'pointer').click(function() {
-		$('#product_thumbnails a.thumbnail:first').click();
+		$($('#product_thumbnails a.thumbnail').get($(this).data('index'))).click();
+    });
+	$('#product_thumbnails a.thumbnail').each(function() {
+		$(this).mouseover(function() {
+			$('#product_image img').attr('src', $(this).data('hover'));
+			$('#product_image img').data('index', $(this).data('index'));
+		});
     });
 });

hosts/localhost/template/shop-product.html

@@ -25,7 +25,7 @@
 							<div class="card mt-1">
 								<div id="product_thumbnails" class="thumbnails d-flex flex-wrap">
 									{{range $index, $img := $.Data.Shop.Product.Images}}
-										<a class="thumbnail{{if gt $index 5}} thumbnail-hidden{{end}}" href="{{.ThumbnailFull}}" data-src="{{.ThumbnailFull}}">
+										<a class="thumbnail{{if gt $index 5}} thumbnail-hidden{{end}}" href="{{.ThumbnailFull}}" data-src="{{.ThumbnailFull}}" data-hover="{{.Thumbnail3}}" data-index="{{$index}}">
 											<img class="img-responsive" alt="" src="{{.Thumbnail0}}" />
 										</a>
 									{{end}}