I am trying to use one javascript file to open a modal box with different content depending on what is clicked. One modal box works great, the other ones load the correct text, but not any pictures. If I take out the div class mySlides fade and just add pictures to the modal box, it works fine. I am sure it something simple I am overlooking.
// Get the modal
let modal = document.getElementsByClassName('modal');
// Get the button that opens the modal
let btn = document.getElementsByClassName('text');
// Get the <span> element that closes the modal
let span = document.getElementsByClassName("close");
// When the user click on the button, open the modal
for (let i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
modal[i].style.display = "flex";
}
}
for (let i = 0; i < span.length; i++) {
span[i].onclick = function() {
modal[i].style.display = "none";
}
}
let slideIndex = 1;
// Next/previous controls
function plusSlides(n) {
showSlide(slideIndex = n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let 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";
}
showSlide(slideIndex);
<button id="myBtn" class="text">Learn More</button>
<!--Modal-->
<div id="myModal" class="modal">
<div class="modal-content">
<div class="slideshow-container">
<!--Full-width images with number and caption text-->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/checkbook1.jpg" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/checkbook1.jpg" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/checkbook.jpg" class="modal-image" style="width:100%">
</div>
<!--Next and previous buttons-->
<a class="prev" onClick="plusSlides(-1)">❮</a>
<a class="next" onClick="plusSlides(1)">❯</a>
</div>
<br>
<!--The dots/circles-->
<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>
<h2 id="modal-heading">MyRegister App</h2>
<p id="modal-text">This app simulates a checkbook register. Add deposits and withdraws.
</p>
<span class="close">×</span>
Source Code
</div>
</div>
</div>
<div class="photo-wrap">
<img src="images/test.jpg" class="portp">
<button id="myBtn" class="text">Learn More</button>
<!--Modal-->
<div id="myModal" class="modal">
<div class="modal-content">
<div class="slideshow-container">
<!--Full-width images with number and caption text-->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/practest.png" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/test.jpg" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/practest.png" class="modal-image" style="width:100%">
</div>
<!--Next and previous buttons-->
<a class="prev" onClick="plusSlides(-1)">❮</a>
<a class="next" onClick="plusSlides(1)">❯</a>
</div>
<br>
<!--The dots/circles-->
<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>
<h2 id="modal-heading">Practice Test App</h2>
<p id="modal-text">This is a practice test application I made for work.</p>
<span class="close">×</span>
Source Code
</div>
</div>
</div>
As there is no picture attached. I can't see is the picture is changing or not.
After reading your code, I understand that you are changing your slides from this html code.
<!--Next and previous buttons-->
<a class="prev" onClick="plusSlides(-1)">❮</a>
<a class="next" onClick="plusSlides(1)">❯</a>
But in your code, you are not adding the value that you are sending to plusSlides() function.
So, you need to make changes to your plusSlides() function like the following:
function plusSlides(n) {
showSlide(slideIndex += n);
}
That's it! Your problem is solved!!!
BUT
There's Still Some Problem Exist!
You may notice that you're back button is not working as expected. That's because you have total 6 div elements with same class name! so, here, slides.length actually returns 6. So, you may pass another indicator to your function from your html. And you should put separate slideIndex variable for keeping count of each event.
I have tried to edit your javascript.
Here is the full live code:
// Get the modal
let modal = document.getElementsByClassName('modal');
// Get the button that opens the modal
let btn = document.getElementsByClassName('text');
// Get the <span> element that closes the modal
let span = document.getElementsByClassName("close");
// When the user click on the button, open the modal
for (let i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
modal[i].style.display = "flex";
}
}
for (let i = 0; i < span.length; i++) {
span[i].onclick = function() {
modal[i].style.display = "none";
}
}
let slideIndex = [1, 4];
let slides = document.getElementsByClassName("mySlides"),
dots = document.getElementsByClassName("dot");
// Next/previous controls
function plusSlides(counter, index) {
showSlide((slideIndex[index] + counter), index);
}
// Thumbnail image controls
function currentSlide(position, index) {
showSlide(position, index);
}
function showSlide(position, index) {
let lastPostion = index * 3 + 3,
firstPosition = index * 3 + 1;
if (position > lastPostion) {
position = firstPosition;
}
if (position < firstPosition) {
position = lastPostion;
}
slides[slideIndex[index] - 1].style.display = "none";
dots[slideIndex[index] - 1].className = dots[slideIndex[index] - 1].className.replace(" active", "");
slides[position - 1].style.display = "block";
dots[position - 1].className += " active";
slideIndex[index] = position;
}
function initSlide() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (var i = 0; i < slides.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[0].style.display = "block";
dots[0].className += " active";
slides[3].style.display = "block";
dots[3].className += " active";
}
initSlide();
<button id="myBtn" class="text">Learn More</button>
<!--Modal-->
<div id="myModal" class="modal">
<div class="modal-content">
<div class="slideshow-container">
<!--Full-width images with number and caption text-->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/checkbook1.jpg" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/checkbook1.jpg" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/checkbook.jpg" class="modal-image" style="width:100%">
</div>
<!--Next and previous buttons-->
<a class="prev" onClick="plusSlides(-1, 0)">❮</a>
<a class="next" onClick="plusSlides(1, 0)">❯</a>
</div>
<br>
<!--The dots/circles-->
<div style="text-align: center">
<span class="dot" onClick="currentSlide(1, 0)"></span>
<span class="dot" onClick="currentSlide(2, 0)"></span>
<span class="dot" onClick="currentSlide(3, 0)"></span>
</div>
<h2 id="modal-heading">MyRegister App</h2>
<p id="modal-text">This app simulates a checkbook register. Add deposits and withdraws.
</p>
<span class="close">×</span>
Source Code
</div>
</div>
</div>
<div class="photo-wrap">
<img src="images/test.jpg" class="portp">
<button id="myBtn" class="text">Learn More</button>
<!--Modal-->
<div id="myModal" class="modal">
<div class="modal-content">
<div class="slideshow-container">
<!--Full-width images with number and caption text-->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/practest.png" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/test.jpg" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/practest.png" class="modal-image" style="width:100%">
</div>
<!--Next and previous buttons-->
<a class="prev" onClick="plusSlides(-1, 1)">❮</a>
<a class="next" onClick="plusSlides(1, 1)">❯</a>
</div>
<br>
<!--The dots/circles-->
<div style="text-align: center">
<span class="dot" onClick="currentSlide(4, 1)"></span>
<span class="dot" onClick="currentSlide(5, 1)"></span>
<span class="dot" onClick="currentSlide(6, 1)"></span>
</div>
<h2 id="modal-heading">Practice Test App</h2>
<p id="modal-text">This is a practice test application I made for work.</p>
<span class="close">×</span>
Source Code
</div>
</div>
</div>
Hope, this will help your!
Related
i tried the lightbox from W3 school and it works nicely, but if I have more modals on one page the script open all of them together.
Is it possible to set within one script some condition which modal should be opened? Or/and is this the correct way of thinking how to code it?
I omitted from code lower the styling and tons of other content to make it shorter but i didn't do any changes in the original script from W3 except of adding new line of "myModal1" to functions open/closeModal which is the problem i try to solve.
Thank you very much in advance for your answers. :)
<div id="epo20-23">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</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 / 2</div>
<img src="image1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image2.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-container">
<div class="column">
<img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
</div>
</div>
</div>
</div>
<div id="epo24-38">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image4.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-container">
<div class="column">
<img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(1)"
alt="img3">
</div>
<div class="column">
<img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(2)"
alt="img4">
</div>
</div>
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById("myModal").style.display = "block";
document.getElementById("myModal1").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
document.getElementById("myModal1").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>
Will reply according to your code
You have
function openModal() {
document.getElementById("myModal").style.display = "block";
document.getElementById("myModal1").style.display = "block";
}
this will open both of the modals together
There are numerous ways to implement this function
A very very basic one : You could add an argument and use an if else-if statement inside the script to specify which one to open
Example :
<div id="epo20-23">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal("myModal");currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</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 / 2</div>
<img src="image1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image2.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-container">
<div class="column">
<img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
</div>
</div>
</div>
</div>
<div id="epo24-38">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal("myModal1");currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image4.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-container">
<div class="column">
<img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(1)"
alt="img3">
</div>
<div class="column">
<img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(2)"
alt="img4">
</div>
</div>
</div>
</div>
</div>
<script>
function openModal(id) {
if(id=="myModal")
document.getElementById("myModal").style.display = "block";
else if(id=="myModal1")
document.getElementById("myModal1").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
document.getElementById("myModal1").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>
as you could see the changes:
in the body section:
onclick="openModal("myModal");currentSlide(1)" //first h2 div
onclick="openModal("myModal1");currentSlide(1)" //second h2 div
script section:
function openModal(modal) {
if(modal=="myModal")
document.getElementById("myModal").style.display = "block";
else if(modal=="myModal1")
document.getElementById("myModal1").style.display = "block";
}
I have this code, I need to input next and previous buttons or link into modal image, when I want to change photo (not in preview but in modal). For me is not a problem to input them into HTML script, but the problem is I can't so much JS so I am not able to create a script that can move an image from one to another infinitely in loop when clicked next/previous button. I accept code written in the newest JQuery(mobile) cause I use it too on my page. Many thanks for the help. Here is the link as it works now
https://jsfiddle.net/8ryutc5g/2/
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img class="ImgThumbnail" src="http://srovnej.jednoduse.cz/img/svarec3.jpg" style="height:300px; width:100%;">
<div class="text">Dělník</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img class="ImgThumbnail" src="http://srovnej.jednoduse.cz/img/svarec.jpg" style="height:300px; width:100%;">
<div class="text">Montér</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img class="ImgThumbnail" src="http://srovnej.jednoduse.cz/img/svarec2.jpg" style="height:300px; width:100%;">
<div class="text">Uklízečka</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img class="ImgThumbnail" src="http://srovnej.jednoduse.cz/img/zamecnik.jpg" style="height:300px; width:100%;">
<div class="text">kuchař</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img class="ImgThumbnail" src="http://srovnej.jednoduse.cz/img/zamecnik2.jpg" style="height:300px; width:100%;">
<div class="text">Striptérka</div>
</div>
</div>
<br>
<!-- The dots/circles -->
<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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<div class="modal">
<span class="close">×</span>
<img class="modalImage" id="img01" style="max-height:800px; max-width:100%">
</div>
<script>
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";
}
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = event.target.src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
</script>
I am creating a website for an assignment and am trying to add a second slideshow to my page, however, when I do so, it moves my first one and all of the pictures to the section that I'm trying to add to. I have an example of my code below - which shows the java I'm using:
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";
}
and the html I have:
main>
<section>
<div class="flex-container">
<div class="flex-child">
<!--------------Shine Falls ----------->
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="Images/Shine Falls/s2.jpg" style="width:100%">
<div class="text">Shine Falls entry</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img src="Images/Shine Falls/s3.jpg" style="width:100%">
<div class="text">Shine Falls entry</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img src="Images/Shine Falls/s4.jpg" style="width:100%">
<div class="text">Shine Falls farm track</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="Images/Shine Falls/s5.jpg" style="width:100%">
<div class="text">Shine Falls</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img src="Images/Shine Falls/s6.jpg" style="width:100%">
<div class="text">Shine Falls base</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<!---Icons under images -->
<div class= "icon-display">
<a><img src="Images/Icons/nodogs.png" alt="No Dogs Allowed" /></a>
<a><img src="Images/Icons/picnictable.png" alt="Picnic Area" /></a>
<a><img src="Images/Icons/toilet.png" alt="Toilets" /></a>
<a><img src="Images/Icons/swimming.png" alt="Swimming Area" /></a>
<a><img src="Images/Icons/nowater.png" alt="No Water" /></a>
<a><img src="Images/Icons/vehicle.png" alt="All Vehicle Access" /></a>
</div>
<p>Shine Falls</p>
</div>
<!--------------Maraetotara Falls----------->
<div class="flex-child">
***[** I WANT TO ADD MY SECOND SLIDESHOW HERE **][1]***
<div>
<img src = "Images/Maraetotara Falls/m1.jpg">
</div>
<div class= "icon-display">
<a><img src="Images/Icons/nodogs.png" alt="No Dogs Allowed" /></a>
<a><img src="Images/Icons/picnictable.png" alt="Picnic Area" /></a>
<a><img src="Images/Icons/toilet.png" alt="Toilets" /></a>
<a><img src="Images/Icons/swimming.png" alt="Swimming Area" /></a>
<a><img src="Images/Icons/nowater.png" alt="No Water" /></a>
<a><img src="Images/Icons/vehicle.png" alt="All Vehicle Access" /></a>
</div>
<p>Maraetotara Falls</p>
<p>frjkfsfapkfnaegjbesjglnsjgbsdkgjbsdjfbdakjbgsjdbgsjbssf
sdjfbsdgbkdsklgnflkdnglkfdnhgfdklnhgkhngklhgf
fndfnf sjkfnshdkghsfhgri... Read More</p>
</div>
</div>
</section>
</main>
I basically want to replicate the slideshow in another section but with different pictures. I have added a picture of what my website looks like below, to help.
Could you please help to use multiple slideshow based on the code below. It works fine if only one slideshow is on the page, in other case I have to copy the code multiple times and give different IDs to the elements. Is there any solution to solve this without copy the code?
Here is the code from w3schools:
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("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";
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<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>
If you want to use the same code with multiple slideshows you can add parameters to the showSlides function
var slideIndex = 1;
showSlides(slideIndex,"mySlides","dots");
function plusSlides(n,nSliders,nDots) {
showSlides(slideIndex += n,nSliders,nDots);
}
function currentSlide(n,nSliders,nDots) {
showSlides(slideIndex = n,nSliders,nDots);
}
function showSlides(n,nSliders,nDots) {
var i;
var slides = document.getElementsByClassName(String(nSliders));
var dots = document.getElementsByClassName(nDots);
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";
}
Like this you have to change only in html files the arguments of the function
html:
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1,'mySlides','dots')">❮</a>
<a class="next" onclick="plusSlides(1,'mySlides','dots')">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1,'mySlides','dots')"></span>
<span class="dot" onclick="currentSlide(2,'mySlides','dots')"></span>
<span class="dot" onclick="currentSlide(3,'mySlides','dots')"></span>
</div>
I am working on revamping a webpage for a local montessori. I am attempting to use the manual slideshow script, however, the page is not working as intended. Without adding an "onload" attribute, every image in the slideshow is displayed at once. Upon inspection, I have an error stating: "Uncaught TypeError: Cannot read property 'style' of undefined". Here is the HTML section in question:
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 8</div>
<img src="http://i.imgur.com/hOlkQyd.jpg" width = "800" height = "600"/>
<div class="text">Caption One</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 8</div>
<img src="http://i.imgur.com/79juKeU.jpg" width = "800" height = "600"/>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 8</div>
<img src="http://i.imgur.com/54B3yvz.jpg" width = "800" height = "600"/>
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 8</div>
<img src="http://i.imgur.com/zsvuaoU.jpg" width = "800" height = "600"/>
<div class="text">Caption Four</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 8</div>
<img src="http://i.imgur.com/N2hgBtH.jpg" width = "800" height = "600"/>
<div class="text">Caption Five</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 8</div>
<img src="http://i.imgur.com/McQHME4.jpg" width = "800" height = "600"/>
<div class="text">Caption Six</div>
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 8</div>
<img src="http://i.imgur.com/rOvbBlj.jpg" width = "800" height = "600"/>
<div class="text">Caption Seven</div>
</div>
<div class="mySlides fade">
<div class="numbertext">8 / 8</div>
<img src="http://i.imgur.com/aX4kzGr.jpg" width = "800" height = "600"/>
<div class="text">Caption Eight</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center">
<span class="dot active" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
<span class="dot" onclick="currentSlide(8)"></span>
</div>
Here is the script:
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("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"; /*Error appears here */
dots[slideIndex-1].className += " active";
}
What have I done wrong?
slides[slideIndex-1].style.display = "block"; /*Error appears here */
The reason why slides[slideIndex-1] would be undefined is if slideIndex - 1 is beyond the bounds of slides. The most likely cause is that slides is empty. This could occur if you're running your script before the page content instead of after. This would cause this line to make slides length zero, since there are not yet any elements with the class name mySlides:
var slides = document.getElementsByClassName("mySlides");
Moving your script tag after the slide content should resolve the issue, or moving the showSlides(slideIndex) call in an onload handler.