Merge pull request #67 from mis94/orientation-change

Added a capability to rotate Thumbnail images  according to exif orientation property.

README.md

@@ -70,6 +70,7 @@ caption                 | string        | undefined     | Optional. Image captio
 srcSet 	                | array         | undefined 	| Optional. Array of srcSets for lightbox.
 customOverlay           | element       | undefined     | Optional. A custom element to be rendered as a thumbnail overlay on hover.
 thumbnailCaption        | string|element | undefined     | Optional. A thumbnail caption shown below thumbnail.
+orientation          | number        | undefined     | Optional. Orientation of the image. Many newer digital cameras (both dSLR and Point & Shoot digicams) have a built-in orientation sensor. The output of this sensor is used to set the EXIF orientation flag in the image file's metatdata to reflect the positioning of the camera with respect to the ground.
 
 ## Gallery Options
 

examples/different-orientations-example.js

@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Gallery from '../src/Gallery';
+
+
+class DifferentOrientationsExample extends React.Component {
+    constructor(props){
+        super(props);
+
+        this.state = {
+            images: this.props.images
+        };
+
+    }
+
+    render () {
+        return (
+                <div style={{
+                    display: "block",
+                    minHeight: "1px",
+                    width: "100%",
+                    border: "1px solid #ddd",
+                    overflow: "auto"}}>
+                <Gallery
+            images={this.state.images}
+                />
+                </div>
+        );
+    }
+}
+
+DifferentOrientationsExample.propTypes = {
+    images: PropTypes.arrayOf(
+        PropTypes.shape({
+            src: PropTypes.string.isRequired,
+            thumbnail: PropTypes.string.isRequired,
+            thumbnailWidth: PropTypes.number.isRequired,
+            thumbnailHeight: PropTypes.number.isRequired,
+            orientation: PropTypes.number
+        })
+    ).isRequired
+};
+
+DifferentOrientationsExample.defaultProps = {
+    images: shuffleArray([
+        {
+            src: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_b.jpg",
+            thumbnail: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_n.jpg",
+            thumbnailWidth: 240,
+            thumbnailHeight: 320,
+            orientation: 1 /* the orientation of the image can be extracted from exif orientation property 
+            'exif.Orientation'. This can be done using libraries like 'lodash', lodash has a method '_get'
+            that can be used as follows: 
+            orientation = _get(imageObject, 'exif.Orientation', 1);
+            */
+        },
+        {
+            src: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_b.jpg",
+            thumbnail: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_n.jpg",
+            thumbnailWidth: 320,
+            thumbnailHeight: 190,
+            orientation: 6
+        },
+        {
+            src: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_b.jpg",
+            thumbnail: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_n.jpg",
+            thumbnailWidth: 320,
+            thumbnailHeight: 148,
+            orientation: 3
+        },
+        {
+            src: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_b.jpg",
+            thumbnail: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_n.jpg",
+            thumbnailWidth: 320,
+            thumbnailHeight: 213,
+            orientation: 8
+        },
+        {
+            src: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_b.jpg",
+            thumbnail: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_n.jpg",
+            thumbnailWidth: 248,
+            thumbnailHeight: 320
+        }
+    ])
+};
+
+ReactDOM.render(<DifferentOrientationsExample />, document.getElementById('differentOrientationsExample'));

src/Image.js

@@ -49,6 +49,31 @@ class Image extends Component {
     thumbnailStyle () {
         if (this.props.thumbnailStyle)
             return this.props.thumbnailStyle.call(this);
+
+        var rotationTransformValue = undefined;
+        switch (this.props.item.orientation) {
+            case 3:
+                rotationTransformValue = "rotate(180deg)";
+                break;
+            case 6:
+                rotationTransformValue = "rotate(90deg)";
+                break;
+            case 8:
+                rotationTransformValue = "rotate(270deg)";
+                break;
+            case 2:
+                rotationTransformValue = "rotateY(180deg)";
+                break;
+            case 4:
+                rotationTransformValue = "rotate(180deg) rotateY(180deg)";
+                break;
+            case 5:
+                rotationTransformValue = "rotate(270deg) rotateY(180deg)";
+                break;
+            case 7:
+                rotationTransformValue = "rotate(90deg) rotateY(180deg)";
+                break;
+        }
         if (this.props.item.isSelected){
             var ratio = (this.props.item.scaletwidth / this.props.height);
             var height = 0;
@@ -72,15 +97,17 @@ class Image extends Component {
                 width: width,
                 height: height,
                 marginLeft: marginLeft,
-                marginTop: marginTop
+                marginTop: marginTop,
+                transform: rotationTransformValue
             };
         }
         return {
             cursor: 'pointer',
             width: this.props.item.scaletwidth,
             height: this.props.height,
             marginLeft: this.props.item.marginLeft,
-            marginTop: 0
+            marginTop: 0,
+            transform: rotationTransformValue
         };
     }