How to select diferent modals with one function?

How to select diferent modals with one function? - javascript

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

Related

Modal Gallery - next and previous button to this script?

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>

Add more than one slideshow gallery on one page

I have used the following code from https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp to create this slideshow gallery.
But I have a problem with having more than one slideshow on one page, and therefore would ask if any of you had an idea to write a script for this?
HTML:
<!-- Full-width images with number text -->
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Thumbnail images -->
<div class="row">
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(4)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(5)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(6)">
</div>
</div>
JS:
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");
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;
}
enter code here

One thing to notice is that the complete slideshow - caption, thumbnails (=demos), prev/next buttons and the actual current slide are all within the element with class container.
We can therefore consider an element with class container to be a whole slide show.
Just copy the whole container element and we have two slide shows in HTML.
Some things need changing. In the JS we pick up each of the container elements and remember their slideIndex in the actual element as a data attribute.
In the plusSlides and currentSlide functions we work out which slide show we are on from the event's target (and its parent(s)).
Also, the caption is defined with an id in the original, we change that to a class so that there can be one for each slide show.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
margin: 0;
}
* {
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;
}
</style>
<body>
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="https://www.w3schools.com/howto/img_snow_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 class="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="https://www.w3schools.com/howto/img_snow_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 class="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>
<script>
const slideShows = document.querySelectorAll('.container');
let slideShow, slideIndex; //will be set to the current slideShow as appropriate
for (let i=0; i < slideShows.length; i++) {
slideShow = slideShows[i];
slideShow.setAttribute('data-slideIndex', 1); //instead of slideIndex = 1 we remember the index for each slideshow in a data attribute
slideIndex = 1;
showSlides(1);
}
function plusSlides(n) {
slideShow = event.target.parentElement;
slideIndex = Number(slideShow.getAttribute('data-slideIndex'));
showSlides(slideIndex += n);
}
function currentSlide(n) {
slideShow = event.target.parentElement.parentElement.parentElement;
slideIndex = Number(slideShow.getAttribute('data-slideIndex'));
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = slideShow.getElementsByClassName("mySlides");
var dots = slideShow.getElementsByClassName("demo");
var captionText = slideShow.querySelector(".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;
slideShow.setAttribute('data-slideIndex', slideIndex); // remember the slideIndex for this slideShow
}
</script>
</body>
</html>
Note: there are various bits of JS in the w3Schools example that look a bit 'old-fashioned' nowadays, but the code works.

How can I get two slideshows on the same page?

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.

Loading different content to modal box with one JavaScript file

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!

Image not showing up on when using external javascript

I'm trying to implement a image gallery taken from w3schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_gallery).
However, when I try to link the javascript externally, the first image won't show up. I'm not good at javascript so I'm having trouble fixing it. Here is my code in external file.
document.addEventListener("DOMContentLoaded", function() {
showSlides(slideIndex);
});
var slideIndex = 1;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("g-image-wrapper");
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;
}
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="img_mountains_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="row">
<div class="column">
<img class="demo cursor" src="img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

How to select diferent modals with one function? - javascript

Related

Modal Gallery - next and previous button to this script?

Add more than one slideshow gallery on one page

How can I get two slideshows on the same page?

Loading different content to modal box with one JavaScript file

Image not showing up on when using external javascript

Categories

Resources