delete example images

example/views/example/ComponentExample.vue

@@ -143,7 +143,7 @@
               <figure class="images">
                 <div class="image-wrapper" v-for="{source, thumbnail} in scope.images" :key="source">
                   <img class="image"
-                       :src="thumbnail" :data-source="source" :alt="source.split('/').pop()"
+                       :src="thumbnail" :data-source="source" :alt="source.split('?image=').pop()"
                   >
                 </div>
               </figure>
@@ -164,70 +164,15 @@ Vue.use(Viewer)
 Viewer.setDefaults({
   zIndexInline: 2017
 })
-import img1 from './source/losglaciares_1920_1200_ss_01.jpg'
-import img2 from './source/losglaciares_1920_1200_ss_02.jpg'
-import img3 from './source/losglaciares_1920_1200_ss_03.jpg'
-import img4 from './source/losglaciares_1920_1200_ss_04.jpg'
-import img5 from './source/losglaciares_1920_1200_ss_05.jpg'
-import img6 from './source/losglaciares_1920_1200_ss_06.jpg'
-import img7 from './source/losglaciares_1920_1200_ss_07.jpg'
-import img8 from './source/losglaciares_1920_1200_ss_08.jpg'
-import img9 from './source/losglaciares_1920_1200_ss_09.jpg'
-import img10 from './source/losglaciares_1920_1200_ss_10.jpg'
 
-import thumbnail1 from './thumbnail/losglaciares_1920_1200_ss_01_thumbnail.jpg'
-import thumbnail2 from './thumbnail/losglaciares_1920_1200_ss_02_thumbnail.jpg'
-import thumbnail3 from './thumbnail/losglaciares_1920_1200_ss_03_thumbnail.jpg'
-import thumbnail4 from './thumbnail/losglaciares_1920_1200_ss_04_thumbnail.jpg'
-import thumbnail5 from './thumbnail/losglaciares_1920_1200_ss_05_thumbnail.jpg'
-import thumbnail6 from './thumbnail/losglaciares_1920_1200_ss_06_thumbnail.jpg'
-import thumbnail7 from './thumbnail/losglaciares_1920_1200_ss_07_thumbnail.jpg'
-import thumbnail8 from './thumbnail/losglaciares_1920_1200_ss_08_thumbnail.jpg'
-import thumbnail9 from './thumbnail/losglaciares_1920_1200_ss_09_thumbnail.jpg'
-import thumbnail10 from './thumbnail/losglaciares_1920_1200_ss_10_thumbnail.jpg'
-
-const sourceImages = [
-  {
-    thumbnail: thumbnail1,
-    source: img1
-  },
-  {
-    thumbnail: thumbnail2,
-    source: img2
-  },
-  {
-    thumbnail: thumbnail3,
-    source: img3
-  },
-  {
-    thumbnail: thumbnail4,
-    source: img4
-  },
-  {
-    thumbnail: thumbnail5,
-    source: img5
-  },
-  {
-    thumbnail: thumbnail6,
-    source: img6
-  },
-  {
-    thumbnail: thumbnail7,
-    source: img7
-  },
-  {
-    thumbnail: thumbnail8,
-    source: img8
-  },
-  {
-    thumbnail: thumbnail9,
-    source: img9
-  },
-  {
-    thumbnail: thumbnail10,
-    source: img10
-  }
-]
+const sourceImages = []
+const base = parseInt((Math.random() * 60), 10) + 10
+for (let i = 0; i < 10; i++) {
+  sourceImages.push({
+    thumbnail: 'https://picsum.photos/346/216/?image=' + (base + i),
+    source: 'https://picsum.photos/1440/900/?image=' + (base + i)
+  })
+}
 
 export default {
 

example/views/example/DirectiveExample.vue

@@ -16,7 +16,7 @@
     </p>
     <div v-viewer="options" class="images clearfix">
       <template v-for="{source, thumbnail} in images">
-        <img :src="thumbnail" :data-source="source" class="image" :key="source" :alt="source.split('/').pop()">
+        <img :src="thumbnail" :data-source="source" class="image" :key="source" :alt="source.split('?image=').pop()">
       </template>
     </div>
   </div>
@@ -32,70 +32,15 @@ Vue.use(Viewer, {
     zIndex: 9999
   }
 })
-import img1 from './source/losglaciares_1920_1200_ss_01.jpg'
-import img2 from './source/losglaciares_1920_1200_ss_02.jpg'
-import img3 from './source/losglaciares_1920_1200_ss_03.jpg'
-import img4 from './source/losglaciares_1920_1200_ss_04.jpg'
-import img5 from './source/losglaciares_1920_1200_ss_05.jpg'
-import img6 from './source/losglaciares_1920_1200_ss_06.jpg'
-import img7 from './source/losglaciares_1920_1200_ss_07.jpg'
-import img8 from './source/losglaciares_1920_1200_ss_08.jpg'
-import img9 from './source/losglaciares_1920_1200_ss_09.jpg'
-import img10 from './source/losglaciares_1920_1200_ss_10.jpg'
 
-import thumbnail1 from './thumbnail/losglaciares_1920_1200_ss_01_thumbnail.jpg'
-import thumbnail2 from './thumbnail/losglaciares_1920_1200_ss_02_thumbnail.jpg'
-import thumbnail3 from './thumbnail/losglaciares_1920_1200_ss_03_thumbnail.jpg'
-import thumbnail4 from './thumbnail/losglaciares_1920_1200_ss_04_thumbnail.jpg'
-import thumbnail5 from './thumbnail/losglaciares_1920_1200_ss_05_thumbnail.jpg'
-import thumbnail6 from './thumbnail/losglaciares_1920_1200_ss_06_thumbnail.jpg'
-import thumbnail7 from './thumbnail/losglaciares_1920_1200_ss_07_thumbnail.jpg'
-import thumbnail8 from './thumbnail/losglaciares_1920_1200_ss_08_thumbnail.jpg'
-import thumbnail9 from './thumbnail/losglaciares_1920_1200_ss_09_thumbnail.jpg'
-import thumbnail10 from './thumbnail/losglaciares_1920_1200_ss_10_thumbnail.jpg'
-
-const sourceImages = [
-  {
-    thumbnail: thumbnail1,
-    source: img1
-  },
-  {
-    thumbnail: thumbnail2,
-    source: img2
-  },
-  {
-    thumbnail: thumbnail3,
-    source: img3
-  },
-  {
-    thumbnail: thumbnail4,
-    source: img4
-  },
-  {
-    thumbnail: thumbnail5,
-    source: img5
-  },
-  {
-    thumbnail: thumbnail6,
-    source: img6
-  },
-  {
-    thumbnail: thumbnail7,
-    source: img7
-  },
-  {
-    thumbnail: thumbnail8,
-    source: img8
-  },
-  {
-    thumbnail: thumbnail9,
-    source: img9
-  },
-  {
-    thumbnail: thumbnail10,
-    source: img10
-  }
-]
+const sourceImages = []
+const base = parseInt((Math.random() * 60), 10) + 10
+for (let i = 0; i < 10; i++) {
+  sourceImages.push({
+    thumbnail: 'https://picsum.photos/346/216/?image=' + (base + i),
+    source: 'https://picsum.photos/1440/900/?image=' + (base + i)
+  })
+}
 
 export default {