l

photo/src/ImageList.js

@@ -76,7 +76,7 @@ const useStyles = makeStyles((theme) => ({
         },
     },
 }));
-var Imagesrc = "";
+var Imagesrc = 0;
 var FabL = false;
 var FabR = false;
 
@@ -88,7 +88,7 @@ export default function TitlebarGridList() {
     const TDLength = tileData.length;
 
     const handleClick = (index) => () => {
-        Imagesrc = tileData[index].img;
+        Imagesrc = index;
         if (index == 0) {
             FabL = false;
         } else {
@@ -103,6 +103,18 @@ export default function TitlebarGridList() {
         setImageOpen(true);
     }
 
+    const moveFw = () => {
+        Imagesrc++;
+        setImageOpen(false);
+        setImageOpen(true);
+    }
+
+    const moveBw = () => {
+        Imagesrc--;
+        setImageOpen(false);
+        setImageOpen(true);
+    }
+
     const handleImageClose = () => {
         setImageOpen(false);
     };
@@ -154,7 +166,7 @@ export default function TitlebarGridList() {
                                     style={{ minHeight: '100vh' }}
                                 >
                                     <Grid item xs={12}>
-                                        <img src={ Imagesrc }
+                                        <img src={ tileData[Imagesrc].img }
                                             style={{
                                                 margin: "auto",
                                                 maxHeight: "100vh",
@@ -165,12 +177,12 @@ export default function TitlebarGridList() {
                                     </Grid>
 
                                 </Grid>
-                                {FabL === true ? <Fab color="inherit" aria-label="add" className={classes.fabL}>
+                                {FabL === true ? <Fab color="inherit" aria-label="add" onClick={moveBw} className={classes.fabL}>
                                     <ArrowBackIosIcon />
                                 </Fab> : ""}
                                 {console.log(FabL + " " + FabR)}
                                 
-                                {FabR === true ? <Fab color="inherit" aria-label="add" className={classes.fabR}>
+                                {FabR === true ? <Fab color="inherit" aria-label="add" onClick={moveFw} className={classes.fabR}>
                                     <ArrowForwardIosIcon />
                                 </Fab> : ""}
                             </Grid>