multiple images

index.js

@@ -185,18 +185,24 @@ app.get("/product/:productId", authNoRedirectHandler, (req, res) => {
                 if(err) throw err;
                 let categories = JSON.parse(JSON.stringify(result));
 
-                let dict = {
-                    title: product.productName,
-                    product: product,
-                    shippingDays: 3,
-                    stockAmount: 50,
-                    productDescription: "ez",
-                    loggedIn: true,
-                    reviews: reviews,
-                    categories: categories, 
-                    user: req.user,                   
-                }
-                res.render('product', dict)
+                mysql_handler.con.query(`SELECT url FROM product_images WHERE product_id = ${product.id};`,function(err,result){
+                    if(err) throw err;
+                    let images = JSON.parse(JSON.stringify(result));
+
+                    let dict = {
+                        title: product.productName,
+                        product: product,
+                        shippingDays: 3,
+                        stockAmount: 50,
+                        productDescription: "ez",
+                        loggedIn: true,
+                        reviews: reviews,
+                        categories: categories, 
+                        images: images, 
+                        user: req.user,                   
+                    }
+                    res.render('product', dict)
+                });
             });
         });
         

views/product.ejs

@@ -13,7 +13,9 @@
     <div class="content">
         <section class="product-header">
             <div id="product-image">
-                <img src="/productImage/<%= product.id %>" alt="">
+                <img src="<%=images[0].url %>" alt="" id="productIMG">
+                <button style="left: 0" onclick="swImg(1)"><</button>
+                <button style="right: 0" onclick="swImg(-1)">></button>
             </div>
             <div id="product-info">
                 <h2 style="padding-left: 0px"><%= product.productName %></h2><br>
@@ -98,4 +100,24 @@
     </div> 
     <%- include('partials/footer'); %>
 </body>
-</html>
+</html>
+
+<script type="text/javascript">
+    var curImg = 0;
+    var images = [
+        <% for (var i=1; i < images.length; i++) { var url = images[i].url; %>
+            "<%=images[i].url %>",
+        <% } %>
+    ];
+    function swImg(dir) {
+        curImg = curImg + dir;
+        console.log(curImg)
+        if (curImg > (images.length - 1)) {
+            curImg = 0;
+        } else if (curImg == -1) {
+            curImg = images.length - 1;
+        }
+
+        document.getElementById("productIMG").src = images[curImg];
+    }
+</script>