I have a photo gallery in JavaScript, using Nuxt.js. For more information, see this post.
Here is the new code :
// Open PopUp
const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
const imagesFullscreen = document.querySelectorAll(".slide-container img");
for (let i = 0; i < imagesFullscreen.length; i++) {
photo[i].onclick = function() {
photoGalleryFullscreen.style.display = "block";
imagesFullscreen[i].style.display = "block";
slideIndex = i;
}
// Close PopUp
document.querySelector(".out").onclick = function() {
photoGalleryFullscreen.style.display = "none";
imagesFullscreen[i].style.display = "none";
slideIndex = 1;
};
}
In the last part of the new code (//Close PopUp) this is not working (the rest is working), if you can help (thank you very much) :
imagesFullscreen[i].style.display = "none";
On contrary, if I set manually i, it is working for the selected image
I just had to determine which image is clicked and save it in a variable.
Here is the new code that is working :
const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
const imagesFullscreen = document.querySelectorAll(".slide-container img");
for (let i = 0; i < imagesFullscreen.length; i++) {
// Open PopUp
photo[i].onclick = function() {
photoGalleryFullscreen.style.display = "block";
imagesFullscreen[i].style.display = "block";
globalThis.imageClickedNumber = i;
slideIndex = i;
document.body.setAttribute("class", "disable-scroll");
}
// Close PopUp
document.querySelector(".out").onclick = function() {
if (imagesFullscreen[imageClickedNumber].style.display == "block") {
photoGalleryFullscreen.style.display = "none";
imagesFullscreen[imageClickedNumber].style.display = "none";
slideIndex = 1;
document.body.removeAttribute("class");
}
};
}
Related
I am trying to understand why this code isn't going back to slideIndex = 0;
Can someone please explain, at the forth click I am getting undefined instead of jumping back to the first index of the slide?
Thank you for explaining.
slideIndex = 0;
function nextSlide() {
console.log(slides[slideIndex]);
slideIndex++;
if(slideIndex > slides.length){
slideIndex = 0;
}
}
Actually this the whole code, so I am trying to understand why the slideIndex is not jumping back to slideIndex=0;
One the slideIndex > myArray.length; it needs to jump back to the initializes slideIndex, but I am getting this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'style')
at HTMLButtonElement.
Please help:
slideIndex=0;
const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");
let myArray = document.querySelectorAll("img");
let i = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
nextbtn.addEventListener("click", function(){
myArray[slideIndex+1].style.display="block";
slideIndex++;
if(slideIndex >= myArray.length-1){
console.log("yes");
slideIndex=0;
}
});
prevbtn.addEventListener("click", function(){
});
(this answer refers to code supplied by the author within another answer)
the problem is this line: myArray[slideIndex+1].style.display="block";
let's say there are 9 items in myArray and slideIndex is 8. then the above tries to set the style on myArray[9] which does not exist.
you can fix this by either moving the style change to after you've adjusted and validated the slideIndex (in your next two lines), or you can use a modulus adjustment such as this: myArray[(slideIndex+1)%myArray.length].style.display="block";
This is working, but I am not sure if this a good written code, except that I can simplify the code.
let slideIndex=0;
const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");
let myArray = document.querySelectorAll("img");
let i = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
nextbtn.addEventListener("click", function(){
if(slideIndex == 0){
slideIndex = slideIndex + 1;
}
if(slideIndex > myArray.length-1){
slideIndex = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
}
if(slideIndex<myArray.length){
myArray[slideIndex].style.display = "block";
console.log(slideIndex);
}
slideIndex++;
});
prevbtn.addEventListener("click", function(){
});
Thank you for answering, but I am using this: myArray[slideIndex+1].style.display="block"; for jumping by first click to next image otherwise you have to click twice before going to next image.
I have now this code which seems to work except that I have to click twice when page load to get the next image.
How can that be fixed?
let slideIndex=0;
const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");
let myArray = document.querySelectorAll("img");
let i = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
nextbtn.addEventListener("click", function(){
if(slideIndex > myArray.length-1){
slideIndex = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
}
myArray[slideIndex].style.display = "block";
console.log(slideIndex);
slideIndex++;
});
prevbtn.addEventListener("click", function(){
});
Both these scrips work with no errors when on their own. However, when they are within the same script file, script 2 will stop working. Can anybody help with why this happens please. Thank you.
Script 1:
var changeImage = (function() {
var index = 0;
var image = [
"images/slideshow/img1.jpg",
"images/slideshow/img2.jpg",
"images/slideshow/img3.jpg",
"images/slideshow/img4.jpg",
"images/slideshow/img5.jpg",
"images/slideshow/img6.jpg",
"images/slideshow/img7.jpg"
];
function slideShow() {
var img = document.getElementById("slide");
img.src = image[index];
if(index < image.length -1) {
index++;
} else {
index = 0;
}
setTimeout(slideShow, 3000);
}
slideShow();
}());
Script 2:
var galleryModel = (function() {
var modal = document.getElementById('myModal');
var gallery = document.getElementsByClassName('bolivian');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for(var i = 0; i < gallery.length; i++) {
gallery[i].onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
}());
SOLVED,
I have manged to solve this by changing the setTimeout to setInterval and calling the slideShow function correctly within script 1.
Script 1:
var changeImage = (function() {
var index = 0;
var image = [
"images/slideshow/img1.jpg",
"images/slideshow/img2.jpg",
"images/slideshow/img3.jpg",
"images/slideshow/img4.jpg",
"images/slideshow/img5.jpg",
"images/slideshow/img6.jpg",
"images/slideshow/img7.jpg"
];
function slideShow() {
var img = document.getElementById("slide");
img.src = image[index];
if(index < image.length -1) {
index++;
} else {
index = 0;
}
}
setInterval(slideShow, 3000);
}());
Script 2:
var galleryModel = (function() {
var modal = document.getElementById('myModal');
var gallery = document.getElementsByClassName('bolivian');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for(var i = 0; i < gallery.length; i++) {
gallery[i].onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
}());
I'm in the process of learning JS and have made a collapsable navbar. I got the menu to open upon clicking the button, but it will not close. I've searched this site for answers but anything I've found refers to Bootstrap. This is just pure JS. I've also looked over my code for hours trying to spot a syntax error or anything that could be going wrong. Any help would be greatly appreciated!
Here is my code:
let toggleNavStatus = false;
let toggleNav = function() {
let getSidebar = document.querySelector(".nav-sidebar");
let getSidebarUl = document.querySelector(".nav-sidebar ul");
let getSidebarTitle = document.querySelector(".nav-sidebar span");
let getSidebarLinks = document.querySelectorAll(".nav-sidebar a");
if (toggleNavStatus === false) {
getSidebarUl.style.visibility = "visible";
getSidebar.style.width = "315px";
getSidebarTitle.style.opacity = "0.5";
let arrayLength = getSidebarLinks.length;
for (i = 0; i < array.length; i++) {
getSidebarLinks[i].style.opacity = "1";
}
toggleNavStatus = true;
}
else if (toggleNavStatus === true) {
getSidebar.style.width = "50px";
getSidebarTitle.style.opacity = "0";
let arrayLength = getSidebarLinks.length;
for (i = 0; i < array.length; i++) {
getSidebarLinks[i].style.opacity = "0";
}
getSidebarUl.style.visibility = "hidden";
toggleNavStatus = false;
}
}
In your for-loops you need to change array.length to arrayLength.
See this codepen
var x = ["s1","s2","s3","s4","s5","s6","s7","s8","s9","s10","s11",......,"s100"];
for (var i = 0; i < x.length; i++) {
document.getElementById(x[i]); }
var c = document.getElementById(x);
var a = document.getElementById("s2");
var b = document.getElementById("hover");
c.addEventListener('mouseover', function() {
b.style.display = "block";
});
c.addEventListener("mouseout", function() {
b.style.display = "none";
});
I have gallery of 100pictures, that needs mouseover action, so I wanted to use array like Id selector,and as you see I am not quite sure how to do this :D, so if anyone could help me a would be very thankful.
I have a table with a background image that, when clicked, displays other images for the user to choose from. This is working and appears or hides on click events. However, when the user clicks to add a second image the menu of images appears again (as it should) but twice. I have commented out a solution I tried. I thought on first click I could display my_div and then delete it in allImages.onclick. This is throwing up a null error in Chrome, probably understandably. The problem here is similar. Hope I added link correctly. Anyway, advice or help appreciated.
function addImage(col) {
var img = new Image();
img.src = "../www/images/TEST.png";
col.appendChild(img);
img.onclick = function () {
var myImages = new Array();
myImages[0] = "../www/images/TEST3.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST4.png";
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
var newList = document.createElement("ul");
newList.appendChild(allImages);
my_div = document.getElementById("showPics");
my_div.appendChild(newList);
my_div.style.display = 'block';
allImages.onclick = function (e) {
img.src = e.target.src;
my_div.style.display = 'none';
//var element = document.getElementById("showPics");
//element.parentNode.removeChild(element);
};
}
};
};
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
}
}
document.getElementById('holdTable').appendChild(table);
I modified your code adding ul to hold all img. It works, but could be better.
function addImage(col) {
var img = new Image();
img.src = "../www/images/TEST.png";
col.appendChild(img);
var myImages = new Array();
myImages[0] = "../www/images/TEST1.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST3.png";
var container = document.createElement("ul"); //ul to simplify hide/show
container.style.display = "none";
for (var i = 0; i < myImages.length; i++) {
var newList = document.createElement("li");
var im = document.createElement("img");
im.src = myImages[i];
newList.appendChild(im);
im.onclick = function () {
img.src = this.src;
};
container.appendChild(newList);
}
col.appendChild(container);
col.onclick = function () {
if (container.style.display == "none")
container.style.display = "block";
else
container.style.display = "none";
};
}