javascript slider with thumbnail not working with both options - javascript

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

Related

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);
});

html-JavaScript- when switching to next div only displays for a split second then disappears

Here is my function. I want to switch from one div to another. I am getting this to happen but only for a quick second then it returns back to the first div.
function NextDiv()
{
var div = document.querySelectorAll("#div0>div");
for (var i = 0; i < div.length; i++)
{
if (div[i].style.display != "none")
{
div[i].style.display = "none";
if (i == div.length - 1)
{
div[0].style.display = "block";
}
else
{
div[i + 1].style.display = "block";
}
return false;
}
}
}
here is a testable fiddle: https://jsfiddle.net/pnumtc35/5/

at the line where you do div[i+1] the new div gets shown. but on the next iteration of your for-loop it get immediately hidden again. Thats why i added a break to stop the loop.
function NextDiv()
{
console.log('click');
var div = document.querySelectorAll("#div0>div");
for (var i = 0; i < div.length; i++)
{
if (div[i].style.display != "none")
{
div[i].style.display = "none";
if (i == div.length - 1)
{
div[0].style.display = "block";
}
else
{
div[i + 1].style.display = "block";
break; // ADDED
}
}
}
}
<div id="div0">
<div class="column" id="div1" >
<h2>Customer Information </h2>
<button runat="server" id="nextbutton" onclick="NextDiv()" >Next </button>
</div>
<div class="column" id="div2" style="display: none;">
<h2>Payment Information</h2>
<button runat="server" id="Button1" onclick="NextDiv()">Next </button>
</div>
<div class="column" id="div3" style="display: none;">
<h2>Shipment Information</h2>
<Button ID="btn1" runat="server" Text="Save" onclick="SaveInfo"/>
</div>
</div>

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.

How to get Slider to show next or previous on span click

I'm using a combination of bootstrap 3 and just writing from scratch.
When I click the image thumbnails, they do what they're supposed to do, but when I click the span arrows, it doesn't go to the next or previous image.
Here's the code:
var maximages = 6;
var startpath = "imgs"
var extension = ".jpg"
function calcslide(x) {
var currentimage = document.getElementById("bigpic").src;
var dotat = currentimage.indexOf(extension);
var stringnumber = currentimage.substr(dotat - 2, 2);
var nextnum = parseInt(stringnumber) + x;
if (nextnum < 1) {
nextnum = maximages;
}
if (nextnum > maximages) {
nextnum = 1;
}
var twodigitnum = ("0" + nextnum).slice(-2);
var showimg = startpath + twodigitnum + extension;
showbig(showimg);
}
function showbig(pic) {
document.getElementById("bigpic").src = pic;
}
.slider {
text-align: center;
}
#bigpic {
height: 500px;
}
.thumbs img {
height: 100px;
padding: 20px 0 20px 0;
}
<div class="slider">
<span class="glyphicon glyphicon-chevron-left btn btn-lg" alt="previous" onclick="calcslide(-1)"></span>
<img src="imgs/slider01.jpg" id="bigpic" />
<span class="glyphicon glyphicon-chevron-right btn btn-lg" alt="next" onclick="calcslide(1)"></span>
<div class="thumbs">
<span class="glyphicon glyphicon-chevron-left" alt="previous" onclick="calcslide(-1)"></span>
<img src="imgs/slider01.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider02.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider03.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider04.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider05.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider06.jpg" onclick="showbig(this.src)" />
<span class="glyphicon glyphicon-chevron-right" alt="next" onclick="calcslide(1)"></span>
</div>
</div>

A slash / and a prefix is missing somewhere within your path construction.
Instead of:
var showimg = startpath + twodigitnum + extension
I would try:
var showimg = startpath + '/slider' + twodigitnum + extension

Image arrays with thumbnails using display property in JavaScript

I just want to upgrade image arrays using JavaScript. I added thumbnails below, So larger image can be displayed when thumbail is clicked.
The problem happens after I click "prev" or "next" (after click on the thumbail), the current image is not hidden and the next or pevious image is shown on its rigt side. Sometimes it does right, sometimes not...please help if you can. Thank you in advance.
<div id="bigImages" style="height:550px; overflow:hidden;">
<div class="image" style="display:table-cell; vertical-align:middle;"><img src="url big image 1"></div>
<div class="image" style="display:table-cell; vertical-align:middle;"><img src="url big image 2"></div>
<div class="image" style="display:table-cell; vertical-align:middle;"><img src="url big image 3"></div>
</div>
<a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>
<br/>
<div id="smallImages">
<img class ="small" src="url small image 1">
<img class ="small" src="url small image 2">
<img class ="small" src="url small image 3">
</div>
Javascript
<script type="text/javascript">
var imgArr = document.getElementById('bigImages').getElementsByTagName('img');
for(var i=1; i<imgArr.length; i++){
imgArr[i].style.display = "none";
}
i=0;
document.getElementById('prev').onclick = function(){
if(i===0){
imgArr[i].style.display = "none";
i=imgArr.length-1;
imgArr[i].style.display = "";
}
else{
imgArr[i].style.display = "none";
i--;
imgArr[i].style.display = "";
}
}
document.getElementById('next').onclick = function(){
if(i===imgArr.length-1){
imgArr[i].style.display = "none";
i=0;
imgArr[i].style.display = "";
}
else{
imgArr[i].style.display = "none";
i++;
imgArr[i].style.display = "";
}
}
function show(dptr) {
for (var i=0; i<imgArr.length; i++){
imgArr[i].style.display = 'none';
}
imgArr[dptr].style.display = "";
}

well..., I came up with this solution :
html+style
<div id="bigImages" style="height:550px; overflow:hidden;">
<div class="image" style="display:table-cell; vertical-align:middle;"><img src="http://www.livehacking.com/web/wp-content/uploads/2012/08/chrome-logo-1301044215-300x300.jpg"></div>
<div class="image" style="display:table-cell; vertical-align:middle;"><img src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"></div>
<div class="image" style="display:table-cell; vertical-align:middle;"><img src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png"></div>
</div>
<a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>
<br/>
<div id="smallImages">
<img class ="small" src="http://www.livehacking.com/web/wp-content/uploads/2012/08/chrome-logo-1301044215-300x300.jpg">
<img class ="small" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png">
<img class ="small" src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png">
</div>
<style>
#smallImages img{
width:20px;
}
</style>
script
var imgArrbig = document.getElementById('bigImages').getElementsByTagName('img');
for(var i=1; i<imgArrbig.length; i++){
imgArrbig[i].style.display = "none";
}
i=0;
document.getElementById('prev').onclick = function(){
if(i===0){
imgArrbig[i].style.display = "none";
i=imgArrbig.length-1;
imgArrbig[i].style.display = "";
}
else{
imgArrbig[i].style.display = "none";
i--;
imgArrbig[i].style.display = "";
}
}
document.getElementById('next').onclick = function(){
if(i===imgArrbig.length-1){
imgArrbig[i].style.display = "none";
i=0;
imgArrbig[i].style.display = "";
}
else{
imgArrbig[i].style.display = "none";
i++;
imgArrbig[i].style.display = "";
}
}
rr = 0
$('.small').each(function(){
$(this).attr('number',''+ rr +'');
rr = rr+1
});
$('.small').click(function(i){
var compare = $(this).attr('number');
$('#bigImages img').css('display','none');
$(imgArrbig[compare]).css('display','block');
});
Here is example

Categories