I have this worksheet to complete and one of the questions is to explain this code and to add one more image slideshow.
I don't really understand the javascript code and a bit confused as to how to add another image slideshow.
I understand the HTML and css but the javascript is confusing.
Any help would be appreciated.
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://homepages.cae.wisc.edu/~ece533/images/sails.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
I updated the code using an IDE to be human readable.
I believe it is pretty straight forward now. If you don't understand specific parts you can ask me in comments. (This not quality code, I believe it's a learning exercise so I kept it as it is)
var slideIndex = [1, 1, 1];
var slideContainerSelectors = ["mySlides1", "mySlides2", "mySlides3"]
function showSlides(nextslideIndex, slideContainerIndex) {
var i;
var slideContainerElement = document.getElementsByClassName(slideContainerSelectors[slideContainerIndex]);
if (nextslideIndex > slideContainerElement.length) {
slideIndex[slideContainerIndex] = 1
}
if (nextslideIndex < 1) {
slideIndex[slideContainerIndex] = slideContainerElement.length
}
for (i = 0; i < slideContainerElement.length; i++) {
slideContainerElement[i].style.display = "none";
}
slideContainerElement[slideIndex[slideContainerIndex] - 1].style.display = "block";
}
function plusSlides(increment, index) {
showSlides(slideIndex[index] += increment, index);
//----------------------------^ slideIndex[index] = slideIndex[index] + increment
}
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
* {
box-sizing: border-box
}
.mySlides1,
.mySlides2 {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover,
.next:hover {
background-color: #f1f1f1;
color: black;
}
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://homepages.cae.wisc.edu/~ece533/images/sails.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<p>Slideshow 3:</p>
<div class="slideshow-container">
<div class="mySlides3">
<img src="https://picsum.photos/200/300" style="width:100%">
</div>
<div class="mySlides3">
<img src="https://picsum.photos/id/237/200/300" style="width:100%">
</div>
<div class="mySlides3">
<img src="https://picsum.photos/id/238/200/300" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
Related
I basically copied code of multiple slideshows from w3schools https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple
The first two slideshows are working just fine but, the third slideshow I tried adding afterwards isn't displaying at all and neither the images seems to be loading on the inspection page.
I wanted images to load lazily as well
Please help me with this.
Any help is appreciated. Thanks in advance.
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides1">
<img loading="lazy" src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img loading="lazy" src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img loading="lazy" src="img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2">
<img loading="lazy" src="img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img loading="lazy" src="img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img loading="lazy" src="img_band_ny.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<div class="slideshow-container">
<div class="mySlides3">
<img loading="lazy" src="https://m.media-amazon.com/images/I/313CFbI-YjL._SX512_.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img loading="lazy" src="https://m.media-amazon.com/images/I/41zOmaUKehL._SX512_.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img loading="lazy" src="https://m.media-amazon.com/images/I/41ePfTRprsL._SX512_.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img loading="lazy" src="https://m.media-amazon.com/images/I/31bjKqlul6L._SX512_.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img loading="lazy" src="https://m.media-amazon.com/images/I/311m3klP3oL._SX512_.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img loading="lazy" src="https://m.media-amazon.com/images/I/315hICqUx0L._SX512_.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
</body>
</html>
Your third slideshow is not functioning because when plusSlides is called on the third slideshow, it references index 2 of the array slideIndex. However, you've defined the array only up to index 1: var slideIndex = [1, 1];. Changing this line to var slideIndex = [1, 1, 1]; fixes your third slideshow.
Your problem is that the variable slideIndex only have two positions:
var slideIndex = [1,1];
For solve the problem, add one position more to the array:
var slideIndex = [1,1,1];
Greetings.
I try to make a slideshow gallery for my project, then i found this tutorial https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp it worked actually but only for 1 slideshow gallery, when i try to make the second one, it didn't work like i expected, it doesn't make 2 slideshow gallery my code just make the duplicate of the first one here is my code:
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;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
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;
}
/* 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;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="pict/paskib1.jpeg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="pict/paskib2.jpeg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="pict/paskib3.jpeg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="pict/paskib4.jpeg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="pict/paskib5.jpeg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="pict/paskib6.jpeg" 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="row">
<div class="column">
<img class="demo cursor" src="pict/paskib1.jpeg" style="width:100%; height : 37px" onclick="currentSlide(1)" alt="PASKIBRA - SMK PGRI 11 CILEDUG">
</div>
<div class="column">
<img class="demo cursor" src="pict/paskib2.jpeg" style="width:100%" onclick="currentSlide(2)" alt="PASKIBRA - SMK PGRI 11 CILEDUG">
</div>
<div class="column">
<img class="demo cursor" src="pict/paskib3.jpeg" style="width:100%" onclick="currentSlide(3)" alt="PASKIBRA - SMK PGRI 11 CILEDUG">
</div>
<div class="column">
<img class="demo cursor" src="pict/paskib4.jpeg" style="width:100%" onclick="currentSlide(4)" alt="PASKIBRA - SMK PGRI 11 CILEDUG">
</div>
<div class="column">
<img class="demo cursor" src="pict/paskib5.jpeg" style="width:100%" onclick="currentSlide(5)" alt="PASKIBRA - SMK PGRI 11 CILEDUG">
</div>
<div class="column">
<img class="demo cursor" src="pict/paskib6.jpeg" style="width:100%" onclick="currentSlide(5)" alt="PASKIBRA - SMK PGRI 11 CILEDUG">
</div>
</div>
</div>
You cannot simple duplicate your html code. If you want control each gallery with same javascript code you have to wrap your html gallary into a container element with an unique identfier. Here an idea:
<div id="gallery01">
<!-- Put your html code for gallery here -->
</div>
<div id="gallery02">
<!-- Put your html code for gallery here -->
</div>
Then you have to change your javascript main function so, that you pass theses id.
Example:
function showSlides(currentClickobj, n) {
var containerElement = getParentContainer(currentCklickObj);
var i;
/* Replace in your code `document.' by 'containerElement.' */
var slides = containerElement.getElementsByClassName("mySlides");
var dots =containerElement.getElementsByClassName("demo");
var captionText = containerElement.getElementById("caption");
...
}
Because you don't use jquery you need a function that returns the container element.
getParentContainer(childNode) {
/* Put your code here */
}
I am using this tutorial. So I have a navigation bar with image links that hides when the user scrolls down.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_hide_scroll
So this works, though.
However, when I scroll down, the images in the body show above the navigation bar. The text in the body is unaffected, however. So my question is how to stop this from happening. Another thing is how do I make the headline which is the orange "Sample Queen" to show up below the navigation bar, because it is now hidden underneath it. I want the content to start below the navigation bar
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="main.css">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-190px";
}
prevScrollpos = currentScrollPos;
}
</script>
<body style="font-family:Century Gothic;">
<div id="navbar" style="background-color:#f1f1f1;padding:15px;text-align: center;">
<img src="/Index Files/insta.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/sample.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/asample.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/amazon.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/sample.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/sampleos.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
</div>
<h1><font color="orange">sample Queen</font>
</h1>
<h2>sample Queen is a small soap businets </h2>
</head>
<p>________</p>
<div class="slideshow-container">
<div class="mySlides1" >
<img src="/sample Queen/fm1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm4.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm5.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm6.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm7.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>________</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="/sample Queen/nd1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample Queen/nd2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample Queen/nd3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample Queen/nd4.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<p>________</p>
<div class="slideshow-container">
<div class="mySlides3">
<img src="/sample Queen/gel1.png" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample Queen/herbal1.png" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
<div class="slideshow-container">
<p>________</p>
<div class="mySlides5">
<img src="/sample Queen/hs.jpg" id="border" style="width:100%">
</div>
</div>
<p>________</p>
<div class="slideshow-container">
<div class="mySlides4">
<img src="/sample Queen/hairmask1.png" id="border" style="width:100%">
</div>
<div class="mySlides4">
<img src="/sample Queen/lip.png" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</a>
</div>
<p></p>
<div id="imgGrey" style="background-color:#f1f1f1;padding:15px;text-align: center;">
</div>
</div>
<script>
var slideIndex = [1,1,1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
showSlides(1, 3);
showSlides(1, 4);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 2) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
</body>
</html>
h1 {
text-align: center;
font-family: "Century Gothic";
font-size:50px;
font-weight: bold;
}
p {
color: lightgrey;
text-align: center;
font-family: "Century Gothic";
font-size:40px;
}
h2 {
color: black;
text-align: center;
font-family: "Century Gothic";
font-size:20px;
padding-right: 15px;
padding-left: 15px;
}
/* Now disable grayscale on hover */
#border:hover {
filter: none;
-webkit-filter: grayscale(0);
}
#border {
border-radius: 10px;
text-align: center;
vertical-align: middle;
filter: gray; /* For IE6-9 */
filter: grayscale(1); /* For Microsoft Edge and Firefox 35+ */
-webkit-filter: grayscale(1); /* For Google Chrome, Safari 6+ & Opera 15+ */
}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
padding-right: 15px;
padding-left: 15px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 20px;
color: lightgrey;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 10px 10px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: lightgrey;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: orange;
}
#navbar {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
Please add the below lines to your CSS.
#navbar{
z-index: 1000;
}
body{
padding-top: 200px;
}
You may control the padding-top value according to the height of your navbar.
I'm trying to add multiple slideshows to one page but am having some difficulty. I can add two functioning slideshows but when I add a third everything breaks.
Can someone please suggest a solution to add multiple slideshows to one page?
Here is the codepen: https://codepen.io/anon/pen/YmWNqMc
HTML:
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)"></a>
<a class="next" onclick="plusSlides(1, 0)"></a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="https://www.w3schools.com/howto/img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://www.w3schools.com/howto/img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://www.w3schools.com/howto/img_band_ny.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)"></a>
<a class="next" onclick="plusSlides(1, 1)"></a>
</div>
CSS:
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 4%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
height:100%;
width:49.5%;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
color: black;
}
JAVASCRIPT:
var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
Updated your code and 3 slideshows can run easily.
You just have to adapt your js code (like I did);
Add class name of the 3rd slideshow,
Call showSlides(1, id);.
var slideIndex = [1,1,1];
var slideId = ["slide", "slide2", "slide3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
* {box-sizing: border-box}
.mySlides{display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 4%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
height:100%;
width:49.5%;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
color: black;
}
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides slide">
<img src="https://picsum.photos/150/150" style="width:100%">
</div>
<div class="mySlides slide">
<img src="https://picsum.photos/150/151" style="width:100%">
</div>
<div class="mySlides slide">
<img src="https://picsum.photos/151/150" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">prev</a>
<a class="next" onclick="plusSlides(1, 0)">next</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides slide2">
<img src="https://picsum.photos/152/150" style="width:100%">
</div>
<div class="mySlides slide2">
<img src="https://picsum.photos/150/152" style="width:100%">
</div>
<div class="mySlides slide2">
<img src="https://picsum.photos/150/154" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">prev</a>
<a class="next" onclick="plusSlides(1, 1)">next</a>
</div>
<p>Slideshow 3:</p>
<div class="slideshow-container">
<div class="mySlides slide3">
<img src="https://picsum.photos/152/151" style="width:100%">
</div>
<div class="mySlides slide3">
<img src="https://picsum.photos/151/152" style="width:100%">
</div>
<div class="mySlides slide3">
<img src="https://picsum.photos/151/154" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">prev</a>
<a class="next" onclick="plusSlides(1, 2)">next</a>
</div>
I would like to create a lightbox effect without downloading anything. I found a nice solution using Modal/Slideshow as a lightbox and it works well. I would like to have more than 1 on a page and can't get it to work. Here is a link to the example and all the code is below.
https://www.w3schools.com/howto/howto_js_lightbox.asp
<!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)
}
</style>
<body>
<h2 style="text-align:center">Lightbox</h2>
<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_fjords.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_fjords_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_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</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>
<script>
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;
}
</script>
</body>
</html>
Try if u are using bootstrap
HTML
<div class="container">
<div class="row">
<div class="column">
<img src="https://fakeimg.pl/200x200/" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="column">
<img src="https://fakeimg.pl/200x200/" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<div class="column">
<img src="https://fakeimg.pl/200x200/" onclick="openModal();currentSlide(3)" class="hover-shadow">
</div>
<div class="column">
<img src="https://fakeimg.pl/200x200/" onclick="openModal();currentSlide(4)" class="hover-shadow">
</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="https://fakeimg.pl/2500x500/" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://fakeimg.pl/2500x500/" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://fakeimg.pl/2500x500/" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://fakeimg.pl/2500x500/" 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" src="https://fakeimg.pl/250x250/" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo" src="https://fakeimg.pl/250x250/" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo" src="https://fakeimg.pl/250x250/" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="demo" src="https://fakeimg.pl/250x250/" onclick="currentSlide(4)">
</div>
</div>
</div>
</div>
CSS
.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;
}
/* 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-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
img.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)
}
JS
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;
}
I have a partial answer because I am working on the same concept (multiple lightboxes on one page) and used the same example code! It's partial because mine still has a couple issues, (the captions for the second lightbox aren't coming through yet and the "active" image stays opaque in the demo area for the second lightbox also.)
Hopefully someone can improve on what I've done!
What I found was that I needed to copy the JS and rename the functions for the second lightbox, then make sure you call the copied & renamed version for the second lightbox:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
.demo, .demo2 {
opacity: 0.6;
margin-top: 1px;
}
.mySlides, .mySlides2 {
display: none;
}
</script>
<body>
<h2 style="text-align:center">Lightbox</h2>
<!-- First lightbox -->
<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_fjords.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_fjords_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_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</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>
<!-- Second lightbox -->
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal2()">×</span>
<div class="modal-content">
<div class="mySlides2">
<div class="numbertext">1 / 4</div>
<img src="img/farm1Slice.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_fjords_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="plusSlides2(-1)">❮</a>
<a class="next" onclick="plusSlides2(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo2 cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide2(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo2 cursor" src="img_fjords_wide.jpg" style="width:100%" onclick="currentSlide2(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo2 cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide2(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo2 cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide2(4)" alt="Northern Lights">
</div>
</div>
</div>
<script>
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;
}
</script>
<!--Second lightbox code -->
<script>
function openModal2() {
document.getElementById('myModal2').style.display = "block";
}
function closeModal() {
document.getElementById('myModal2').style.display = "none";
}
var slideIndex = 1;
showSlides2(slideIndex);
function plusSlides2(n) {
showSlides2(slideIndex += n);
}
function currentSlide2(n) {
showSlides2(slideIndex = n);
}
function showSlides2(n) {
var i;
var slides = document.getElementsByClassName("mySlides2");
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;
}
</script>
</body>
</html>