Develop Reference

Simplify JS code using Nuxt.js not working

I have a photo gallery in JavaScript, using Nuxt.js. In the photo gallery, it get the images and (on click), display them in full screen. Everything is working well, but my code is not really good (it can be improved, because it's repetitive). Here is my actual JS, SCSS and Vue code :
window.addEventListener('load', function () {
// Add the photo corresponding to the one in the photo gallery, to the photo gallery full screen
const photo = document.querySelectorAll(".photo");
for (let i = 0; i < photo.length; i++) {
const style = photo[i].currentStyle || window.getComputedStyle(photo[i], false);
const photoBackground = style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
const photoFullscreen = document.querySelectorAll(".photo-fullscreen");
photoFullscreen[i].setAttribute("src", photoBackground);
}
// Open PopUp
const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
const imageFullscreen1 = document.querySelector(".slide-container img:nth-child(1)");
const imageFullscreen2 = document.querySelector(".slide-container img:nth-child(2)");
const imageFullscreen3 = document.querySelector(".slide-container img:nth-child(3)");
document.querySelector(".lienImg1").onclick = function() {
photoGalleryFullscreen.style.display = "block";
imageFullscreen1.style.display = "block";
slideIndex = 1;
};
document.querySelector(".lienImg2").onclick = function() {
photoGalleryFullscreen.style.display = "block";
imageFullscreen2.style.display = "block";
slideIndex = 2;
};
document.querySelector(".lienImg3").onclick = function() {
photoGalleryFullscreen.style.display = "block";
imageFullscreen3.style.display = "block";
slideIndex = 3;
};
// Close PopUp
document.querySelector(".out").onclick = function() {
photoGalleryFullscreen.style.display = "none";
imageFullscreen1.style.display = "none";
imageFullscreen2.style.display = "none";
imageFullscreen3.style.display = "none";
slideIndex = 1;
};
});
// Gallery Full Screen
let slideIndex;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
let i;
let slides = document.querySelectorAll(".photo-fullscreen");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
// Photo Gallery
.photo-gallery-section {
margin: 50px 0;
.photo-gallery {
width: fit-content;
margin: auto;
display: grid;
grid-template-rows: 250px;
grid-template-columns: repeat(3, 250px);
justify-content: space-between;
gap: 3vw;
.photo:hover {
cursor: pointer;
}
.photo:nth-child(1) {
background: url(../static/images/yoga.jpg) center center / cover;
}
.photo:nth-child(2) {
background: url(../static/images/yoga-2.jpeg) center center / cover;
}
.photo:nth-child(3) {
background: url(../static/images/yoga-3.jpeg) center center / cover;
}
}
.photo-gallery-fullscreen {
display: none;
height: 100vh;
width: 100vw;
background: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
left: 0;
z-index: 1;
.slide-container {
width: fit-content;
margin: calc(50vh - 225px) auto;
img {
height: 450px;
z-index: 3;
display: none;
}
}
.prev,
.next {
cursor: pointer;
color: white;
text-shadow: 0.8px 0.8px 4px white;
font-weight: bold;
font-size: 40px;
z-index: 3;
position: absolute;
}
.prev {
margin: calc(50vh - 21px) 0;
margin-left: 15vw;
left: 0;
}
.next {
margin: calc(50vh - 21px) 0;
margin-right: 15vw;
right: 0;
}
.out {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 2;
}
}
}
<section class="photo-gallery-section" id="photo-gallery-section">
<h2 class="photo-gallery-title">Gallerie Photo</h2>
<div class="photo-gallery">
<div class="photo lienImg1"></div>
<div class="photo lienImg2"></div>
<div class="photo lienImg3"></div>
</div>
<div class="photo-gallery-fullscreen">
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
<div class="slide-container">
<img class="photo-fullscreen" />
<img class="photo-fullscreen" />
<img class="photo-fullscreen" />
</div>
<div class="out"></div>
</div>
</section>
Now I want to simplify the code but it's not working. Here is the new part of 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++) {
document.querySelectorAll(".photo").onclick = function() {
photoGalleryFullscreen.style.display = "block";
imagesFullscreen[i].style.display = "block";
slideIndex = i;
}
}
Thank you very much for your help,
Maxime
EDIT : Here is the new code that is working :
// 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;
};
}

Image slider buttons not detecting click?

I have an image slider which is working fine rotating images alone using setInterval(). However, the buttons I've added to control which image is clicked aren't responding to click events.
I have used addEventListener and i'm currently using .on('click') but neither are working.
HTML:
<div id="sliderContainer">
<img src="assets/image0.png" id="sliderImage"/>
<div id="left_holder">
<img id="leftArrow" src="assets/arrow_left.png">
</div>
<div id="right_holder">
<img id="rightArrow" src="assets/arrow_right.png">
</div>
</div>
CSS:
#sliderContainer {
width: 700px;
height: 500px;
margin: 0 auto;
position: relative;
margin-bottom: 5% !important;
}
#sliderImage {
width: 700px;
height: 500px;
position: absolute;
}
#left_holder {
height: 500px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 500px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
#leftArrow {
height: 50px;
width: 50px;
position: absolute;
top: 45%;
left: 0px;
}
#rightArrow {
height: 50px;
width: 50px;
position: absolute;
top: 45%;
right: 0px;
}
JS:
$(document).ready(function () {
/*var leftbtn = document.getElementById("leftArrow");
var rightbtn = document.getElementById("rightArrow");*/
var imagecount = 0;
var total = 4;
console.log(imagecount);
function slider(x) {
var Image = document.getElementById('sliderImage');
imagecount = imagecount + x;
if (imagecount > total) {
imagecount = 0;
}
if(imagecount < 0) {
imagecount = total;
}
Image.src = "assets/image" + imagecount + ".png"
}
window.setInterval(function sliderA() {
var Image = document.getElementById('sliderImage');
imagecount = imagecount + 1;
console.log(imagecount);
if (imagecount > total) {
imagecount = 0;
}
if (imagecount < 0) {
imagecount = total;
}
Image.src = "assets/image" + imagecount + ".png"
},5000);
//EVENT LISTENERS
/*leftbtn.addEventListener("click", slider(-1));
rightbtn.addEventListener("click", slider(1));*/
$(document).on('click', '#leftArrow', slider(-1));
$(document).on('click', '#rightArrow', slider(1));
}); //Doc Ready

You have to pass an event handler (callback), not calling that function.
$(document).on('click', '#leftArrow', function() {
slider(-1);
});
$(document).on('click', '#rightArrow', function() {
slider(-1);
});

JavaScript slideshow isn't working as intended

I made this little Slideshow with HTML/CSS/JS. Most of it is working but there is one thing which I can't figure out. How do I make it so the text above each image fits the img itself when autosliding is on? Right now it only shows the right title for each img when i manually click through. Any help is appreciated. Many thanks in advance.
var uniqueRandoms = [];
var indexCount = 0;
var allImagesAndText = ["Seltene römische Goldmünze", "Römische Funde", "Römische Wandmalerei", "Tutanchamun", "Cheops Pyramide", "Ägyptische Malerei"];
var total = allImagesAndText.length - 1;
function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = indexCount; i <= total; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
uniqueRandoms.splice(index, 1);
return val;
}
function slide(x) {
if(indexCount + x >= 0 && indexCount + x <= total) {
clearInterval(sliderInterval);
indexCount += x;
var Image = document.getElementById('img');
Image.src = "images/img" + indexCount + ".jpg";
update_dom();
sliderInterval = window.setInterval( slideA, 3000);
}
}
function update_dom() {
var left_holder = document.getElementById('left_holder');
var right_holder = document.getElementById('right_holder');
ChangeText(indexCount);
if(indexCount == 0) {
left_holder.style.display = "none";
} else if (indexCount == total) {
right_holder.style.display = "none";
} else {
right_holder.style.display = "block";
left_holder.style.display = "block";
}
}
function slideA() {
var Image = document.getElementById('img');
imagescount = makeUniqueRandom();
Image.src = "images/img" + imagescount + ".jpg";
update_dom();
}
function ChangeText(imgNum) {
document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}
window.addEventListener("load", function() {
update_dom();
sliderInterval = window.setInterval( slideA, 3000);
document.getElementById("right").addEventListener("click", function() {
slide(1);
});
document.getElementById("left").addEventListener("click", function() {
slide(-1);
});
});
#slideshow {
height: 450px;
width: 650px;
margin: 20px auto;
position: relative;
z-index: 1;
border: 10px solid #000;
border-radius: 10px;
}
#img {
height: 450px;
width: 650px;
}
#left_holder {
height: 450px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 450px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
right: 0px;
}
#text1 {
position: absolute;
color: #fff;
font-size: 32px;
background-color: #000;
opacity: 0.5;
left: 37%;
z-index: 2;
}
<div id="slideshow">
<div id="text1">Text</div>
<img src="images/img0.jpg" />
<div id="left_holder">
<img id="left" class="left" src="images/arrow_left.png" />
</div>
<div id="right_holder">
<img id="right" class="right" src="images/arrow_right.png" />
</div>
</div>

Slideshow with random pics

So I made this little Slideshow with HTML/CSS/JS and I want to make it so that the 6 images appear randomly and not 1,2,3.. more like 2,3,1.. for example. Any help is appreciated. Many thanks in advance.
JS:
var imagecount = 1;
var total = 6;
function slide(x) {
var Image = document.getElementById('img');
imagecount = imagecount + x;
if(imagecount > total){imagecount = 1;}
if(imagecount < 1){imagecount = total;}
Image.src = "images/img"+ imagecount +".jpg";
ChangeText(imagecount);
}
window.setInterval(function slideA(x) {
var Image = document.getElementById('img');
imagecount = imagecount + 1;
if(imagecount > total){imagecount = 1;}
if(imagecount < 1){imagecount = total;}
Image.src = "images/img"+ imagecount +".jpg";
ChangeText(imagecount);
}, 3000);
function ChangeText(imgNum){
var allImagesAndText = {1: "Seltene römische Goldmünze", 2: "Römische Funde", 3: "Römische Wandmalerei", 4: "Tutanchamun", 5: "Cheops Pyramide", 6: "Ägyptische Malerei"};
document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}
CSS:
#container {
height: 450px;
width: 650px;
margin: 20px auto;
position: relative;
z-index: 1;
border: 10px solid #000;
border-radius: 10px;
}
#img {
height: 450px;
width: 650px;
}
#left_holder {
height: 450px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 450px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
right: 0px;
}
#text1 {
position: absolute;
color: #fff;
font-size: 32px;
background-color: #000;
opacity: 0.5;
left: 37%;
z-index: 2;
}
HTML:
<div id="container">
<div id="text1">Text</div>
<img src="images/img1.jpg" id="img" />
<div id="left_holder">
<img onClick="slide(-1)" class="left" src="images/arrow_left.png" />
</div>
<div id="right_holder">
<img onClick="slide(1)" class="right" src="images/arrow_right.png" />
</div>
</div>

You can create unique random image slider. So it doesn't repeat image multiple times (Soham's answer is fine but it will repeat same image multiple times in a row).
Something like this:
var imagecount = 1;
var total = 6;
var uniqueRandoms = [];
function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = imagecount; i <= total; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
uniqueRandoms.splice(index, 1);
return val;
}
I used this SO answer.
And then in your code just call that function where you need it.
Example with your code just for autoslide is here https://jsfiddle.net/2gra4wk1/

You can add a function:-
function generateRandom(){
var x = Math.floor((Math.random() * 6) + 1); //generates random number from 1 to 6
return x;
}
And then call this function and use appropriately

JS slider tooltip

I have a slider with a pop-up that shows the current value of the slider.
but I want it only appears if I click on the slider and disappears when I do not click
is there a way to do it?
Below is my css js and html code
html:
<input type="range" id="myrange" name="myrange" class="zoom-range" min="0.25" max="2.00" step="0.01"/>
<output id="rangeHover" for="myrange" onmouseover="value = myrange.valueAsNumber;"></output>
js:
function modifyOffset() {
var el, newPoint, newPlace, offset, siblings, k;
width = this.offsetWidth;
newPoint = (this.value - this.getAttribute("min")) / (this.getAttribute("max") - this.getAttribute("min"));
offset = -1;
if (newPoint < 0) { newPlace = 0; }
else if (newPoint > 1) { newPlace = width; }
else { newPlace = width * newPoint + offset; offset -= newPoint;}
siblings = this.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
sibling = siblings[i];
if (sibling.id == this.id) { k = true; }
if ((k == true) && (sibling.nodeName == "OUTPUT")) {
outputTag = sibling;
}
}
outputTag.style.left = newPlace + "px";
outputTag.style.marginLeft = offset + "%";
outputTag.innerHTML = this.value;
}
function modifyInputs() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].getAttribute("type") == "range") {
inputs[i].onchange = modifyOffset;
// the following taken from http://stackoverflow.com/questions/2856513/trigger-onchange-event-manually
if ("fireEvent" in inputs[i]) {
inputs[i].fireEvent("onchange");
} else {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
inputs[i].dispatchEvent(evt);
}
}
}
}
window.onload = modifyInputs;
css:
output {
position: absolute;
background-image: linear-gradient(#FAFAD2, #FAFAD2);
width: 30px;
height: 15px;
text-align: center;
color: black;
border-radius: 5px;
display: block;
bottom: 120%;
margin-top:5000px;
font-size:11px;
left: 100%;
}
output:after {
content: "";
position: absolute;
width: 0px;
height: 0px;
border-top: 10px solid #FAFAD2;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 100%;
left: 100%;
margin-left: -26px;
margin-top: -1px;
}
#rangeHover{
display: block;
position: relative;
margin: -50px;
padding-right:10px;
padding-left:10px;
}
Thanks for help!

you could add to css:
output
{
display:none
}
input:hover + output
{
display:block;
}
UPDATE
tooltip visible on click:
input:active+ output
{
display:block;
}