We Keep Coding

How to implement carousel to existing slideshow gallery with light-box using vanilla javascript

I am trying to create slide gallery similar to https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp when user click on big main img --> img will be open in lightbox https://www.lightgalleryjs.com/
everything is working fine except I would like to display only 4 images in row below main img (because sometimes gallery has 10+ imgs and it doesn`t look nice when all imgs are display in one line) I can hide all imgs except first 4 in css to get correct design but I am loosing functionality. My idea is to add somehow corousel, If img 5 is selected / displayed as a main img this img has to be included also in a row between 4 imgs (they are static now and only first 4 images are display)
there is .volt
<div id="lightgallery2" class="container gallery lightgallery">
<!-- Full-width images -->
{% for i in 0..9 %}
<div class="gallery-item" data-src="{{ pathToImg[i] }}">
<img src="{{ pathToImg[i] }}" alt="{{ imgDescription }}" />
</div>
{% endfor %}
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Row images -->
<div class="row">
{% for i in 0..9 %}
<div class="column-img">
<img class="resort-img" src="{{ pathToImg[i] }}" onclick="currentSlide({{i + 1 }})" alt="{{ imgDescription }}" />
</div>
{% endfor %}
</div>
</div>
.less
.gallery{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
.gallery-item {
display: none;
img{
width: 100%;
cursor: pointer;
}
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
&:hover{
background-color: rgba(0, 0, 0, 0.8);
text-decoration: none;
}
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
//row images
.row {
display: flex;
justify-content: space-between;
width: 100%;
}
.column-img{
display: none;
img{
opacity: 0.6;
cursor: pointer;
width: 100%;
height: 90px;
&:hover{
opacity: 1;
}
}
}
.column-img:nth-child(-n+4){
display:block;
margin: 5px 0 0 ;
.active {
opacity: 1;
}
}
}
.js
let slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("gallery-item");
let dots = document.getElementsByClassName("resort-img");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
//TO DO Carousel is not displaying relevant imgs
// if(n == 4){
// let elements = document.querySelectorAll('.column-img:nth-child(-n+4)');
// for (const element of elements) {
// element.style.display = 'none';
// }
// elements = document.querySelectorAll('.column-img:nth-child(n+5)');
// for (const element of elements) {
// element.style.display = 'block';
// }
// }
}
My idea would be:
when user get to img with index 3 I hide with js first img and display 2-5,
when user get to img with index 4 I hide with js first img and display 3-6,
when user get to img with index 5 I hide with js first img and display 4-7,
...
I start to implement that idea (that is what is commented) but it will work only in one direction forward, when user decide to click on previous it will not work anymore...
I think my way of thinking is not correct =(
I can`t use any library for that, it has to be vanilla js.
I will be very thankful for any ideas

automatic slideshow stopping at last image

thanks in advance for your time. I decided to tweak the automatic slideshow from W3Schools (https://www.w3schools.com/howto/howto_js_slideshow.asp) in order to get a Y-axis moving transition instead of opacity only but I broke the continuity of the slider. I would like it to automatically restart from the first image after the last image, instead of stopping completely. This is the code, I'll appreciate any help, should be easy for someone knowing what he's doing (not like me). Thank you
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.opacity = "1";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none; position: absolute;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1s;
}
#keyframes fade {
from { opacity: .1; transform: translateY(-100%); }
to { opacity: 1; transform: translateY(0); }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://htmlcolorcodes.com/assets/images/colors/bright-blue-color-solid-background-1920x1080.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://htmlcolorcodes.com/assets/images/colors/charcoal-color-solid-background-1920x1080.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://htmlcolorcodes.com/assets/images/colors/teal-color-solid-background-1920x1080.png" style="width:100%">
</div>
</div>
<br>
<script>
</script>
</body>
</html>

As the transition happens when element becomes 'display:block' (I would have made it another way, using an .active class) - I have decided to set 'display:none' for the next element so it will be shown next.
Also fixed an issue with z-index so I keep bring the current active above else.
let slideIndex = 0;
let zIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.opacity = "1";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
// this is all quite patchy,
// but it works if you have more than 2 slides
slides[slideIndex - 1].style.zIndex = zIndex++;
slides[slideIndex % slides.length].style.display = "none";
setTimeout(showSlides, 1000); // Change image every 2 seconds
}
* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none;
position: absolute;
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1s;
}
#keyframes fade {
from {
opacity: .1;
transform: translateY(-100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
img {
width: 100px;
height: 100px;
}
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://htmlcolorcodes.com/assets/images/colors/bright-blue-color-solid-background-1920x1080.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://htmlcolorcodes.com/assets/images/colors/charcoal-color-solid-background-1920x1080.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://htmlcolorcodes.com/assets/images/colors/teal-color-solid-background-1920x1080.png" style="width:100%">
</div>
</div>

JavaScript modal getElementsByClassName [duplicate]

This question already has an answer here:
How to understand `this` inside a normal function and an arrow function?
(1 answer)
Closed 3 years ago.
I'm building a modal based off of w3s's tutorial however, instead of grabbing an "id" I need to grab multiple images with a "class" name instead. I used the classic for loop method then added a click function which does pop up with an empty box.
The problem is, although the box and background style appears the image is not showing up. Using an "id" on the target image + without the for loop works fine, shows up but adding a "class" with the loop does not. There's something I am missing in JS. Any help would be appreciated.
let modal = document.getElementById("modal");
let imgs = document.getElementsByClassName("images");
let modalImg = document.getElementById("modal-img");
for (let i = 0; i < imgs.length; i++) {
imgs[i].addEventListener("click", () => {
modal.style.display = "block";
modalImg.src = this.src;
});
}
.images {
border-radius: 5px;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
<!-- target images -->
<div>
<img src="https://via.placeholder.com/150?text=image1" alt="" class="images">
</div>
<div>
<img src="https://via.placeholder.com/150?text=image2" alt="" class="images">
</div>
<!-- modal -->
<div id="modal" class="modal">
<img class="modal-content" id="modal-img">
</div>

An Arrow function () => doesn't bind it's own this - You'll have to use standard function expression to bind this to the correct context ( The element in this case )
let modal = document.getElementById("modal");
let imgs = document.getElementsByClassName("images");
let modalImg = document.getElementById("modal-img");
for (let i = 0; i < imgs.length; i++) {
imgs[i].addEventListener("click", function () {
modal.style.display = "block";
modalImg.src = this.src;
});
}
.images {
border-radius: 5px;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
<div>
<img src="https://placekitten.com/150?image=1" alt="" class="images">
</div>
<div>
<img src="https://placekitten.com/150?image=2" alt="" class="images">
</div>
<div id="modal" class="modal">
<img class="modal-content" id="modal-img">
</div>

Adjust modal size to div shape

I'm working on my website and I'd like to create a slideshow. Hence, I have created the modal to expand the image after click - it works fine. However, I want to adjust the modal shape to the image size(thus the vertical photos look ugly in standard shape), but after many hours I gave up because I didn't find any satisfactory result.
HTML:
<div id="myModal" class="modal-wraper">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal">
<div class="mySlides">
<div class="slide_1"></div>
</div>
<div class="mySlides">
<div class="slide_2"></div>
</div>
<div class="mySlides">
<div class="slide_3"></div>
</div>
</div>
CSS:
.modal-wraper {
position: fixed;
display: none;
top:0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #000;
z-index: 1;
}
.modal {
position: absolute;
display: flex;
flex-direction: column;
height: 85vh;
width: 85vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: solid 5px red;
}
.mySlides {
display: flex;
background-color: blue;
flex-basis: 100%;
}
.slide_1 {
width: 100%;
height: 100%;
background-image: url('../images/JF_3.jpg');
background-size:contain;
background-repeat: no-repeat;
object-fit: cover;
}
.slide_2 {
width: 100%;
height: 100%;
background-image: url('../images/JF_5.jpg');
background-size:cover;
}
JS
function openModal(n) {
document.getElementById("myModal").style.display = "block";
showSlides(n);
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 0;
function changeSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var modal = document.getElementsByClassName('modal');
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n < 0) {
slideIndex = slides.length-1;
} else if (n >= slides.length) {
slideIndex = 0
} else {
slideIndex = n;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex].style.display = "block";
dots[slideIndex].className += " active";
captionText.innerHTML = dots[slideIndex].alt;
}

JS and JQuery script conflicts

I am experiencing issues when implementing two sets of code for two functions on a webpage I am designing. I am rather new to JS and JQuery, but none of the similar threads lead to a solution.
On my webpage I have a series of 100vh slideshows (code below) as well as one fullpage "welcome"screen above them. To transition between them, I am using a package that offers block scrolling.
Here is my code:
// Slideshow code, help from w3schools
var slideIndex = 1;
showDivs(slideIndex, show);
function plusDivs(n, show) {
showDivs(slideIndex += n, show);
}
function showDivs(n, show) {
var i;
var x = document.getElementsByClassName("mySlides"+show);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "inline";
}
// blockScroller code from the docs on the linked package.
$(function() {
var blockScroller = $("#main-wrap").blockScroll();
});
I can, depending on which block of code is physically higher up in the script, get one of them to work at a time. However, when the block scrolling works, the slideshow breaks and none of that javascript has any effect on the page. This should tell you that for the sake of each individual scripts, all HTML and CSS requirements are met.
Any help to resolve this conflict would be great, and since this is my first question on stackoverflow if I butchered anything about location or related just tell me. If there is any more information I can provide I will gladly do so.
Here is a sampler of what I am talking about:
<!DOCTYPE html>
<html>
<head>
<!--style>
.slideshow{
z-index: 500;
position: relative;
height: 100vh;
width: 100%;
margin:auto;
overflow: hidden;
}
.slideshow > p{
position: absolute;
color: white;
background-color: black;
padding: 5px;
font-size: 24px;
margin: 0;
}
.mySlides1,.mySlides2{
width: 100%;
height: 100vh;
overflow: hidden;
object-fit: cover;
object-position: center center;
}
.slides_button{
position: absolute;
display: inline-block;
border: none;
padding:8px 16px;
cursor: pointer;
background-color: white;
}
.slides_button:hover{
background-color: black;
color: white;
}
.display_left{
position: absolute;
bottom: 50%;
left: 0%;
}
.display_right{
position: absolute;
bottom: 50%;
right: 0;
}
</style-->
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="SCRIPT HERE"></script> <script>
$(function () {
var blockScroller = $("#main-wrap").blockScroll();
$(function () {
function showDivs(n, show) {
var i;
var x = document.getElementsByClassName("mySlides"+show);
if (n > x.length) {slideIndex = 1};
if (n < 1) {slideIndex = x.length};
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
};
x[slideIndex-1].style.display = "block";
console.log(x[slideIndex-1])
};
var slideIndex = 1;
showDivs(2, 1);
showDivs(2, 2);
$(function () {
function plusDivs(n, show) {
showDivs(slideIndex += n, show);
};
})
});
});
</script>
<div id="main-wrap">
<div style="height:100vh;background-image:url(https://www.planwallpaper.com/static/images/518164-backgrounds.jpg)">
</div>
<div class="slideshow">
<p>slideshow 1</p>
<img class="mySlides1" src="https://cdn.pixabay.com/photo/2015/10/31/00/43/background-texture-1014963_960_720.jpg">
<button class="slides_button display_left" onclick="plusDivs(-1,1)">❮</button>
<button class="slides_button display_right" onclick="plusDivs(1,1)">❯</button>
<img class="mySlides1" src="https://image.freepik.com/free-vector/orange-geometric-background-with-halftone-dots_1035-7243.jpg">
<img class="mySlides1" src="https://cdn.pixabay.com/photo/2015/10/31/00/43/background-texture-1014963_960_720.jpg">
<img class="mySlides1" src="https://image.freepik.com/free-vector/orange-geometric-background-with-halftone-dots_1035-7243.jpg">
</div>
<div class="slideshow">
<p>slideshow 2</p>
<img class="mySlides2" src="https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg">
<button class="slides_button display_left" onclick="plusDivs(-1,2)">❮</button>
<button class="slides_button display_right" onclick="plusDivs(1,2)">❯</button>
<img class="mySlides2" src="http://images.all-free-download.com/images/graphiclarge/flower_pink_background_vector_art_148632.jpg">
<img class="mySlides2" src="http://images.all-free-download.com/images/graphiclarge/clouds_in_sky_background_192377.jpg">
</div>
</div>
</body>
</html>
blockerScoll js script

not work because show in showDivs(slideIndex, show); is undefined, it should be like this
showDivs(slideIndex, 1);
showDivs(slideIndex, 2);
demo
//This is only for the block scrolling. If you move this
//ABOVE the previous section, then it will take over.
$(function() {
var blockScroller = $("#main-wrap").blockScroll();
});
//This is the slideshow section. Move this above the block scroll
//and this works.
function showDivs(n, show) {
var i;
var x = document.getElementsByClassName("mySlides" + show);
if(n > x.length) {
slideIndex = 1
}
if(n < 1) {
slideIndex = x.length
}
for(i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "inline";
//console.log(x[slideIndex - 1])
}
var slideIndex = 1;
showDivs(slideIndex, 1);
showDivs(slideIndex, 2);
function plusDivs(n, show) {
showDivs(slideIndex += n, show);
}
.slideshow {
z-index: 500;
position: relative;
height: 100vh;
width: 100%;
margin: auto;
overflow: hidden;
}
.slideshow>p {
position: absolute;
color: white;
background-color: black;
padding: 5px;
font-size: 24px;
margin: 0;
}
.mySlides1,
.mySlides2 {
width: 100%;
height: 100vh;
overflow: hidden;
object-fit: cover;
object-position: center center;
}
.slides_button {
position: absolute;
display: inline-block;
border: none;
padding: 8px 16px;
cursor: pointer;
background-color: white;
}
.slides_button:hover {
background-color: black;
color: white;
}
.display_left {
position: absolute;
bottom: 50%;
left: 0%;
}
.display_right {
position: absolute;
bottom: 50%;
right: 0;
}
<link rel="stylesheet" type="text/css" href="//www.dominikgorecki.com/p/block-scroll/blockScroll.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//www.dominikgorecki.com/p/block-scroll/js/blockScroll.js"></script>
<div id="main-wrap">
<div style="height:100vh;background-image:url(https://www.planwallpaper.com/static/images/518164-backgrounds.jpg)">
</div>
<div class="slideshow">
<p>slideshow 1</p>
<img class="mySlides1" src="https://cdn.pixabay.com/photo/2015/10/31/00/43/background-texture-1014963_960_720.jpg">
<button class="slides_button display_left" onclick="plusDivs(-1,1)">❮</button>
<button class="slides_button display_right" onclick="plusDivs(1,1)">❯</button>
<img class="mySlides1" src="https://image.freepik.com/free-vector/orange-geometric-background-with-halftone-dots_1035-7243.jpg">
<img class="mySlides1" src="https://cdn.pixabay.com/photo/2015/10/31/00/43/background-texture-1014963_960_720.jpg">
<img class="mySlides1" src="https://image.freepik.com/free-vector/orange-geometric-background-with-halftone-dots_1035-7243.jpg">
</div>
<div class="slideshow">
<p>slideshow 2</p>
<img class="mySlides2" src="https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg">
<button class="slides_button display_left" onclick="plusDivs(-1,2)">❮</button>
<button class="slides_button display_right" onclick="plusDivs(1,2)">❯</button>
<img class="mySlides2" src="http://images.all-free-download.com/images/graphiclarge/flower_pink_background_vector_art_148632.jpg">
<img class="mySlides2" src="http://images.all-free-download.com/images/graphiclarge/clouds_in_sky_background_192377.jpg">
</div>
</div>