janis/shop-ejs-expressjs
1
0
Fork 0
mirror of https://github.com/DerTyp7/shop-ejs-expressjs.git synced 2025-10-29 12:32:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

multiple images

Browse Source
This commit is contained in:
Ben PC
2022-03-31 10:50:08 +02:00
parent c798c634af
commit e17109d13e
2 changed files with 42 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
index.js
View File

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

26
views/product.ejs
View File

@@ -13,7 +13,9 @@
<div class="content"> <div class="content">
<section class="product-header"> <section class="product-header">
<div id="product-image"> <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>
<div id="product-info"> <div id="product-info">
<h2 style="padding-left: 0px"><%= product.productName %></h2><br> <h2 style="padding-left: 0px"><%= product.productName %></h2><br>
@@ -98,4 +100,24 @@
</div> </div>
<%- include('partials/footer'); %> <%- include('partials/footer'); %>
</body> </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>