Vue Gallery Orientation

https://github.com/RobinCK/vue-gallery/issues/43

by sam_saama

HTML

<script src="https://unpkg.com/vue@2.4.3/dist/vue.js"></script>
<script src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery-fullscreen.js"></script>
<script src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-helper.js"></script>
<script src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery.js"></script>
<link rel="stylesheet" href="https://unpkg.com/blueimp-gallery@2.27.0/css/blueimp-gallery.min.css">
<script src="https://unpkg.com/vue-gallery"></script>
<div id="app">
  <gallery :options="options" :images="images" :index="index" @close="index = null"></gallery>
  <div class="image" v-for="(image, imageIndex) in images" :key="imageIndex" @click="index = imageIndex" :style="{
        backgroundImage: 'url(' + image + ')',
        width: '300px',
        height: '200px'
      }"></div>
</div>
</div>

CSS

.image {
  float: left;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid #ebebeb;
  margin: 5px 5px 48px 5px;
}

JavaScript

new Vue({
  el: '#app',
  data: function() {
    return {
      images: [
        'https://dumy-imazes.s3-us-west-1.amazonaws.com/upside-down.jpg',
        'https://dummyimage.com/800/ffffff/000000'
      ],
      index: null,
      options: {
        onslide: function(index, slide) {
          //Conditionally change rotation of image based on the image orientation data.
          //Example jsfiddle --> https://jsfiddle.net/orotemo/obvna6qn/1/
          //Or use something like https://github.com/mattiasw/ExifReader
          const rotation = {
            1: 'rotate(0deg)',
            3: 'rotate(180deg)',
            6: 'rotate(90deg)',
            8: 'rotate(270deg)'
          }

          slide.getElementsByTagName(
            'img'
          )[0].style = `transform: ${rotation['3']};`
        }
      }
    }
  },

  components: {
    'gallery': VueGallery
  }
});