Fixing Gallery bug

src/components/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: 300,
+        minWidth:  300,
+        width:     'auto',
+        height:    'auto',
     },
 
     flamelinkGalleryContainer: {
         backgroundColor: 'black',
         marginTop: 20,
     },
+    flamelinkGalleryInnerContainer: {
+        maxHeight:   1000,
+        minHeight:   250,
+        height:      'auto',
+        width:       'auto',
+        marginRight: 'auto',
+        marginLeft:  'auto',
+    },
 });
 
 class FlameLinkCollectionGallery extends Component {
@@ -44,6 +58,10 @@ class FlameLinkCollectionGallery extends Component {
         }
     }
     
+    state = {
+        active: false,
+    }
+
     constructor(props) {
         super(props);
 
@@ -51,7 +69,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({
@@ -74,6 +92,10 @@ class FlameLinkCollectionGallery extends Component {
         this.getPageTitle(this.props.galleryName);
     }
 
+    toggleClass = () => {
+        this.setState(state => ({ active: !state.active }));
+    }
+
     getGalleryInfo(schemaDetails, schemaContent) {
         var key;
         var mediaNums = [];
@@ -111,8 +133,12 @@ class FlameLinkCollectionGallery extends Component {
                     {this.state.schemaDescription}
                 </Typography>
                 <Grid container className={classes.flamelinkGalleryContainer}>
-                    <Grid item lg={8} md={8} sm={12} xs={12} className={classes.flamelinkGallery} >
-                        <RenderGallery key={Math.random()} />
+                    <Grid container className={classes.flamelinkGalleryInnerContainer}>
+                        <Grid item lg={8} md={8} sm={12} xs={12} className={classes.flamelinkGallery} onClick={this.toggleClass}>
+                            <div onClick={this.toggleClass}>
+                                <RenderGallery key={Math.random()} />
+                            </div>
+                        </Grid>
                     </Grid>
                 </Grid>
             </Grid>

src/components/RenderGallery.js

@@ -12,6 +12,7 @@ class RenderGallery extends Component {
             showIndex: true,
             showBullets: true,
             mounted: false,
+            autoPlay: true,
         }
     }
 
@@ -31,6 +32,7 @@ class RenderGallery extends Component {
                 showIndex={this.state.showIndex}
                 showBullets={this.state.showBullets}
                 onImageLoad={this._onImageLoad}
+                autoPlay={this.state.autoPlay}
             />
         );
     }