Add shmui to handle images

js/components/ascribe_media/media_player.js

@@ -29,11 +29,20 @@ let Other = React.createClass({
 });
 
 let Image = React.createClass({
+    mixins: [InjectInHeadMixin],
+
+    componentDidMount() {
+        this.inject('http://code.jquery.com/jquery-2.1.4.min.js')
+            .then(() =>
+                Promise.all([
+                    this.inject('node_modules/shmui/shmui.css'),
+                    this.inject('node_modules/shmui/jquery.shmui.js')
+                ]).then(() => { $('.shmui-ascribe').shmui(); }));
+    },
+
     render() {
         return (
-            <a href={this.props.url} target="_blank" >
-                <img src={this.props.preview} />
-            </a>
+            <img className="shmui-ascribe" src={this.props.preview} data-large-src={this.props.url}/>
         );
     }
 });

js/mixins/inject_in_head_mixin.js

@@ -22,7 +22,7 @@ let InjectInHeadMixin = {
         return document.querySelector(query);
     },
 
-    injectTag(tag, src){
+    injectTag(tag, src, extraAttrs) {
         let promise = new Promise((resolve, reject) => {
             if (InjectInHeadMixin.isPresent(tag, src)) {
                 resolve();
@@ -37,6 +37,9 @@ let InjectInHeadMixin = {
                 }
                 document.head.appendChild(element);
                 element[attr] = src;
+                if (tag == 'link') {
+                    element['rel'] = 'stylesheet';
+                }
             }
         });
 

package.json

@@ -35,10 +35,10 @@
     "object-assign": "^2.0.0",
     "react": "^0.13.2",
     "react-bootstrap": "~0.22.6",
+    "react-datepicker": "~0.8.0",
     "react-router": "^0.13.3",
-    "uglifyjs": "^2.4.10",
-    "react-bootstrap": "~0.22.6",
-    "react-datepicker": "~0.8.0"
+    "shmui": "^0.1.0",
+    "uglifyjs": "^2.4.10"
   },
   "jest": {
     "scriptPreprocessor": "node_modules/babel-jest",