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

diff --git a/resources/js/components/ProductGallery.vue b/resources/js/components/ProductGallery.vue
index 3fc25709a8142c9cde84365be4499b5f7d355b0b..6745349acca94a7dab1d6a1ab69cc96dcf7ee5ea 100644 (file)
--- 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>