Polished thumbnails

Author: fahrenq

README.md

@@ -54,6 +54,8 @@ const vueImgConfig = {
   sourceButton: false,
   // Event listener to open gallery will be applied to <img> element
   openOn: 'click',
+  // Show thumbnails for all groups with more than 1 image
+  thumbnails: false,
 }
 Vue.use(VueImg, vueImgConfig);
 ```
@@ -85,6 +87,7 @@ Options that could be specified in directive value
 | title  | Caption that will be displayed | empty string or value of the `alt` attribute, if `altAsTitle` is true | string |
 | openOn | Event listener to open gallery will be applied to `<img>`. Available options are 'dblclick', 'mouseover' and all native JS events. | 'click' if another not stated when initializing plugin | string |
 | sourceButton | Display 'download' button near 'close' that opens source image in new tab | `false` if `sourceButton` is not set to true when initializing plugin | boolean |
+| thumbnails | When opening group by clicking (or other `openOn` event) on this image, thumbnails of images for this group will be visible | `false` if `thumbnails` is not set to true when initializing plugin | boolean |
 | opened | Function that will be executed on gallery open | undefined | function |
 | closed | Function that will be executed on gallery close | undefined | function |
 | changed(imageIndex) | Function that will be executed when switching between images in gallery | undefined | function |

dist/v-img.js.map

@@ -34,6 +34,7 @@
           </span>
         </div>
       </div>
+
       <!-- Controls start -->
       <transition appear name="v-img-fade">
         <span v-if="visibleUI && images.length !== 1" class="prev-v-img" @click="prev">
@@ -50,12 +51,20 @@
         </span>
       </transition>
       <!-- Constols end -->
-      <div class="footer-v-img" v-if="previews.length > 1">
-        <div v-for="(preview, index) in previews" :key="index" :style="{backgroundImage: 'url('+preview+')'}" @click="select(index)" :class="{'is-selected': currentImageIndex == index}"></div> 
+
+      <div class="footer-v-img" v-if="thumbnails && images.length > 1">
+        <img
+          v-for="(thumbnail, index) in images"
+          :key="index"
+          :src="thumbnail"
+          @click="select(index)"
+          :class="{'is-selected': currentImageIndex == index}">
       </div>
+
       <div class="content-v-img">
         <img :src="images[currentImageIndex]" @click="next">
       </div>
+
     </div>
   </transition>
 </template>
@@ -65,14 +74,14 @@ export default {
   data() {
     return {
       images: [],
-      previews: [],
       titles: [],
       sourceButtons: [],
       visibleUI: true,
       currentImageIndex: 0,
       closed: true,
       uiTimeout: null,
-      handlers: {}
+      handlers: {},
+      thumbnails: false,
     };
   },
   watch: {
@@ -83,7 +92,7 @@ export default {
       if (!newVal && this.handlers.opened) {
         this.handlers.opened();
       }
-    }
+    },
   },
   methods: {
     // Not using currentImageIndex watcher because it will
@@ -97,7 +106,7 @@ export default {
     },
     close() {
       if (!this.closed) {
-        document.querySelector("body").classList.remove("body-fs-v-img");
+        document.querySelector('body').classList.remove('body-fs-v-img');
         this.images = [];
         this.currentImageIndex = 0;
         this.closed = true;
@@ -138,24 +147,24 @@ export default {
           this.visibleUI = false;
         }, 3500);
       }
-    }
+    },
   },
   created() {
-    window.addEventListener("keyup", e => {
+    window.addEventListener('keyup', e => {
       // esc key and 'q' for quit
       if (e.keyCode === 27 || e.keyCode === 81) this.close();
       // arrow right and 'l' key (vim-like binding)
       if (e.keyCode === 39 || e.keyCode === 76) this.next();
       // arrow left and 'h' key (vim-like binding)
       if (e.keyCode === 37 || e.keyCode === 72) this.prev();
     });
-    window.addEventListener("scroll", () => {
+    window.addEventListener('scroll', () => {
       this.close();
     });
-    window.addEventListener("mousemove", () => {
+    window.addEventListener('mousemove', () => {
       this.showUI();
     });
-  }
+  },
 };
 </script>
 
@@ -195,7 +204,8 @@ export default {
   user-select: none;
 }
 
-.header-v-img, .footer-v-img {
+.header-v-img,
+.footer-v-img {
   position: absolute;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.3);
@@ -212,27 +222,34 @@ export default {
 .footer-v-img {
   bottom: 0;
   justify-content: center;
+  height: 70px;
+  /* scrolling thumbnails on mobile */
+  overflow-x: auto;
 }
 
-.footer-v-img div {
-  width: 42px;
-  height: 30px;
-  background-position: center;
-  background-size: cover;
+.footer-v-img img {
+  width: 60px;
+  height: 60px;
   cursor: pointer;
+  -webkit-transition: transform 0.2s ease-out;
+  transition: transform 0.2s ease-out;
+  object-fit: cover;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-.footer-v-img div.is-selected {
-  width: 56px;
-  height: 40px;
+.footer-v-img img.is-selected {
+  transform: scale(1.1);
 }
 
-.footer-v-img div:not(:last-child) {
-  margin-right: 5px;
+.footer-v-img img:not(:last-child) {
+  margin-right: 7px;
 }
 
 .title-v-img {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   font-size: 18px;
   font-weight: 400;
   color: white;
@@ -244,7 +261,7 @@ export default {
 .count-v-img,
 .buttons-v-img {
   width: 80px;
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
 }
 
 .count-v-img {
@@ -305,7 +322,7 @@ export default {
   top: 50%;
   margin-top: -12.5px;
   font-size: 15px;
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   text-align: center;
   background-color: rgba(0, 0, 0, 0.3);
   z-index: 1000;

dist/v-img.mjs

@@ -11,11 +11,17 @@ const addPluginAttributes = (el, binding, options) => {
   let sourceButton;
   let src = el.src; // eslint-disable-line prefer-destructuring
   let title;
+  let thumbnails;
   const events = {};
 
   if (options.altAsTitle) title = el.alt;
-  openOn = options.openOn; // eslint-disable-line prefer-destructuring
-  sourceButton = options.sourceButton; // eslint-disable-line prefer-destructuring
+
+  /* eslint-disable prefer-destructuring */
+  // Assigning values from plugin initialization options here
+  openOn = options.openOn;
+  sourceButton = options.sourceButton;
+  thumbnails = options.thumbnails;
+  /* eslint-enable prefer-destructuring */
 
   // Overriding options if they're provided in binding.value
   if (typeof binding.value !== 'undefined') {
@@ -24,14 +30,19 @@ const addPluginAttributes = (el, binding, options) => {
     openOn = binding.value.openOn || openOn;
     src = binding.value.src || src;
     title = binding.value.title || title;
-    // binding.value.sourceButton could be set to false, that's why we're
-    // comparing it to undefined but not using approach as in src, group, title, etc.
-    if (binding.value.sourceButton !== undefined) {
-      sourceButton = binding.value.sourceButton; // eslint-disable-line prefer-destructuring
-    }
+    // Lifecycle functions
     events.opened = binding.value.opened;
     events.closed = binding.value.closed;
     events.changed = binding.value.changed;
+    // binding.value.sourceButton could be set to false, (part before || will always be ignored)
+    // that's why we're comparing it to undefined but not using approach as in src, group, title, etc.
+    if (binding.value.sourceButton !== undefined) {
+      sourceButton = binding.value.sourceButton; // eslint-disable-line prefer-destructuring
+    }
+    // same as above
+    if (binding.value.thumbnails !== undefined) {
+      thumbnails = binding.value.thumbnails; // eslint-disable-line prefer-destructuring
+    }
   }
 
   // Setting up data attributes for dynamic properties
@@ -40,6 +51,7 @@ const addPluginAttributes = (el, binding, options) => {
   if (group) el.setAttribute('data-vue-img-group', group);
   if (title) el.setAttribute('data-vue-img-title', title);
   if (sourceButton) el.setAttribute('data-vue-img-source-button', sourceButton);
+  if (thumbnails) el.setAttribute('data-vue-img-thumbnails', thumbnails);
 
   if (!src) console.error('v-img element missing src parameter.');
 
@@ -54,6 +66,7 @@ const addPluginAttributes = (el, binding, options) => {
     events,
     sourceButton,
     openOn,
+    thumbnails,
   };
 };
 
@@ -63,6 +76,7 @@ const install = (Vue, options) => {
   const defaultOptions = {
     altAsTitle: false,
     sourceButton: false,
+    thumbnails: false,
     openOn: 'click',
   };
 
@@ -76,12 +90,12 @@ const install = (Vue, options) => {
 
       if (oldVnode.data.attrs && vnode.data.attrs) {
         srcUpdated = oldVnode.data.attrs.src !== vnode.data.attrs.src;
+        // handle alt tag change only if option altAsTitle is enabled
         if (options.altAsTitle) {
           altUpdated = oldVnode.data.attrs.alt !== vnode.data.attrs.alt;
         }
       }
 
-      // handle alt tag change only if option is enabled
       const bindingValueUpdated = binding.oldValue !== binding.value;
 
       if (srcUpdated || altUpdated || bindingValueUpdated) {
@@ -115,9 +129,9 @@ const install = (Vue, options) => {
           ];
         }
         Vue.set(vm, 'images', images.map(e => e.dataset.vueImgSrc));
-        Vue.set(vm, 'previews', images.map(e => e.src));
         Vue.set(vm, 'titles', images.map(e => e.dataset.vueImgTitle));
         Vue.set(vm, 'sourceButtons', images.map(e => e.dataset.vueImgSourceButton === 'true'));
+        Vue.set(vm, 'thumbnails', el.dataset.vueImgThumbnails === 'true');
         Vue.set(vm, 'currentImageIndex', images.indexOf(el));
         Vue.set(vm, 'handlers', addedAttributes.events);
         Vue.set(vm, 'closed', false);

dist/v-img.mjs.map

@@ -2,9 +2,8 @@
   <div>
     <input type="number" v-model="n" id="">
     <img v-img src="https://unsplash.it/200/300?image=2">
-    <img v-img src="https://unsplash.it/200/300?image=324">
-    <img v-img="{ src: `https://unsplash.it/200/300?image=${n}` }" :diabled="n === 2">
-    <img v-img:v src="https://unsplash.it/200/300?image=3">
+    <img v-img:v="{ thumbnails: false }" src="https://unsplash.it/200/300?image=324">
+    <img v-img:v="{ src: `https://unsplash.it/500/300?image=${n}`}" :src="`https://unsplash.it/200/300?image=${n}`">
   </div>
 </template>
 
@@ -13,15 +12,20 @@ export default {
   data() {
     return {
       n: 1,
-    }
+    };
+  },
+  created() {
+    setInterval(() => {
+      this.n += 1;
+    }, 20000);
   },
 };
 </script>
 
 <style>
 img {
   width: 200px;
-  height: 100px;
+  /* height: 100px; */
 }
 </style>
 

lib/ImgScreen.vue

@@ -5,6 +5,7 @@ import VueImg from '../../dist/v-img';
 Vue.use(VueImg, {
   altAsTitle: true,
   sourceButton: false,
+  thumbnails: true,
 });
 
 /* eslint-disable no-new */