Merge pull request #66 from alDuncanson/galleryRedo2

Gallery redo2

src/components/flamelink/FlameLinkCollectionGallery.js

@@ -16,14 +16,28 @@ const styles = theme => ({
     },
 
     flamelinkGallery: {
-        marginRight: "auto",
-        marginLeft: "auto",
+        marginRight: 'auto',
+        marginLeft: 'auto',
+        backgroundImage: 'url(../images/galleryBackgroundImage.png)',
+        overflow: 'hidden',
+        minHeight: 180,
+        minWidth:  300,
+        width:     'auto',
+        height:    'auto',
     },
 
     flamelinkGalleryContainer: {
         backgroundColor: 'black',
         marginTop: 20,
     },
+    flamelinkGalleryInnerContainer: {
+        maxHeight:   1000,
+        minHeight:   180,
+        height:      'auto',
+        width:       'auto',
+        marginRight: 'auto',
+        marginLeft:  'auto',
+    },
 });
 
 class FlameLinkCollectionGallery extends Component {
@@ -51,7 +65,7 @@ class FlameLinkCollectionGallery extends Component {
             schemaDetails: '',
             schemaContent: '',
             schemaDescription: '',
-        }
+        };
 
         flamelinkApp.schemas.getFields(this.props.galleryName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
             .then(result => this.setState({
@@ -111,8 +125,12 @@ class FlameLinkCollectionGallery extends Component {
                     {this.state.schemaDescription}
                 </Typography>
                 <Grid container className={classes.flamelinkGalleryContainer}>
+                    <Grid container className={classes.flamelinkGalleryInnerContainer}>
                         <Grid item lg={8} md={8} sm={12} xs={12} className={classes.flamelinkGallery}>
+                            <div>
                                 <RenderGallery key={Math.random()} />
+                            </div>
+                        </Grid>
                     </Grid>
                 </Grid>
             </Grid>

src/components/flamelink/RenderGallery.js

@@ -9,9 +9,9 @@ class RenderGallery extends Component {
 
         this.state = {
             showThumbnails: false,
-            showIndex: true,
-            showBullets: true,
             mounted: false,
+            autoPlay: true,
+            slideInterval: 6000,
         }
     }
 
@@ -28,9 +28,9 @@ class RenderGallery extends Component {
             <ImageGallery
                 items={global.galleryImages}
                 showThumbnails={this.state.showThumbnails}
-                showIndex={this.state.showIndex}
-                showBullets={this.state.showBullets}
                 onImageLoad={this._onImageLoad}
+                autoPlay={this.state.autoPlay}
+                slideInterval={this.state.slideInterval}
             />
         );
     }