diff --git a/dist/vue-silentbox.esm.js b/dist/vue-silentbox.esm.js
index 5703e20..e116d00 100644
--- a/dist/vue-silentbox.esm.js
+++ b/dist/vue-silentbox.esm.js
@@ -514,7 +514,7 @@ var script$1 = {
         return {
           src: '',
           alt: '',
-          thumbnailWidth: '200px',
+          thumbnailWidth: 'auto',
           thumbnailHeight: 'auto',
           thumbnail: '',
           autoplay: false,
@@ -554,7 +554,7 @@ var script$1 = {
         item: {
           src: '',
           alt: '',
-          thumbnailWidth: '200px',
+          thumbnailWidth: 'auto',
           thumbnailHeight: 'auto',
           thumbnail: '',
           autoplay: false,
@@ -661,15 +661,22 @@ var __vue_render__$1 = function() {
             }
           },
           [
-            _c("img", {
-              attrs: {
-                src: image.thumbnail,
-                alt: image.alt,
-                width: image.thumbnailWidth,
-                height: image.thumbnailHeight
-              }
-            })
-          ]
+            _vm._t(
+              "silentbox-item",
+              [
+                _c("img", {
+                  attrs: {
+                    src: image.thumbnail,
+                    alt: image.alt,
+                    width: image.thumbnailWidth,
+                    height: image.thumbnailHeight
+                  }
+                })
+              ],
+              { silentboxItem: image }
+            )
+          ],
+          2
         )
       }),
       _vm._v(" "),
@@ -677,7 +684,7 @@ var __vue_render__$1 = function() {
         attrs: {
           "overlay-item": _vm.overlay.item,
           visible: _vm.overlay.visible,
-          "total-items": _vm.overlay.totalItems
+          "total-items": _vm.totalItems
         },
         on: {
           closeSilentboxOverlay: _vm.hideOverlay,
@@ -695,7 +702,7 @@ __vue_render__$1._withStripped = true;
   /* style */
   const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-422c39d4_0", { source: ".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/gallery.vue","gallery.vue"],"names":[],"mappings":"AAkKA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;ACjKA;;AAEA,sCAAsC","file":"gallery.vue","sourcesContent":["<template>\r\n  <section id=\"silentbox-gallery\">\r\n    <slot />\r\n    <div\r\n      v-for=\"(image, index) in galleryItems\"\r\n      :key=\"image.src\"\r\n      @click=\"openOverlay(image, index)\"\r\n      class=\"silentbox-item\"\r\n    >\r\n      <img\r\n        :src=\"image.thumbnail\"\r\n        :alt=\"image.alt\"\r\n        :width=\"image.thumbnailWidth\"\r\n        :height=\"image.thumbnailHeight\"\r\n      >\r\n    </div>\r\n    <silentbox-overlay\r\n      :overlay-item=\"overlay.item\"\r\n      :visible=\"overlay.visible\"\r\n      :total-items=\"overlay.totalItems\"\r\n      @closeSilentboxOverlay=\"hideOverlay\"\r\n      @requestNextSilentBoxItem=\"showNextItem\"\r\n      @requestPreviousSilentBoxItem=\"showPreviousItem\"\r\n    />\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport overlay from './overlay.vue'\r\nimport itemMixin from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'silentboxGallery',\r\n  mixins: [itemMixin],\r\n  props: {\r\n    gallery: {\r\n      type: Array,\r\n      default: () => {\r\n        return []\r\n      }\r\n    },\r\n    image: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: '200px',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        }\r\n      }\r\n    }\r\n  },\r\n  components: {\r\n    'silentbox-overlay': overlay\r\n  },\r\n  mounted () {\r\n    // Listen to key events.\r\n    window.addEventListener('keyup', (event) => {\r\n      // Escape: 27\r\n      if (event.which === 27) {\r\n        this.hideOverlay()\r\n      }\r\n      // Right arrow: 39\r\n      if (event.which === 39) {\r\n        this.showNextItem()\r\n      }\r\n      // Left arrow: 37\r\n      if (event.which === 37) {\r\n        this.showPreviousItem()\r\n      }\r\n    })\r\n  },\r\n  data () {\r\n    return {\r\n      overlay: {\r\n        item: {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: '200px',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        },\r\n        visible: false,\r\n        currentItem: 0\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    totalItems () {\r\n      return this.gallery.length || 1\r\n    },\r\n    galleryItems () {\r\n      if (this.gallery.length > 0) {\r\n        return this.gallery.map(item => {\r\n          return {\r\n            ...this.overlay.item,\r\n            ...item,\r\n            thumbnail: this.setThumbnail(item),\r\n            autoplay: this.setAutoplay(item)\r\n          }\r\n        })\r\n      } else {\r\n        return [{\r\n          ...this.overlay.item,\r\n          ...this.image,\r\n          thumbnail: this.setThumbnail(this.image)\r\n        }]\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    openOverlay (image, index) {\r\n      this.overlay.visible = true\r\n      this.overlay.item = image\r\n      this.overlay.currentItem = index\r\n      this.$emit('silentbox-overlay-opened')\r\n    },\r\n    hideOverlay () {\r\n      this.overlay.visible = false\r\n      this.$emit('silentbox-overlay-hidden')\r\n    },\r\n    showNextItem () {\r\n      let newItemIndex = this.overlay.currentItem + 1\r\n      newItemIndex = newItemIndex <= this.galleryItems.length - 1\r\n        ? newItemIndex : 0\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-next-item-displayed')\r\n    },\r\n    showPreviousItem () {\r\n      let newItemIndex = this.overlay.currentItem - 1\r\n      newItemIndex = newItemIndex > -1\r\n        ? newItemIndex : this.galleryItems.length - 1\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-previous-item-displayed')\r\n    },\r\n    setAutoplay (item) {\r\n      return item.autoplay ? 'autoplay' : ''\r\n    },\r\n    setThumbnail (item) {\r\n      if (this.isEmbedVideo(item.src) && item.thumbnail === undefined) {\r\n        return this.getThumbnail(item.src)\r\n      }\r\n\r\n      return item.thumbnail || item.src\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .silentbox-item {\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      text-decoration: underline;\r\n  }\r\n</style>\r\n",".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */"]}, media: undefined });
+    inject("data-v-7f05ba59_0", { source: ".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/gallery.vue","gallery.vue"],"names":[],"mappings":"AAuKA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;ACtKA;;AAEA,sCAAsC","file":"gallery.vue","sourcesContent":["<template>\r\n  <section id=\"silentbox-gallery\">\r\n    <slot />\r\n    <div\r\n      v-for=\"(image, index) in galleryItems\"\r\n      :key=\"image.src\"\r\n      @click=\"openOverlay(image, index)\"\r\n      class=\"silentbox-item\"\r\n    >\r\n      <slot\r\n          name=\"silentbox-item\"\r\n          v-bind:silentboxItem=\"image\"\r\n      >\r\n        <img\r\n          :src=\"image.thumbnail\"\r\n          :alt=\"image.alt\"\r\n          :width=\"image.thumbnailWidth\"\r\n          :height=\"image.thumbnailHeight\"\r\n        >\r\n      </slot>\r\n    </div>\r\n    <silentbox-overlay\r\n      :overlay-item=\"overlay.item\"\r\n      :visible=\"overlay.visible\"\r\n      :total-items=\"totalItems\"\r\n      @closeSilentboxOverlay=\"hideOverlay\"\r\n      @requestNextSilentBoxItem=\"showNextItem\"\r\n      @requestPreviousSilentBoxItem=\"showPreviousItem\"\r\n    />\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport overlay from './overlay.vue'\r\nimport itemMixin from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'silentboxGallery',\r\n  mixins: [itemMixin],\r\n  props: {\r\n    gallery: {\r\n      type: Array,\r\n      default: () => {\r\n        return []\r\n      }\r\n    },\r\n    image: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: 'auto',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        }\r\n      }\r\n    }\r\n  },\r\n  components: {\r\n    'silentbox-overlay': overlay\r\n  },\r\n  mounted () {\r\n    // Listen to key events.\r\n    window.addEventListener('keyup', (event) => {\r\n      // Escape: 27\r\n      if (event.which === 27) {\r\n        this.hideOverlay()\r\n      }\r\n      // Right arrow: 39\r\n      if (event.which === 39) {\r\n        this.showNextItem()\r\n      }\r\n      // Left arrow: 37\r\n      if (event.which === 37) {\r\n        this.showPreviousItem()\r\n      }\r\n    })\r\n  },\r\n  data () {\r\n    return {\r\n      overlay: {\r\n        item: {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: 'auto',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        },\r\n        visible: false,\r\n        currentItem: 0\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    totalItems () {\r\n      return this.gallery.length || 1\r\n    },\r\n    galleryItems () {\r\n      if (this.gallery.length > 0) {\r\n        return this.gallery.map(item => {\r\n          return {\r\n            ...this.overlay.item,\r\n            ...item,\r\n            thumbnail: this.setThumbnail(item),\r\n            autoplay: this.setAutoplay(item)\r\n          }\r\n        })\r\n      } else {\r\n        return [{\r\n          ...this.overlay.item,\r\n          ...this.image,\r\n          thumbnail: this.setThumbnail(this.image)\r\n        }]\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    openOverlay (image, index) {\r\n      this.overlay.visible = true\r\n      this.overlay.item = image\r\n      this.overlay.currentItem = index\r\n      this.$emit('silentbox-overlay-opened')\r\n    },\r\n    hideOverlay () {\r\n      this.overlay.visible = false\r\n      this.$emit('silentbox-overlay-hidden')\r\n    },\r\n    showNextItem () {\r\n      let newItemIndex = this.overlay.currentItem + 1\r\n      newItemIndex = newItemIndex <= this.galleryItems.length - 1\r\n        ? newItemIndex : 0\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-next-item-displayed')\r\n    },\r\n    showPreviousItem () {\r\n      let newItemIndex = this.overlay.currentItem - 1\r\n      newItemIndex = newItemIndex > -1\r\n        ? newItemIndex : this.galleryItems.length - 1\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-previous-item-displayed')\r\n    },\r\n    setAutoplay (item) {\r\n      return item.autoplay ? 'autoplay' : ''\r\n    },\r\n    setThumbnail (item) {\r\n      if (this.isEmbedVideo(item.src) && item.thumbnail === undefined) {\r\n        return this.getThumbnail(item.src)\r\n      }\r\n\r\n      return item.thumbnail || item.src\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .silentbox-item {\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      text-decoration: underline;\r\n  }\r\n</style>\r\n",".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
diff --git a/dist/vue-silentbox.min.js b/dist/vue-silentbox.min.js
index d3ee162..70ade98 100644
--- a/dist/vue-silentbox.min.js
+++ b/dist/vue-silentbox.min.js
@@ -517,7 +517,7 @@ var VueSilentbox = (function (exports) {
           return {
             src: '',
             alt: '',
-            thumbnailWidth: '200px',
+            thumbnailWidth: 'auto',
             thumbnailHeight: 'auto',
             thumbnail: '',
             autoplay: false,
@@ -557,7 +557,7 @@ var VueSilentbox = (function (exports) {
           item: {
             src: '',
             alt: '',
-            thumbnailWidth: '200px',
+            thumbnailWidth: 'auto',
             thumbnailHeight: 'auto',
             thumbnail: '',
             autoplay: false,
@@ -664,15 +664,22 @@ var VueSilentbox = (function (exports) {
               }
             },
             [
-              _c("img", {
-                attrs: {
-                  src: image.thumbnail,
-                  alt: image.alt,
-                  width: image.thumbnailWidth,
-                  height: image.thumbnailHeight
-                }
-              })
-            ]
+              _vm._t(
+                "silentbox-item",
+                [
+                  _c("img", {
+                    attrs: {
+                      src: image.thumbnail,
+                      alt: image.alt,
+                      width: image.thumbnailWidth,
+                      height: image.thumbnailHeight
+                    }
+                  })
+                ],
+                { silentboxItem: image }
+              )
+            ],
+            2
           )
         }),
         _vm._v(" "),
@@ -680,7 +687,7 @@ var VueSilentbox = (function (exports) {
           attrs: {
             "overlay-item": _vm.overlay.item,
             visible: _vm.overlay.visible,
-            "total-items": _vm.overlay.totalItems
+            "total-items": _vm.totalItems
           },
           on: {
             closeSilentboxOverlay: _vm.hideOverlay,
@@ -698,7 +705,7 @@ var VueSilentbox = (function (exports) {
     /* style */
     const __vue_inject_styles__$1 = function (inject) {
       if (!inject) return
-      inject("data-v-422c39d4_0", { source: ".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/gallery.vue","gallery.vue"],"names":[],"mappings":"AAkKA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;ACjKA;;AAEA,sCAAsC","file":"gallery.vue","sourcesContent":["<template>\r\n  <section id=\"silentbox-gallery\">\r\n    <slot />\r\n    <div\r\n      v-for=\"(image, index) in galleryItems\"\r\n      :key=\"image.src\"\r\n      @click=\"openOverlay(image, index)\"\r\n      class=\"silentbox-item\"\r\n    >\r\n      <img\r\n        :src=\"image.thumbnail\"\r\n        :alt=\"image.alt\"\r\n        :width=\"image.thumbnailWidth\"\r\n        :height=\"image.thumbnailHeight\"\r\n      >\r\n    </div>\r\n    <silentbox-overlay\r\n      :overlay-item=\"overlay.item\"\r\n      :visible=\"overlay.visible\"\r\n      :total-items=\"overlay.totalItems\"\r\n      @closeSilentboxOverlay=\"hideOverlay\"\r\n      @requestNextSilentBoxItem=\"showNextItem\"\r\n      @requestPreviousSilentBoxItem=\"showPreviousItem\"\r\n    />\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport overlay from './overlay.vue'\r\nimport itemMixin from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'silentboxGallery',\r\n  mixins: [itemMixin],\r\n  props: {\r\n    gallery: {\r\n      type: Array,\r\n      default: () => {\r\n        return []\r\n      }\r\n    },\r\n    image: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: '200px',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        }\r\n      }\r\n    }\r\n  },\r\n  components: {\r\n    'silentbox-overlay': overlay\r\n  },\r\n  mounted () {\r\n    // Listen to key events.\r\n    window.addEventListener('keyup', (event) => {\r\n      // Escape: 27\r\n      if (event.which === 27) {\r\n        this.hideOverlay()\r\n      }\r\n      // Right arrow: 39\r\n      if (event.which === 39) {\r\n        this.showNextItem()\r\n      }\r\n      // Left arrow: 37\r\n      if (event.which === 37) {\r\n        this.showPreviousItem()\r\n      }\r\n    })\r\n  },\r\n  data () {\r\n    return {\r\n      overlay: {\r\n        item: {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: '200px',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        },\r\n        visible: false,\r\n        currentItem: 0\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    totalItems () {\r\n      return this.gallery.length || 1\r\n    },\r\n    galleryItems () {\r\n      if (this.gallery.length > 0) {\r\n        return this.gallery.map(item => {\r\n          return {\r\n            ...this.overlay.item,\r\n            ...item,\r\n            thumbnail: this.setThumbnail(item),\r\n            autoplay: this.setAutoplay(item)\r\n          }\r\n        })\r\n      } else {\r\n        return [{\r\n          ...this.overlay.item,\r\n          ...this.image,\r\n          thumbnail: this.setThumbnail(this.image)\r\n        }]\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    openOverlay (image, index) {\r\n      this.overlay.visible = true\r\n      this.overlay.item = image\r\n      this.overlay.currentItem = index\r\n      this.$emit('silentbox-overlay-opened')\r\n    },\r\n    hideOverlay () {\r\n      this.overlay.visible = false\r\n      this.$emit('silentbox-overlay-hidden')\r\n    },\r\n    showNextItem () {\r\n      let newItemIndex = this.overlay.currentItem + 1\r\n      newItemIndex = newItemIndex <= this.galleryItems.length - 1\r\n        ? newItemIndex : 0\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-next-item-displayed')\r\n    },\r\n    showPreviousItem () {\r\n      let newItemIndex = this.overlay.currentItem - 1\r\n      newItemIndex = newItemIndex > -1\r\n        ? newItemIndex : this.galleryItems.length - 1\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-previous-item-displayed')\r\n    },\r\n    setAutoplay (item) {\r\n      return item.autoplay ? 'autoplay' : ''\r\n    },\r\n    setThumbnail (item) {\r\n      if (this.isEmbedVideo(item.src) && item.thumbnail === undefined) {\r\n        return this.getThumbnail(item.src)\r\n      }\r\n\r\n      return item.thumbnail || item.src\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .silentbox-item {\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      text-decoration: underline;\r\n  }\r\n</style>\r\n",".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */"]}, media: undefined });
+      inject("data-v-7f05ba59_0", { source: ".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/gallery.vue","gallery.vue"],"names":[],"mappings":"AAuKA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;ACtKA;;AAEA,sCAAsC","file":"gallery.vue","sourcesContent":["<template>\r\n  <section id=\"silentbox-gallery\">\r\n    <slot />\r\n    <div\r\n      v-for=\"(image, index) in galleryItems\"\r\n      :key=\"image.src\"\r\n      @click=\"openOverlay(image, index)\"\r\n      class=\"silentbox-item\"\r\n    >\r\n      <slot\r\n          name=\"silentbox-item\"\r\n          v-bind:silentboxItem=\"image\"\r\n      >\r\n        <img\r\n          :src=\"image.thumbnail\"\r\n          :alt=\"image.alt\"\r\n          :width=\"image.thumbnailWidth\"\r\n          :height=\"image.thumbnailHeight\"\r\n        >\r\n      </slot>\r\n    </div>\r\n    <silentbox-overlay\r\n      :overlay-item=\"overlay.item\"\r\n      :visible=\"overlay.visible\"\r\n      :total-items=\"totalItems\"\r\n      @closeSilentboxOverlay=\"hideOverlay\"\r\n      @requestNextSilentBoxItem=\"showNextItem\"\r\n      @requestPreviousSilentBoxItem=\"showPreviousItem\"\r\n    />\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport overlay from './overlay.vue'\r\nimport itemMixin from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'silentboxGallery',\r\n  mixins: [itemMixin],\r\n  props: {\r\n    gallery: {\r\n      type: Array,\r\n      default: () => {\r\n        return []\r\n      }\r\n    },\r\n    image: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: 'auto',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        }\r\n      }\r\n    }\r\n  },\r\n  components: {\r\n    'silentbox-overlay': overlay\r\n  },\r\n  mounted () {\r\n    // Listen to key events.\r\n    window.addEventListener('keyup', (event) => {\r\n      // Escape: 27\r\n      if (event.which === 27) {\r\n        this.hideOverlay()\r\n      }\r\n      // Right arrow: 39\r\n      if (event.which === 39) {\r\n        this.showNextItem()\r\n      }\r\n      // Left arrow: 37\r\n      if (event.which === 37) {\r\n        this.showPreviousItem()\r\n      }\r\n    })\r\n  },\r\n  data () {\r\n    return {\r\n      overlay: {\r\n        item: {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: 'auto',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        },\r\n        visible: false,\r\n        currentItem: 0\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    totalItems () {\r\n      return this.gallery.length || 1\r\n    },\r\n    galleryItems () {\r\n      if (this.gallery.length > 0) {\r\n        return this.gallery.map(item => {\r\n          return {\r\n            ...this.overlay.item,\r\n            ...item,\r\n            thumbnail: this.setThumbnail(item),\r\n            autoplay: this.setAutoplay(item)\r\n          }\r\n        })\r\n      } else {\r\n        return [{\r\n          ...this.overlay.item,\r\n          ...this.image,\r\n          thumbnail: this.setThumbnail(this.image)\r\n        }]\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    openOverlay (image, index) {\r\n      this.overlay.visible = true\r\n      this.overlay.item = image\r\n      this.overlay.currentItem = index\r\n      this.$emit('silentbox-overlay-opened')\r\n    },\r\n    hideOverlay () {\r\n      this.overlay.visible = false\r\n      this.$emit('silentbox-overlay-hidden')\r\n    },\r\n    showNextItem () {\r\n      let newItemIndex = this.overlay.currentItem + 1\r\n      newItemIndex = newItemIndex <= this.galleryItems.length - 1\r\n        ? newItemIndex : 0\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-next-item-displayed')\r\n    },\r\n    showPreviousItem () {\r\n      let newItemIndex = this.overlay.currentItem - 1\r\n      newItemIndex = newItemIndex > -1\r\n        ? newItemIndex : this.galleryItems.length - 1\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-previous-item-displayed')\r\n    },\r\n    setAutoplay (item) {\r\n      return item.autoplay ? 'autoplay' : ''\r\n    },\r\n    setThumbnail (item) {\r\n      if (this.isEmbedVideo(item.src) && item.thumbnail === undefined) {\r\n        return this.getThumbnail(item.src)\r\n      }\r\n\r\n      return item.thumbnail || item.src\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .silentbox-item {\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      text-decoration: underline;\r\n  }\r\n</style>\r\n",".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
diff --git a/dist/vue-silentbox.umd.js b/dist/vue-silentbox.umd.js
index 346e755..4f818f7 100644
--- a/dist/vue-silentbox.umd.js
+++ b/dist/vue-silentbox.umd.js
@@ -520,7 +520,7 @@
           return {
             src: '',
             alt: '',
-            thumbnailWidth: '200px',
+            thumbnailWidth: 'auto',
             thumbnailHeight: 'auto',
             thumbnail: '',
             autoplay: false,
@@ -560,7 +560,7 @@
           item: {
             src: '',
             alt: '',
-            thumbnailWidth: '200px',
+            thumbnailWidth: 'auto',
             thumbnailHeight: 'auto',
             thumbnail: '',
             autoplay: false,
@@ -667,15 +667,22 @@
               }
             },
             [
-              _c("img", {
-                attrs: {
-                  src: image.thumbnail,
-                  alt: image.alt,
-                  width: image.thumbnailWidth,
-                  height: image.thumbnailHeight
-                }
-              })
-            ]
+              _vm._t(
+                "silentbox-item",
+                [
+                  _c("img", {
+                    attrs: {
+                      src: image.thumbnail,
+                      alt: image.alt,
+                      width: image.thumbnailWidth,
+                      height: image.thumbnailHeight
+                    }
+                  })
+                ],
+                { silentboxItem: image }
+              )
+            ],
+            2
           )
         }),
         _vm._v(" "),
@@ -683,7 +690,7 @@
           attrs: {
             "overlay-item": _vm.overlay.item,
             visible: _vm.overlay.visible,
-            "total-items": _vm.overlay.totalItems
+            "total-items": _vm.totalItems
           },
           on: {
             closeSilentboxOverlay: _vm.hideOverlay,
@@ -701,7 +708,7 @@
     /* style */
     const __vue_inject_styles__$1 = function (inject) {
       if (!inject) return
-      inject("data-v-422c39d4_0", { source: ".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/gallery.vue","gallery.vue"],"names":[],"mappings":"AAkKA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;ACjKA;;AAEA,sCAAsC","file":"gallery.vue","sourcesContent":["<template>\r\n  <section id=\"silentbox-gallery\">\r\n    <slot />\r\n    <div\r\n      v-for=\"(image, index) in galleryItems\"\r\n      :key=\"image.src\"\r\n      @click=\"openOverlay(image, index)\"\r\n      class=\"silentbox-item\"\r\n    >\r\n      <img\r\n        :src=\"image.thumbnail\"\r\n        :alt=\"image.alt\"\r\n        :width=\"image.thumbnailWidth\"\r\n        :height=\"image.thumbnailHeight\"\r\n      >\r\n    </div>\r\n    <silentbox-overlay\r\n      :overlay-item=\"overlay.item\"\r\n      :visible=\"overlay.visible\"\r\n      :total-items=\"overlay.totalItems\"\r\n      @closeSilentboxOverlay=\"hideOverlay\"\r\n      @requestNextSilentBoxItem=\"showNextItem\"\r\n      @requestPreviousSilentBoxItem=\"showPreviousItem\"\r\n    />\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport overlay from './overlay.vue'\r\nimport itemMixin from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'silentboxGallery',\r\n  mixins: [itemMixin],\r\n  props: {\r\n    gallery: {\r\n      type: Array,\r\n      default: () => {\r\n        return []\r\n      }\r\n    },\r\n    image: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: '200px',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        }\r\n      }\r\n    }\r\n  },\r\n  components: {\r\n    'silentbox-overlay': overlay\r\n  },\r\n  mounted () {\r\n    // Listen to key events.\r\n    window.addEventListener('keyup', (event) => {\r\n      // Escape: 27\r\n      if (event.which === 27) {\r\n        this.hideOverlay()\r\n      }\r\n      // Right arrow: 39\r\n      if (event.which === 39) {\r\n        this.showNextItem()\r\n      }\r\n      // Left arrow: 37\r\n      if (event.which === 37) {\r\n        this.showPreviousItem()\r\n      }\r\n    })\r\n  },\r\n  data () {\r\n    return {\r\n      overlay: {\r\n        item: {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: '200px',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        },\r\n        visible: false,\r\n        currentItem: 0\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    totalItems () {\r\n      return this.gallery.length || 1\r\n    },\r\n    galleryItems () {\r\n      if (this.gallery.length > 0) {\r\n        return this.gallery.map(item => {\r\n          return {\r\n            ...this.overlay.item,\r\n            ...item,\r\n            thumbnail: this.setThumbnail(item),\r\n            autoplay: this.setAutoplay(item)\r\n          }\r\n        })\r\n      } else {\r\n        return [{\r\n          ...this.overlay.item,\r\n          ...this.image,\r\n          thumbnail: this.setThumbnail(this.image)\r\n        }]\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    openOverlay (image, index) {\r\n      this.overlay.visible = true\r\n      this.overlay.item = image\r\n      this.overlay.currentItem = index\r\n      this.$emit('silentbox-overlay-opened')\r\n    },\r\n    hideOverlay () {\r\n      this.overlay.visible = false\r\n      this.$emit('silentbox-overlay-hidden')\r\n    },\r\n    showNextItem () {\r\n      let newItemIndex = this.overlay.currentItem + 1\r\n      newItemIndex = newItemIndex <= this.galleryItems.length - 1\r\n        ? newItemIndex : 0\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-next-item-displayed')\r\n    },\r\n    showPreviousItem () {\r\n      let newItemIndex = this.overlay.currentItem - 1\r\n      newItemIndex = newItemIndex > -1\r\n        ? newItemIndex : this.galleryItems.length - 1\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-previous-item-displayed')\r\n    },\r\n    setAutoplay (item) {\r\n      return item.autoplay ? 'autoplay' : ''\r\n    },\r\n    setThumbnail (item) {\r\n      if (this.isEmbedVideo(item.src) && item.thumbnail === undefined) {\r\n        return this.getThumbnail(item.src)\r\n      }\r\n\r\n      return item.thumbnail || item.src\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .silentbox-item {\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      text-decoration: underline;\r\n  }\r\n</style>\r\n",".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */"]}, media: undefined });
+      inject("data-v-7f05ba59_0", { source: ".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */", map: {"version":3,"sources":["/Users/silencesys/Projects/Silencesys/silentbox-website/src/Silentbox/src/components/gallery.vue","gallery.vue"],"names":[],"mappings":"AAuKA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;ACtKA;;AAEA,sCAAsC","file":"gallery.vue","sourcesContent":["<template>\r\n  <section id=\"silentbox-gallery\">\r\n    <slot />\r\n    <div\r\n      v-for=\"(image, index) in galleryItems\"\r\n      :key=\"image.src\"\r\n      @click=\"openOverlay(image, index)\"\r\n      class=\"silentbox-item\"\r\n    >\r\n      <slot\r\n          name=\"silentbox-item\"\r\n          v-bind:silentboxItem=\"image\"\r\n      >\r\n        <img\r\n          :src=\"image.thumbnail\"\r\n          :alt=\"image.alt\"\r\n          :width=\"image.thumbnailWidth\"\r\n          :height=\"image.thumbnailHeight\"\r\n        >\r\n      </slot>\r\n    </div>\r\n    <silentbox-overlay\r\n      :overlay-item=\"overlay.item\"\r\n      :visible=\"overlay.visible\"\r\n      :total-items=\"totalItems\"\r\n      @closeSilentboxOverlay=\"hideOverlay\"\r\n      @requestNextSilentBoxItem=\"showNextItem\"\r\n      @requestPreviousSilentBoxItem=\"showPreviousItem\"\r\n    />\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport overlay from './overlay.vue'\r\nimport itemMixin from './../mixins/item'\r\n\r\nexport default {\r\n  name: 'silentboxGallery',\r\n  mixins: [itemMixin],\r\n  props: {\r\n    gallery: {\r\n      type: Array,\r\n      default: () => {\r\n        return []\r\n      }\r\n    },\r\n    image: {\r\n      type: Object,\r\n      default: () => {\r\n        return {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: 'auto',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        }\r\n      }\r\n    }\r\n  },\r\n  components: {\r\n    'silentbox-overlay': overlay\r\n  },\r\n  mounted () {\r\n    // Listen to key events.\r\n    window.addEventListener('keyup', (event) => {\r\n      // Escape: 27\r\n      if (event.which === 27) {\r\n        this.hideOverlay()\r\n      }\r\n      // Right arrow: 39\r\n      if (event.which === 39) {\r\n        this.showNextItem()\r\n      }\r\n      // Left arrow: 37\r\n      if (event.which === 37) {\r\n        this.showPreviousItem()\r\n      }\r\n    })\r\n  },\r\n  data () {\r\n    return {\r\n      overlay: {\r\n        item: {\r\n          src: '',\r\n          alt: '',\r\n          thumbnailWidth: 'auto',\r\n          thumbnailHeight: 'auto',\r\n          thumbnail: '',\r\n          autoplay: false,\r\n          controls: true,\r\n          description: ''\r\n        },\r\n        visible: false,\r\n        currentItem: 0\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    totalItems () {\r\n      return this.gallery.length || 1\r\n    },\r\n    galleryItems () {\r\n      if (this.gallery.length > 0) {\r\n        return this.gallery.map(item => {\r\n          return {\r\n            ...this.overlay.item,\r\n            ...item,\r\n            thumbnail: this.setThumbnail(item),\r\n            autoplay: this.setAutoplay(item)\r\n          }\r\n        })\r\n      } else {\r\n        return [{\r\n          ...this.overlay.item,\r\n          ...this.image,\r\n          thumbnail: this.setThumbnail(this.image)\r\n        }]\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    openOverlay (image, index) {\r\n      this.overlay.visible = true\r\n      this.overlay.item = image\r\n      this.overlay.currentItem = index\r\n      this.$emit('silentbox-overlay-opened')\r\n    },\r\n    hideOverlay () {\r\n      this.overlay.visible = false\r\n      this.$emit('silentbox-overlay-hidden')\r\n    },\r\n    showNextItem () {\r\n      let newItemIndex = this.overlay.currentItem + 1\r\n      newItemIndex = newItemIndex <= this.galleryItems.length - 1\r\n        ? newItemIndex : 0\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-next-item-displayed')\r\n    },\r\n    showPreviousItem () {\r\n      let newItemIndex = this.overlay.currentItem - 1\r\n      newItemIndex = newItemIndex > -1\r\n        ? newItemIndex : this.galleryItems.length - 1\r\n\r\n      this.overlay.item = this.galleryItems[newItemIndex]\r\n      this.overlay.currentItem = newItemIndex\r\n      this.$emit('silentbox-overlay-previous-item-displayed')\r\n    },\r\n    setAutoplay (item) {\r\n      return item.autoplay ? 'autoplay' : ''\r\n    },\r\n    setThumbnail (item) {\r\n      if (this.isEmbedVideo(item.src) && item.thumbnail === undefined) {\r\n        return this.getThumbnail(item.src)\r\n      }\r\n\r\n      return item.thumbnail || item.src\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .silentbox-item {\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      text-decoration: underline;\r\n  }\r\n</style>\r\n",".silentbox-item {\n  cursor: pointer;\n  display: inline-block;\n  text-decoration: underline;\n}\n\n/*# sourceMappingURL=gallery.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
diff --git a/tests/components/gallery.test.js b/tests/components/gallery.test.js
index 4cde3b7..f4eacd9 100644
--- a/tests/components/gallery.test.js
+++ b/tests/components/gallery.test.js
@@ -17,7 +17,7 @@ describe('components/Gallery.vue', () => {
           src: 'image.jpg',
           thumbnail: 'image.jpg',
           thumbnailHeight: 'auto',
-          thumbnailWidth: '200px',
+          thumbnailWidth: 'auto',
           description: 'This is my amazing image!'
         }
       ]
@@ -43,7 +43,7 @@ describe('components/Gallery.vue', () => {
           src: 'image.jpg',
           thumbnail: 'image.jpg',
           thumbnailHeight: 'auto',
-          thumbnailWidth: '200px',
+          thumbnailWidth: 'auto',
           description: 'This is my amazing image!'
         }, {
           alt: '',
@@ -52,7 +52,7 @@ describe('components/Gallery.vue', () => {
           src: 'image2.jpg',
           thumbnail: 'image2-thumb.jpg',
           thumbnailHeight: 'auto',
-          thumbnailWidth: '200px',
+          thumbnailWidth: 'auto',
           description: ''
         }
       ]
@@ -90,7 +90,7 @@ describe('components/Gallery.vue', () => {
         src: 'image.jpg',
         thumbnail: 'image.jpg',
         thumbnailHeight: 'auto',
-        thumbnailWidth: '200px',
+        thumbnailWidth: 'auto',
         description: 'This is my amazing image!'
       }
 
@@ -108,7 +108,7 @@ describe('components/Gallery.vue', () => {
         src: 'image.jpg',
         thumbnail: 'image.jpg',
         thumbnailHeight: 'auto',
-        thumbnailWidth: '200px',
+        thumbnailWidth: 'auto',
         description: 'This is my amazing image!'
       }
 
@@ -128,7 +128,7 @@ describe('components/Gallery.vue', () => {
         src: 'image.jpg',
         thumbnail: 'image.jpg',
         thumbnailHeight: 'auto',
-        thumbnailWidth: '200px',
+        thumbnailWidth: 'auto',
         description: 'This is my amazing image!'
       }
 
@@ -146,7 +146,7 @@ describe('components/Gallery.vue', () => {
         src: 'image.jpg',
         thumbnail: 'image.jpg',
         thumbnailHeight: 'auto',
-        thumbnailWidth: '200px',
+        thumbnailWidth: 'auto',
         description: 'This is my amazing image!'
       }