My understanding is that you only want to display information on the right of the image that was last clicked. If this is the case you can simply create your elements that are shown on the right (img and p etc) and change the src for the image and .innerHTML for the text every time a new image is clicked.
Solution 1 :
Solution 2 :
After a day trying to solve this I managed it 5 minutes after posting for help. I used this –
if(document.querySelector(“.block”))document.querySelector(“.block”).classList.remove(“block”);
blocked.classList.add(‘block’);
Problem :
I’m using an API to feed information and images. These images are on display in a grid, when clicked upon a side menu opens and shows the image with the information. The images and information are fed from separate URLs but I’ve got around this issue using the primary_image_id property as id/class as this is the same for both image and information.
At present when I click an image the image and information shows in the side menu as desired but when I click a second image I want the first image to go back to ‘display:none’. I’ve read multiple ways of doing this through click events but since I want this to work on the click of a different element it isn’t working.
My code –
var URL = new Array();
URL[0] = "https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45";
URL[1] = "https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45&offset=45";
URL[2] = "https://www.vam.ac.uk/api/json/museumobject/search?q=a&limit=45&offset=90";
var nRequest = new Array();
for (var i=0; i<3; i++){
(function(i) {
nRequest[i] = new XMLHttpRequest();
nRequest[i].open("GET", URL[i], true);
nRequest[i].onreadystatechange = function (oEvent) {
if (nRequest[i].readyState === 4) {
if (nRequest[i].status === 200) {
var data = JSON.parse(nRequest[i].responseText);
var url = 'http://media.vam.ac.uk/media/thira/collection_images/';
for (let key in data.records) {
let value = data.records[key];
let image = value.fields.primary_image_id;
let res = image.substr(0, 6);
document.querySelector(".image").innerHTML += '<a class="wallImageLink" onclick="openNav();"><img id="' + value.fields.primary_image_id + '" class="wallImage" src="' + url + res + '/' + image + '.jpg"></a>';
document.querySelector(".mypanel").innerHTML += '<div class="' + value.fields.primary_image_id + ' imageInfo"> <img class="navImage" src="' + url + res + '/' + image
+ '.jpg"> <p> <span style="font-weight:bold">Title: </span>' + value.fields.title + '</p>' +
'<p> <span style="font-weight:bold">Artist: </span>' + value.fields.artist + '</p>' +
'<p> <span style="font-weight:bold">Object Type: </span>' + value.fields.object + '</p>' +
'<p> <span style="font-weight:bold">Location: </span>' + value.fields.location + '</p>' +
'<p> <span style="font-weight:bold">Place: </span>' + value.fields.place + '</p>' +
'<br> </div>';
document.querySelector(".image").onclick=function(e){
if(document.querySelector(".active"))document.querySelector(".active").classList.remove("active");
e.target.classList.add("active");
document.querySelectorAll('.wallImage').forEach(function(el){
el.addEventListener('click', function() {
var scanName = this.id;
var blocked = document.getElementsByClassName(scanName)[0];
blocked.classList.add('block');
});
});
}
}
} else {
console.log("Error", nRequest[i].statusText);
}
}
};
nRequest[i].send(null);
})(i);
};
function openNav() {
document.getElementById("mySidenav").style.width = "50%";
document.getElementById("inline-flex").style.display= "inline-flex";
document.getElementById("image").style.width= "50%"
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("image").style.width= "100%"
}body {
overflow-x:hidden;
height: 100%;
}
.image img {
height: 215px;
width: 20%;
object-fit: cover;
opacity: 0.5;
}
.image img:hover, .image img:focus, .image img:active {
opacity: 1;
}
.active{
opacity: 1 !important;
}
.mypanel {
width: 50%;
}
.mypanel div {
display: none;
}
.mypanelShow {
display: block!important;
}
.image {
height: 450px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.imageInfo {
display: none;
}
.sidenav {
height: 450px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: black;
text-decoration: none;
font-weight: bold;
font-size: 4em;
}
.sidenav .closebtn:hover {
color: green;
}
.navImage {
max-height: 400px;
max-width: 400px;
display: block;
margin-left: auto;
margin-right: auto;
}
.block {
display: block!important;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript - read JSON from URL</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="wall.css" media="all" />
<script src="assets/jquery.min.js"></script>
</head>
<body>
<div id="inline-flex">
<div class="image" id="image"></div>
<div id="mySidenav" class="sidenav mypanel">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
</div>
</div>
<div class="mypanel2"></div>
<script src="wall.js"></script>
</body>
</html>