From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 9 Oct 2019 17:49:47 +0000 (+0200)
Subject: Replace lightbox arrows and open images directly when clicking on thumbnails. Wait... 
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=1d4d62662d9df41959dd595d595a94ba822d361a;p=pmi.git

Replace lightbox arrows and open images directly when clicking on thumbnails. Wait #3074
---

diff --git a/resources/js/components/ProductGallery.vue b/resources/js/components/ProductGallery.vue
index 3fc2570..6745349 100644
--- a/resources/js/components/ProductGallery.vue
+++ b/resources/js/components/ProductGallery.vue
@@ -8,8 +8,8 @@
                  :key="i"
                  :style="`background-image:url(${thumb})`"
                  :class="{ 'product-gallery-current' : currentImage === i }"
-                 class="product-gallery-thumb"
-                 @click="currentImage = i"
+                 class="product-gallery-thumb cursor-zoom-in"
+                 @click="lightboxImage = i"
             >
             </div>
         </div>
@@ -21,6 +21,12 @@
             @close="lightboxImage = null"
         >
             <template v-slot:close>×</template>
+            <template v-slot:next>
+                <svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26"><g fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"><path d="M25 1l12 12-12 12"/><path d="M37.001 13H1"/></g></svg>
+            </template>
+            <template v-slot:prev>
+                <svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26"><g fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"><path d="M13.414 25l-12-12 12-12"/><path d="M1.413 13h36.001"/></g></svg>
+            </template>
         </lightbox-gallery>
     </div>
 </template>
@@ -70,3 +76,11 @@
 
     }
 </script>
+
+<style lang="stylus">
+    .blueimp-gallery
+        > .next, > .prev
+            background: transparent
+            border: none
+            border-radius: unset
+</style>