We Keep Coding

How to display ALT text to my Lightbox gallery?

I am trying to create my own Lightbox Gallery instead of using a plugin. So I found a really simple script online but now I am trying to display the alt text of the image that is shown in the Lightbox as a caption.
I managed to display the alt text of all images in the gallery but obviously only the alt text of the shown image should be displayed, can someone help me as to how I only pick the alt text from the shown image?
Here is my code:
<div class="lightbox">
<div class="wrapper">
<div class="gallery">
<div class="image">
<div class="subimage"><img src="images/cardmapr-rDzI7m7sjPE-unsplash.jpg" loading="lazy" sizes="28vw" srcset="images/cardmapr-rDzI7m7sjPE-unsplash-p-500.jpeg 500w, images/cardmapr-rDzI7m7sjPE-unsplash-p-800.jpeg 800w, images/cardmapr-rDzI7m7sjPE-unsplash-p-1080.jpeg 1080w, images/cardmapr-rDzI7m7sjPE-unsplash-p-1600.jpeg 1600w, images/cardmapr-rDzI7m7sjPE-unsplash.jpg 1920w" alt="Caption alt test" class="image_2"></div>
</div>
<div class="image">
<div class="subimage"><img src="images/sergei-a--heLWtuAN3c-unsplash.jpg" loading="lazy" sizes="28vw" srcset="images/sergei-a--heLWtuAN3c-unsplash-p-500.jpeg 500w, images/sergei-a--heLWtuAN3c-unsplash-p-800.jpeg 800w, images/sergei-a--heLWtuAN3c-unsplash-p-1080.jpeg 1080w, images/sergei-a--heLWtuAN3c-unsplash-p-1600.jpeg 1600w, images/sergei-a--heLWtuAN3c-unsplash.jpg 1920w" alt="caption 2" class="image_2"></div>
</div>
<div class="image">
<div class="subimage"><img src="images/good-faces-agency-sKRavSCadwE-unsplash.jpg" loading="lazy" sizes="28vw" srcset="images/good-faces-agency-sKRavSCadwE-unsplash-p-500.jpeg 500w, images/good-faces-agency-sKRavSCadwE-unsplash-p-800.jpeg 800w, images/good-faces-agency-sKRavSCadwE-unsplash-p-1080.jpeg 1080w, images/good-faces-agency-sKRavSCadwE-unsplash-p-1600.jpeg 1600w, images/good-faces-agency-sKRavSCadwE-unsplash.jpg 1920w" alt="" class="image_2"></div>
</div>
<div class="image">
<div class="subimage"><img src="images/Bild_Haarentfernung_Nachher.png" loading="lazy" sizes="28vw" srcset="images/Bild_Haarentfernung_Nachher-p-500.png 500w, images/Bild_Haarentfernung_Nachher.png 536w" alt="caption last" class="image_2"></div>
</div>
</div>
</div>
<div class="preview-box">
<div class="image-box">
<div class="caption2"></div><img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="test test" class="image_3">
</div>
</div>
<div class="shadow">
<div class="icon closebutton"></div>
<div class="slide prev"></div>
<div class="slide next"></div>
<div class="details">
<div class="title">
<p class="current-img">Test1</p>
<div>/</div>
<p class="total-img">Test2</p>
</div>
</div>
</div>
</div>
The very last part in this code, is the jquery I am using to display the alt texts:
const gallery = document.querySelectorAll(".image"),
previewBox = document.querySelector(".preview-box"),
previewImg = previewBox.querySelector("img"),
shadow = document.querySelector(".shadow"),
closeIcon = shadow.querySelector(".icon"),
currentImg = shadow.querySelector(".current-img"),
totalImg = shadow.querySelector(".total-img");
window.onload = ()=>{
for (let i = 0; i < gallery.length; i++) {
totalImg.textContent = gallery.length; //passing total img length to totalImg variable
let newIndex = i; //passing i value to newIndex variable
let clickedImgIndex; //creating new variable
gallery[i].onclick = () =>{
clickedImgIndex = i; //passing cliked image index to created variable (clickedImgIndex)
function preview(){
currentImg.textContent = newIndex + 1; //passing current img index to currentImg varible with adding +1
let imageURL = gallery[newIndex].querySelector("img").src; //getting user clicked img url
previewImg.src = imageURL; //passing user clicked img url in previewImg src
}
preview(); //calling above function
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
if(newIndex == 0){ //if index value is equal to 0 then hide prevBtn
prevBtn.style.display = "none";
}
if(newIndex >= gallery.length - 1){ //if index value is greater and equal to gallery length by -1 then hide nextBtn
nextBtn.style.display = "none";
}
prevBtn.onclick = ()=>{
newIndex--; //decrement index
if(newIndex == 0){
preview();
prevBtn.style.display = "none";
}else{
preview();
nextBtn.style.display = "block";
}
}
nextBtn.onclick = ()=>{
newIndex++; //increment index
if(newIndex >= gallery.length - 1){
preview();
nextBtn.style.display = "none";
}else{
preview();
prevBtn.style.display = "block";
}
}
document.querySelector("body").style.overflow = "hidden";
previewBox.classList.add("show");
shadow.style.display = "block";
closeIcon.onclick = ()=>{
newIndex = clickedImgIndex; //assigning user first clicked img index to newIndex
prevBtn.style.display = "block";
nextBtn.style.display = "block";
previewBox.classList.remove("show");
shadow.style.display = "none";
document.querySelector("body").style.overflow = "scroll";
}
$('.shadow').on('click', function(e) {
if (e.target !== this)
return;
newIndex = clickedImgIndex; //assigning user first clicked img index to newIndex
prevBtn.style.display = "block";
nextBtn.style.display = "block";
previewBox.classList.remove("show");
shadow.style.display = "none";
document.querySelector("body").style.overflow = "scroll";
});
}
}
}
$('.gallery').find('img').each(function() {
var $alt = $(this).attr('alt');
$('.caption2').append($alt);
});

javascript slider with thumbnail not working with both options

I make an image slider with text and thumbnail as well.
the issue is when I click the thumbnail its shows the photo correctly no issue but when I click the next button then click on the thumbnail then slider not working below is the code.
I used two arrays
for images
for text
then the next() and Previous() function to change the image when clicking on the next and previous button.
var images = ['<img src="images/1.jpg"width = 100%; height=500px; >',
'<img src="images/2.jpg"width = 100%; height=500px; >',
'<img src="images/3.jpg" width = 100%; height=500px;>'
];
var text = ["Missing From Karachi", "Missing From Peshawer", "Missing From Lahore"];
var i = 0;
var x = document.getElementById("demo");
var y = document.getElementById("text");
function next() {
i++;
if (i < images.length) {
x.innerHTML = images[i];
y.innerHTML = text[i];
} else {
i = 0;
x.innerHTML = images[i];
y.innerHTML = text[i];
}
}
function prev() {
i--;
if (i >= 0) {
x.innerHTML = images[i];
y.innerHTML = text[i];
} else {
i = images.length - 1;
x.innerHTML = images[i];
y.innerHTML = text[i];
}
}
function thumbchange(num) {
var thumb = 'images/' + num + '.jpg';
document.getElementById("demo1").src = thumb;
}
<div class="slider">
<p class="text" id="demo"><img id="demo1" src="images/1.jpg" width=100%; height=500px;> </p>
<div class="onebtn">
<button id="btn1" class="btn1 btn btn-primary btn-lg" type="button" class="prev" onclick="prev()">PREVIOUS</button>
</div>
<div class="twobtn">
<button id="btn2" class="btn2 btn btn-primary btn-lg" type="button" class="next" onclick="next()">NEXT</button>
</div>
<p id="text" class="text" style="font-size:40px; font-weight:bolder;">Missing From Karachi</p>
<br><br>
<ul class="thumbs">
<li class="img12" onclick="thumbchange(1)"><img src="images/1.jpg" width=100%;></li>
<li class="img12" onclick="thumbchange(2)"><img src="images/2.jpg"></li>
<li class="img12" onclick="thumbchange(3)"><img src="images/3.jpg"></li>
</ul>
</div>
see the example
https://codepen.io/pen/?template=WNxebOO

how to fix simple slider bug - javascript

I try to create a simple slider using javascipt. the problem is when counter gets to last element, It dosen't change the display to block
this is the code
<div id="slider">
<img class="slide" src="img/img13.jpg" alt=""/>
<img class="slide" src="img/img14.jpg" alt=""/>
<img class="slide" src="img/img15.jpg" alt=""/>
<img class="slide" src="img/img16.jpg" alt=""/>
<img class="slide" src="img/img17.jpg" alt=""/>
<img class="slide" src="img/img18.jpg" alt=""/>
</div>
var delay = 3000;
var i = 0;
var allSliderSlides = document.getElementsByClassName('slide');
allSliderSlides[0].style.display = "block";
setInterval(function(){
i++;
allSliderSlides[i].style.display = "block";
if(allSliderSlides[i-1].style.display=="block"){
allSliderSlides[i-1].style.display="none";
}
if(i == allSliderSlides.length-1){
i = 0;
allSliderSlides[allSliderSlides.length-1].style.display = "none";
allSliderSlides[i].style.display = "block";
}
},delay);
please give me some advice or suggestion to fix this problem
thanks

You reassigned i = 0 before your last element to become block
Try:
if(i == allSliderSlides.length-1){
allSliderSlides[allSliderSlides.length-1].style.display = "none";
allSliderSlides[i].style.display = "block";
i = 0;
}

Here's the problem:
if(i == allSliderSlides.length-1){
i = 0;
allSliderSlides[allSliderSlides.length-1].style.display = "none";
allSliderSlides[i].style.display = "block";
}
You are resetting the counter before changing the style. This results to displaying the fist image and the last image would never be displayed.
Solution: Move i = 0; to last line in the block like so:
if(i == allSliderSlides.length-1){
allSliderSlides[allSliderSlides.length-1].style.display = "none";
allSliderSlides[i].style.display = "block";
i = 0;
}
Hope that helps.

Show image ( 5 seconds then hide) , click show image ( to see next image) ?

I'm new to this. I am trying to create a HTML code which runs in HTML. It shows a image for 5 seconds and hides, next image is shown via button.
I found most of the codes via online. Can someone see where i am going wrong here.
<!DOCTYPE html>
<html>
<head>
<button id="next" onclick="showNext();">Show next image</button>
<div class="image" style="display: none;"><img src=“1.jpg”></div>
<div class="image" style="display: none;"><img src=“2.jpg”></div>
<div class="image" style="display: none;"><img src=“3.jpg”></div>
<script type="text/javascript">
var divs = document.querySelectorAll('div.image');
var button = document.getElementById('next'); //button.
var currentImage = 0;
function showNext() {
button.style.display = 'inline';
divs[currentImage].style.display = 'block';
setTimeout(hide, 5000);
}
function hide() {
button.style.display = 'block';
divs[currentImage].style.display = 'none';
currentImage = (currentImage + 1) % divs.length;
}
</script>
</head>
</html>
this is the JS that is used
var divs = document.querySelectorAll(‘image');
var button = document.getElementById('next');
var currentImage = 0;
function showNext() {
button.style.display = 'inline';
divs[currentImage].style.display = 'block';
setTimeout(hide, 500000);
}
function hide() {
button.style.display = 'block';
divs[currentImage].style.display = 'none';
currentImage = (currentImage + 1) % divs.length;
}

Updated
So, here is working code:
HTML
<button id="next">Show next image</button>
<div class="image" style="display: none;"><img src="http://dummyimage.com/100x100/000/fff.jpg"></div>
<div class="image" style="display: none;"><img src="http://dummyimage.com/100x100/990000/fff.jpg"></div>
<div class="image" style="display: none;"><img src="http://dummyimage.com/100x100/009900/fff.jpg"></div>
JS
var divs = document.querySelectorAll('.image');
var button = document.getElementById('next');
var currentImage = 0;
button.addEventListener('click', function(){
button.style.display = 'inline';
divs[currentImage].style.display = 'block';
setTimeout(hide, 2000);
});
function hide() {
button.style.display = 'block';
divs[currentImage].style.display = 'none';
currentImage = (currentImage + 1) % divs.length;
}
I provided jsfiddle too.

Div tabs with Javascript

I organized my tabs this way:
<ul id="tabs">
<li class="selected">DIV1</li>
<li class>DIV2</li>
<li class>DIV3</li>
</ul>
<div id="tabs_content">
<div id="div1" style="display: block;"><textarea name="div1" rows="7" cols="108"></textarea></div>
<div id="div2" style="display: none;"><textarea name="div2" rows="7" cols="108"></textarea></div>
<div id="div3" style="display: none;"><textarea name="div3" rows="7" cols="108"></textarea></div>
</div>
I would like that when I press one of the link inside the <li> element,
the corrispondend Div become visible with display: block and the others are changed to display: none
Also I would like to do the same with the "selected" class on the clicked <li> element.
Is this possible?
I tried with:
function selectTab(src)
{
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById(src).style.display = 'block';
}
It works if I pass the ID by reference with onclick="" but I would like to avoid this.
Solution:
function selectTab(source, parent)
{
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById(source).style.display = 'block';
var elements = [].slice.apply(document.getElementsByClassName('selected'));
for (var i = 0; i < elements.length; i++) {
elements[i].className = '';
}
parent.className = 'selected';
}

Possibly this is what you want, cross-browser (IE5.5+)
CSS
.selected {
background-color: green;
}
.hide {
display: none;
}
HTML
<ul id="tabs">
<li class="selected">DIV1
</li>
<li class>DIV2
</li>
<li class>DIV3
</li>
</ul>
<div id="tabs_content">
<div id="div1">
<textarea name="div1" rows="7" cols="108"></textarea>
</div>
<div id="div2" class="hide">
<textarea name="div2" rows="7" cols="108"></textarea>
</div>
<div id="div3" class="hide">
<textarea name="div3" rows="7" cols="108"></textarea>
</div>
</div>
javascript
var tabs = document.getElementById("tabs"),
tabs_content = document.getElementById("tabs_content"),
divs = tabs_content.getElementsByTagName("div"),
divsLength = divs.length,
lis = tabs.getElementsByTagName("li"),
lisLength = lis.length;
tabs.onclick = function (evt) {
var e = evt || window.event,
target = e.target || e.srcElement,
href,
id,
index,
div;
if (target.tagName.toUpperCase() === "A") {
for (index = 0; index < lisLength; index += 1) {
lis[index].className = "";
}
target.parentNode.className = "selected";
href = target.attributes.href.nodeValue;
if (href && href.charAt(0) === "#") {
id = href.slice(1);
for (index = 0; index < divsLength; index += 1) {
div = divs[index];
if (id === div.id) {
div.className = "";
} else {
div.className = "hide";
}
}
}
}
};
jsfiddle

Your selectTab function needs to be necessarily bound to the click event on those list elements. There's no other way you can do it. Your code is good enough. You can simplify things using JQuery as well, as some other answer here points out.
Okay, do this:
In your HTML, add "tab" class to each of the tags.
<li class="selected"><a class="tab" href="#div1">DIV1</a></li>
<li class><a class="tab" href="#div2">DIV2</a></li>
<li class><a class="tab" href="#div3">DIV3</a></li>
In your jquery,
$('.tab').click(function(){
var displaydiv = $(this).attr('href');
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
$(this).show();
$('"'+displaydiv+'"').show();
$(this).parent().attr('class','selected');
})

<ul id="tabs">
<li class="selected"><a onclick="showTab(this);" href="#div1">DIV1</a></li>
<li><a onclick="showTab(this);" href="#div2">DIV2</a></li>
<li><a onclick="showTab(this);" href="#div3">DIV3</a></li>
</ul>
<div id="tabs_content">
<div id="div1" style="display: block;"><textarea name="div1" rows="7" cols="108"></textarea></div>
<div id="div2" style="display: none;"><textarea name="div2" rows="7" cols="108"></textarea></div>
<div id="div3" style="display: none;"><textarea name="div3" rows="7" cols="108"></textarea></div>
</div>
Use the following javascript:
function showTab(a)
{
var id = a.href.replace('#','');
var tabs = document.getElementById('tabs_content').getElementsByTagName('div');
var index = -1;
for(var i=0,n=tabs.length;i<n;i+=1)
{
var t = tabs[i];
if(t.id === id)
{
t.style.display = 'block';
index = i;
}
else
{
t.style.display = 'none';
}
}
var links = document.getElementById('tabs').getElementsByTagName('li');
for(var i=0,n=links.length;i<n;i+=1)
{
links[i].setAttribute('class', index === i ? 'selected' : '');
}
}
Of course you could also first cache your menu and tabs, that way you can keep a variable. This is the proper way:
function Menu()
{
var self = this;
self.links = document.getElementById('tabs').getElementsByTagName('a');
self.tabs = document.getElementById('tabs_content').getElementsByTagName('div');
self.selectedIndex = 0;
self.n = self.links.length;
for(var i=0;i<self.n;i+=1)
{
// Set onclick for every link in the tabs-menu
self.links[i].onclick = function(ind){return function(){self.update(ind);};}(i);
}
self.update = function(ind)
{
// Hide previous tab
self.links[self.selectedIndex].parentNode.setAttribute('class', '');
self.tabs[self.selectedIndex].style.display = 'none';
// Select and show clicked tab
self.selectedIndex = ind;
self.links[self.selectedIndex].parentNode.setAttribute('class', 'selected');
self.tabs[self.selectedIndex].style.display = 'block';
};
}
setTimeout(function(){new Menu();},1);
Check out the jsfiddle for the Menu class in action: http://jsfiddle.net/3vf4A/1/. Note that even if Javascript is disabled, the a-tag will still get you to the correct area by scrolling to it automatically.