I'm making an art portfolio website where contents of my image gallery are dynamically added with JS (JSON file) because there are a lot of images to be added manually through html tags.
When I click on each thumbnail image, I want it to open another html page that shows the original fullscreen image with some extra info related to that specific image.
It's not logical to make hundreds of unique htmls for each image. So I have a "gallery.html" and I just need one more html called "artwork.html" that its content change based on the image I clicked on in "gallery.html" (just like how artstation works).
What can I do? Is it even supposed to be done like I mentioned above? Should I change my approach? Any advice would be appreciated.
I tried onclick event but it's not possible to manipulate the elements of second html with JS while I click on the image in first html. I know it can be achieved in the same html document using something like a modal but I was wondering how it is done in artstation that opens another html page. I think artstation uses ajax but I'm a beginner and I'm a little lost so I don't exactly know how to properly do it with ajax.
Here is a simplified example of what I did.
First HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>gallety</title>
<style>
img {
width: 200px;
display: block;
margin: 3rem auto;
}
</style>
</head>
<body>
<a href="index2.html" class="img-link">
<img src="image_thumbnail.jpg">
</a>
</body>
</html>Second HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>gallety</title>
</head>
<body>
<div class="img-container">
</div>
</body>
</html>JavaScript:
const imgLink = document.querySelector('.img-link');
const imgContainer = document.querySelector('.img-container');
// approach 1: clicking the link to add content to div in second html (not working)
imgLink.addEventListener('click', function () {
imgContainer.innerHTML = `<div>image information</div><img src="image.jpg">`;
});
// approach 2: trying to open the second html and then adding the content (not working)
imgLink.addEventListener('click', function (e) {
e.preventDefault();
window.open('index2.html',self);
imgContainer.innerHTML = `<div>image information</div><img src="image.jpg">`;
});
Use a Parameterized URL
Have the link go to something like https://mywebsite.com/artwork.html?img=1732
The "?" in a URL ends the file location and starts interpreting as passed variables. So in this case, the file "artwork.html" would load, and could use the variable "img" with the value "1732". Normally this sort of behavior is handled by a server side language like PHP to compile the request on the server before delivering it, but if you don't know any server-side languages, you can use JavaScript to read the parameter like this: