Editing JavaScript code for W3School slideshow

Editing JavaScript code for W3School slideshow - javascript

I want to add a slideshow from W3School to my site, the problem is I need more than 1 slideshow and the JavaScript code from W3School works for a single slideshow only.
Searching for an answer here on StackOverflow I've found an user who had the same problem as me and we did the same things as well to try to adapt the script to our needs...without sucess obviously.
A user answered posting an edited script that should works for more than a slideshow and I'm trying to use that script for my slideshows but for some reason it works for only 1 slideshow.
Here is the answer I am referring to: https://stackoverflow.com/a/46727534/9276807
And here are my slideshows:
var slideIndex = new Array(2);
slideIndex[0] = 1;
slideIndex[1] = 1;
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, slideshownumber) {
slideIndex[slideshownumber] = slideIndex[slideshownumber] + n;
showSlides(slideIndex[slideshownumber], slideshownumber);
}
function currentSlide(n, slideshownumber) {
slideIndex[slideshownumber] = n;
showSlides(slideIndex[slideshownumber], slideshownumber);
}
function showSlides(n, slideshownumber) {
var i;
var slideshowname = "slider" + slideshownumber;
var slides = document.getElementsByName(slideshowname);
if (n > slides.length) {
slideIndex[slideshownumber] = 1;
}
if (n < 1) {
slideIndex[slideshownumber] = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex[slideshownumber] - 1].style.display = "block";
}
.tooltip {
position: relative;
display: inline-block;
padding: 0;
margin: 0;
cursor: pointer;
color: #000000;
}
.tooltip:hover .info,
.tooltip:focus .info {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
}
.info {
box-sizing: border-box;
position: absolute;
bottom: -980px;
left: 95px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info:before {
position: absolute;
content: '';
width: 100%;
height: 14px;
bottom: -14px;
left: 0;
}
.info:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 378px;
right: 494px;
margin-left: -5px;
background: #000000;
}
.slideshow-container {
width: 100%;
height: 300px;
position: relative;
margin: 0;
padding: 0;
}
.mySlides {
display: none;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.slideshow-container .imgsl {
position: relative;
width: 100%;
height: 300px;
}
.slideshow-container .cptn {
background-color: rgba(242, 242, 242, 0.5);
color: #FFFFFF;
font-size: 25px;
padding: 8px 0 15px 0;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 140px;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(242, 242, 242, 0.3);
}
.text {
display: block;
padding: 14px 17px 35px 17px;
color: #8d7200;
}
.more {
display: inline;
position: relative;
bottom: 20px;
left: 215px;
margin: 0;
padding: 3px 10px;
font-family: 'Times New Roman', sans-serif;
text-decoration: none;
color: green;
font-size: 20px;
font-weight: bold;
border: 2px solid green;
border-radius: 5px;
transition: background-color 0.5s, color 0.5s;
}
.more:hover,
.more:focus {
background-color: green;
color: #FFFFFF;
}
<div onclick="void(0);" class="tooltip">Trasimeno
<div class="info">
<div class="slideshow-container">
<div class="mySlides fade" name="slider0">
<img class="imgsl" src="trasimeno.jpg">
<div class="cptn">Passignano Sul Trasimeno</div>
</div>
<div class="mySlides fade" name="slider0">
<img class="imgsl" src="trasimeno2.jpg">
<div class="cptn">Castello del Leone, Castiglione del Lago</div>
</div>
<div class="mySlides fade" name="slider0">
<img class="imgsl" src="trasimeno3.jpg">
<div class="cptn">Castello Borgia, Passignano sul Trasimeno</div>
</div>
<div class="mySlides fade" name="slider0">
<img class="imgsl" src="trasimeno4.jpg">
<div class="cptn">Castello Borgia, Passignano sul Trasimeno</div>
</div>
<a class="prev" onclick="plusSlides(-1,0)">❮</a>
<a class="next" onclick="plusSlides(1,0)">❯</a>
</div>
<script>
currentSlide(1, 0)
</script>
<div class="text">...</div>
<a class="more" href="#" target="_blank">More</a>
</div>
</div>
, il lago di
<div onclick="void(0);" class="tooltip">Piediluco
<div class="info">
<div class="slideshow-container">
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco2.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco3.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco4.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<a class="prev" onclick="plusSlides2(-1,1)">❮</a>
<a class="next" onclick="plusSlides2(1,1)">❯</a>
</div>
<script>
currentSlide(1, 1)
</script>
<div class="text">...</div>
<a class="more" href="#">More</a>
</div>
</div>
Can someone help me to understand where I'm doing wrong?
Thanks in advance!

You are getting the Error:
"Uncaught ReferenceError: currentSlide is not
So, currentSlide() is trying to invoke before it is defined!
Make sure your JS codes (defining function currentSlide(n, slideshownumber){}... ) are executing first before it is invoked.
Also, Invoke plusSlides() not plusSlides2() for Piediluco slide:
<div onclick="void(0);" class="tooltip">Piediluco
<div class="info">
<div class="slideshow-container">
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco2.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco3.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<div class="mySlides fade" name="slider1">
<img class="imgsl" src="piediluco4.jpg">
<div class="cptn">Lago di Piediluco</div>
</div>
<a class="prev" onclick="plusSlides(-1,1)">❮</a>
<a class="next" onclick="plusSlides(1,1)">❯</a>
</div>
<script> currentSlide(1,1)</script>
<div class="text">...</div>
<a class="more" href="#">More</a>
</div>
</div>
also change:
<script> $(document).ready(function(){ currentSlide(1,1) })</script>

Related

Multiple Slider With same Class and same Controller using shopify liquid and javascript

I want to make multiple slider but slider should stop on last slide of first slider.
as well for all slider's last slide.
i'm creating dynamic sections in liquid file but my basic need is something like this. how can i solve that?
My Need: Shopify dynamic section with multiple block. each block contain sliders. how can i start and stop slider for perticular block. if i add section twice. or block twice. all slider work same as below.
`<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.myModal{
display:none;}
</style>
<body>
<h2 style="text-align:center">Lightbox</h2>
<div>
<button onclick="activeMe();">Here click </button>
<div id="myModal" class="">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
</div>
<div id="left">
<button onclick="activeMe();">Here click </button>
<div id="myModal" class="">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
</div>
</div>
</div>
<script>
function activeMe(){
var element = document.getElementById("myModal");
element.classList.toggle("myModal");
}
function openModal() {
document.getElementByClassName("myModal").style.display = "block";
}
function closeModal() {
document.getElementByClassName("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = slides.length}
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
`

how can i make my navbar and multiple carousel responsive

i made a multiple carousel header and everything looks pretty good in my desktop but when the device size changes the images overlap each other and the navbar is not responsive either,enter image description here i have tried everything but i am not able to fix it pls help
my problem:
click here to see my problem
this is the code:
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none; }
.mySlides1 {display: none; }
.mySlides2 {display: none; }
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
}
/* The dots/bullets/indicators */
.dot2 {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot1 {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.btn {
position: absolute;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #c7a343;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.btn:hover {
background-color: black;
color: white;
}
.champu{
position: absolute;
top: 6em;
left: 10em;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
background-color:#9caaa9;
}
.img{
width: 40em;
height: 30em !important;
object-fit: cover !important;
}
</style>
<div class="row">
<div class="col-md-12" style="background-image: url(background-.jpg);">
<div class="col-md-4">
<div class="slideshow-container" style=" padding-left:0 !important; margin: 0 !important; padding: 0 !important;">
<div class="mySlides fade">
<img src="slider-pics/living-room/pic2.png" style="margin-top:9em; height: 30em !important; padding-left:1em !important; width: 37em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Living Room</h3>
<a href="collections-livingroom.html">
<button class="btn" style="top: 85%; left: 50%;">View Collection</button>
</a>
</div>
<div class="mySlides fade">
<img src="slider-pics/living-room/pic1.png" style="margin-top:9em; height: 30em !important; padding-left:1em !important; width: 37em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Living Room</h3>
<a href="collections-livingroom.html">
<button class="btn" style="top: 85%; left: 50%;">View Collection</button>
</a>
</div>
<div class="mySlides fade">
<img src="slider-pics/living-room/pic3.png" style="margin-top:9em; height: 30em !important; padding-left:1em !important; width: 37em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Living Room</h3>
<a href="collections-livingroom.html">
<button class="btn" style="top: 85%; left: 50%;">View Collection</button>
</a>
</div>
<div class="mySlides fade">
<img src="slider-pics/living-room/pic4.png" style="margin-top:9em; height: 30em !important; padding-left:1em !important; width: 37em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Living Room</h3>
<a href="collections-livingroom.html">
<button class="btn" style="top: 85%; left: 50%;">View Collection</button>
</a>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div><!-- col-md-4-->
<div class="col-md-4">
<div class="slideshow-container" style="width: 43em !important; padding-right:4em !important; padding-left:0.2em; margin-left:0 !important;">
<div class="mySlides1 fade">
<img src="slider-pics/bedroom/pic2.jpg" style="margin-top:9em; width: 45em !important; height: 30em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Bedroom</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
<div class="mySlides1 fade">
<img src="slider-pics/bedroom/pic1.jpg" style="margin-top:9em; width: 45em !important; height: 30em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Bedroom</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
<div class="mySlides1 fade">
<img src="slider-pics/bedroom/pic3.jpg" style="margin-top:9em; width: 45em !important; height: 30em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Bedroom</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
<div class="mySlides1 fade">
<img src="slider-pics/bedroom/pic4.jpg" style="margin-top:9em; width: 45em !important; height: 30em !important;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Bedroom</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot1"></span>
<span class="dot1"></span>
<span class="dot1"></span>
<span class="dot1"></span>
</div>
</div><!-- col-md-4-->
<div class="col-md-4">
<div class="slideshow-container" style="padding-right:13em !important; width:50em; padding-left:1em;">
<div class="mySlides2 fade">
<img src="slider-pics/outdoor/pic2.jpg" style="margin-top:9em;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Outdoor</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
<div class="mySlides2 fade">
<img src="slider-pics/outdoor/pic1.jpg" style="margin-top:9em;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Outdoor</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
<div class="mySlides2 fade">
<img src="slider-pics/outdoor/pic3.jpg" style="margin-top:9em;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Outdoor</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
<div class="mySlides2 fade">
<img src="slider-pics/outdoor/pic4.jpg" style="margin-top:9em;" class="img">
<h3 class="champu" style="top: 40%; left: 25%;">Outdoor</h3>
<button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot2"></span>
<span class="dot2"></span>
<span class="dot2"></span>
<span class="dot2"></span>
</div>
</div><!-- col-md-4-->
</div> <!-- col-md-12-->
</div><!-- row -->
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 3000);
}
var slideIndex1 = 0;
showSlides1();
function showSlides1() {
var i;
var slides = document.getElementsByClassName("mySlides1");
var dots = document.getElementsByClassName("dot1");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex1++;
if (slideIndex1 > slides.length) {slideIndex1 = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex1-1].style.display = "block";
dots[slideIndex1-1].className += " active";
setTimeout(showSlides1, 2000);
}
var slideIndex2 = 0;
showSlides2();
function showSlides2() {
var i;
var slides = document.getElementsByClassName("mySlides2");
var dots = document.getElementsByClassName("dot2");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex2++;
if (slideIndex2 > slides.length) {slideIndex2 = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex2-1].style.display = "block";
dots[slideIndex2-1].className += " active";
setTimeout(showSlides2, 4000);
}
</script>

Use media query in CSS styling so you can design it as per the device size so that your images don't overlap
You can go through this for reference:
https://www.w3schools.com/Css/css3_mediaqueries_ex.asp

Why is image flashing between slides on mobile?

First, I'm showing an error that reads:
Uncaught TypeError: Cannot read property 'className' of undefined
Second, as I tap through the slideshow on mobile, I'm getting a weird flash between images. I've tried to understand what the error message means, but I don't understand it. Does this mean I need to get rid of a class somewhere?
What exactly is the className that is not defined?
var 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) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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";
}
* {box-sizing:border-box}
body {
margin: 0;
box-sizing: border-box;
padding: 60px;
overflow-x: hidden;
-webkit-transform: translateZ(0);
background: white;
}
.title {
line-height: 150%;
font-size: 17px;
font-family: 'helvetica', sans-serif;
font-weight: 700;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 22vw;
display: none;
}
/* Slideshow container */
.slideshow-container {
max-height: calc(100vh - 120px);
height: calc(100vh - 120px);
display: flex;
justify-content: flex-end;
margin: 0px;
line-height: 0%;
}
.slideshow-container img {
object-fit: cover;
}
/* Hide the images by default */
.mySlides {
display: none;
max-height: calc(100vh - 120px);
height: calc(100vh - 120px);
line-height: 0%;
-webkit-backface-visibility: hidden;
}
section img {
width: calc(100vw - 120px);
height: calc(100vh - 120px);
}
.contain img {
object-fit: contain;
object-position: 100% 50%;
line-height: 0%;
}
img {
height: 100%;
max-width: 100%;
}
/* Next & previous buttons */
.prev {
cursor: pointer;
display: none;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
border-radius: 3px 0 0 3px;
top: 60px;
position: absolute;
width: calc(100vw - 120px);
height: calc(100vh - 120px);
-webkit-backface-visibility: hidden;
}
.next:active {
-webkit-backface-visibility: hidden;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: transparent;
cursor: pointer;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: ;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: transparent;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1s;
animation-name: fade;
animation-duration: 1s;
}
#-webkit-keyframes fade {
0% {opacity: 1}
100% {opacity: 1}
}
#keyframes fade {
0% {opacity: 1}
100% {opacity: 1}
}
#media only screen and (max-width: 720px) {
* {box-sizing: border-box}
body {
padding: 0px;
}
.mySlides {
display: flex;
max-height: calc(100vh - 20px);
height: calc(100vh - 90px);
line-height: 0%;
overflow-x: hidden;
}
section img {
width: calc(100vw - 20px);
height: calc(100vh - 90px);
margin: 10px;
}
.next {
border-radius: 0;
top: 0px;
position: absolute;
width: 100vw;
background: transparent;
height: calc(100vh - 90px);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.next:hover {
background: rgba(0,0,0,0);
}
.next:active {
background: rgba(0,0,0,0);
-webkit-backface-visibility: hidden;
}
.contain img {
object-fit: contain;
background: rgba(0,0,0,0);
}
}
#media only screen and (max-height: 520px) {
body {
}
.slideshow-container {
max-height: calc(100vh - 0px);
height: calc(100vh - 120px);
margin: 0px;
line-height: 0%;
}
.mySlides {
max-height: calc(100vh - 0px);
height: calc(100vh - 0px);
line-height: 0%;
overflow-x: hidden;
}
section img {
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.next {
border-radius: 0;
top: 0px;
position: absolute;
width: 100vw;
background: rgba(0,0,0,0);
height: calc(100vh - 0px);
}
.next:hover {
background: rgba(0,0,0,0);
}
.next:active {
}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.00.17+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.09.46+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.14.05+AM.png" alt>
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.15.57+AM.png">
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.11.45+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.12.32+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.14.05+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.13.40+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.45.03+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.12.54+AM.png" >
</section>
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<section class="contain">
<img src="https://assets.codepen.io/226140/Screen+Shot+2020-08-09+at+2.42.28+AM.png" >
</section>
<div class="text"></div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)"></a>
</div>
<br>
<!--
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
The dots/circles -->

I think the 'classname' you haven't defined is in dots[i].className = dots[i].className.replace("active", "");

Two css code is overleapping each other and can't see one of them

I want to create a webpage where i can see my videos and some pictures from something. I get some free examples from w3schools for the gallery page and some video embedding code from somewhere else. These codes are working on their own but i can't figure out where is the problem exactly when i put them together.
In the style tags there is a
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
The problem lies in here i think.
Here is my code
/* video */
$(document).ready(function() {
$('#videos a').each(function() {
var data = $(this).attr('data');
$(this).append('<img src="http://img.youtube.com/vi/'+data+'/maxresdefault.jpg" />');
});
$('#videos a').click(function() {
var data = $(this).attr('data');
$('#loader').append('<iframe src="https://www.youtube.com/embed/'+data+'" frameborder="0" allowfullscreen></iframe>');
$('#overlay').fadeIn(250);
});
$('#close').click(function() {
$('#overlay').fadeOut(250,function() {
$('#loader').html('');
});
});
});
/* VIDEÓ */
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
#videos a {
display: block;
width: 25%;
margin-bottom: 20px;
box-sizing: border-box;
padding: 0 10px;
float: left;
cursor: pointer;
text-decoration: none;
outline: 0;
}
#videos a:hover {
opacity: 0.7;
}
#videos a img {
width: 100%;
height: auto;
}
#overlay {
background: rgba(0,0,0,0.8);
position:fixed;
top: 0;
right: 0;
left:0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: none;
}
#overlay .modal {
background: #fff;
border-radius: 5px;
width: 90%;
margin: 100px auto;
max-width: 800px;
min-height: 100px;
position: relative;
padding: 30px 20px 15px;
}
#overlay .modal #close {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
#overlay iframe {
width: 100%;
}
/* VIDEÓ VÉGE */
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,300' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<h1 style="text-align:center">Lightbox</h1>
<div class="row">
<div class="column">
<img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_snow.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<br>
<h2 style="text-align:center">Videos</h2>
<div id="videos">
<a data="uT6YOI6JcRs"></a>
<a data="B9FzVhw8_bY"></a>
<a data="d0K436vUM4w"></a>
<a data="PhbWIFDqQfk"></a>
</div>
<div id="overlay">
<div class="modal">
<div id="close">X</div>
<div id="loader"></div>
</div>
</div>
I don't get errors. I wanted to be able to click to the images separated from the videos and vice-versa. If you delete the css from VIDEÓ to VIDEÓ VÉGE You can see that the image gallery is working. And if you delete the css from VIDEÓ VÉGE to the bottom of the style you can see that the video page is working too.
I tried to modify the z-indexes for both of the css codes.

Okay the problem was that i used two of the same .modal in the css. I renamed the video's css modal to modale in both the css and in the html and everything is working. Thank you all!

Using multiple lightboxes on the same List causing problems

// Open the Modal
function openModal() {
document.getElementById('myModal').style.display = "block";
}
// Close the Modal
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var 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) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
/*Main list*/
#list ul{width:100%; height:100%; border-radius:0px; list-style-type:none; margin:5% 0% 0% 0%; overflow:hidden; padding:0% 0% 4% 0%; background:rgba(240,240,240,1);}
#list li{box-shadow:0px 10px 10px 0px rgba(0,0,0,0.2); transition:0.1s; border-radius:0px 0px 10px 10px; border:2px solid black; color:black; background:rgba(255,255,255,1); width:70%; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:0.9vw; margin:0% 0% 5% 0%; overflow:hidden; word-wrap:break-all; word-break:break-word; padding:0% 0% 0% 0%; float:left; text-align:center; line-height:1.2; }
.row > .column {
Padding:0%; margin:0;
width:30%; height:auto; float:left;
}
.column img{width:95%; height:auto; margin:0% 0% 0% 0%; float:left;}
.row:after {
content: "";
display: table;
clear: both;
}
/* Create four equal columns that floats next to eachother */
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Caption text */
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div id="list">
<ul>
<li>
<!-- Images used to open the lightbox -->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
Some text
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</li>
<li>
<!-- Images used to open the lightbox -->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_snow.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
Some text
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</li>
</ul>
</div>
I have a ul which contains multiple li and each li has a main image.
Once the user clicks on the image, a lightbox opens for the user.
I've implemented the example found on W3C Schools and it works very well.
Except for one important thing:
When I click on the image on my second li, it shows the content of my first li.
How can I separate the content on a large number of list items without having to change the id/class?

The example you used is made for one slider. When you tried to duplicate, you duplicated the element id "myModal" which you should not do. ID's are meant to be unique.
Likewise, the javascript functions were written to act on one modal with that ID. So one way to fix this is to re-write the functions to pass the modal ID. That way the functions can manipulate the correct slider block. Here is an example:
// Open the Modal
function openModal(id) {
document.getElementById(id).style.display = "block";
}
// Close the Modal
function closeModal(id) {
document.getElementById(id).style.display = "none";
}
var slideIndex = 1;
showSlides('myModal', slideIndex);
showSlides('myModal2', slideIndex);
// Next/previous controls
function plusSlides(id, n) {
showSlides(id, slideIndex += n);
}
// Thumbnail image controls
function currentSlide(id, n) {
showSlides(id, slideIndex = n);
}
function showSlides(id, n) {
var i;
var modalDiv = document.getElementById(id);
var slides = modalDiv.getElementsByClassName("mySlides");
/* var dots = modalDiv.getElementsByClassName("demo"); */
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"; */
}
/*Main list*/
#list ul{width:100%; height:100%; border-radius:0px; list-style-type:none; margin:5% 0% 0% 0%; overflow:hidden; padding:0% 0% 4% 0%; background:rgba(240,240,240,1);}
#list li{box-shadow:0px 10px 10px 0px rgba(0,0,0,0.2); transition:0.1s; border-radius:0px 0px 10px 10px; border:2px solid black; color:black; background:rgba(255,255,255,1); width:70%; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:0.9vw; margin:0% 0% 5% 0%; overflow:hidden; word-wrap:break-all; word-break:break-word; padding:0% 0% 0% 0%; float:left; text-align:center; line-height:1.2; }
.row > .column {
Padding:0%; margin:0;
width:30%; height:auto; float:left;
}
.column img{width:95%; height:auto; margin:0% 0% 0% 0%; float:left;}
.row:after {
content: "";
display: table;
clear: both;
}
/* Create four equal columns that floats next to eachother */
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Caption text */
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div id="list">
<ul>
<li>
<!-- Images used to open the lightbox -->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" onclick="openModal('myModal');currentSlide('myModal',1)" class="hover-shadow">
</div>
Some text
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal('myModal')">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides('myModal',-1)">❮</a>
<a class="next" onclick="plusSlides('myModal',1)">❯</a>
</div>
</div>
</li>
<li>
<!-- Images used to open the lightbox -->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_snow.jpg" onclick="openModal('myModal2');currentSlide('myModal',1)" class="hover-shadow">
</div>
Some text
</div>
<!-- The Modal/Lightbox -->
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal('myModal2')">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides('myModal2',-1)">❮</a>
<a class="next" onclick="plusSlides('myModal2',1)">❯</a>
</div>
</div>
</li>
</ul>
</div>
<script>
</script>

Develop Reference

JavaScript is the programming language of the Web.

Editing JavaScript code for W3School slideshow - javascript

Related

Multiple Slider With same Class and same Controller using shopify liquid and javascript

how can i make my navbar and multiple carousel responsive

Why is image flashing between slides on mobile?

Two css code is overleapping each other and can't see one of them

Using multiple lightboxes on the same List causing problems

Categories

Resources