Multiple galleries opening in different modals

HTML & CSS
1

Hello :slight_smile:
I’m kind of a noobie so forgive me if the fix is obvious O:)

So basically I need multiple slideshow in 1 page to open when selected by a button so i used this example here https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple and basically put it in a modal.

The problem is that i messed up something and i can only see the first modal…

here is my code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style>

	.container {
    position: relative;
    width: 60%;
    margin: auto;
    margin-top: 80px;
}	
	
.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 120%;
    opacity: 0;
    transition: .5s ease;
    background-color: #7A7A7A;
    margin-left: -90px;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
    color: rgba(255,255,255,1.00);
    font-size: 15pt;
    position: absolute;
    top: 48%;
    left: 38%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: left;
    font-family: Helvetica LT Std;
    font-weight: lighter;
}
		
		.texttittle {
			font: bold;
			font-size: 30pt;
		}
		
		.greek {
			font-family: Helvetica World;
			font-weight: lighter;
		}

		.view {
    border: 1px solid #000000;
    background-color: #7A7A7A;
    width: 120px;
    height: 50px;
    font-family: Helvetica LT Std;
    font-weight: normal;
    color: #000000;
    margin-top: 460px;
    margin-left: 925px;
    font-size: 15px;
    letter-spacing: 5px;
		}
		
		.view:hover {
    color: #FFFFFF;
    font-size: 12pt;
    border-color: #FF0004;
    border-width: 2px;
		}
	
	.modal {
    background-color: #757575;
    opacity: 1;
    display: none;
    width: 100%;
    height: 650px;
    position: relative;
    top: -609px;
    margin: 0px;
    max-width: 100%;
    max-height: 650px;
		overflow: hidden;
	}
	
	.modal2 {
    background-color: #0024FF;
    width: 500px;
    height: 500px;
    opacity: 1;
    display: none;
	}
	
	.modal3 {
    background-color: yellow;
    width: 500px;
    height: 500px;
    opacity: 1;
    display: none;
	}
	
	/* Slideshow container */
.slideshow-container {
	max-width: 1000px;
	position: relative;
	margin:0 auto 25px;
}
/* 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;
}
	.image {
		align-content: center;
	}

	</style>
</head>

<body><div class="container">
  <img src="https://sitmeanssit.com/wp-content/uploads/2014/12/all-dogs-training.jpg" class="image">
  <div class="overlay">
    <div class="text">

		<div class="texttittle">TITLE</div>
		TEXT TEXT TEXT
	  
    </div>
	  
	  <button class="view" onclick="myFunction()">VIEW</button>	
		
</div>
</div>
		<div id="myModal" class="modal">
			<span onclick="myFunctionClose()">&times;</span>
			
			<div class="slideshow-container">
 		
<div class="mySlides1 fade"> 
   <img src="https://sitmeanssit.com/wp-content/uploads/2014/12/all-dogs-training.jpg">
</div>
  		
<div class="mySlides1 fade"> 
    <img src="https://sitmeanssit.com/wp-content/uploads/2014/12/all-dogs-training.jpg">
</div>
  	
<div class="mySlides1 fade"> 
    <img src="https://sitmeanssit.com/wp-content/uploads/2014/12/all-dogs-training.jpg">
</div>
		
	<a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
	<a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
		
		</div>

<div class="container">
  <img src="https://sitmeanssit.com/wp-content/uploads/2014/12/all-dogs-training.jpg" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">

		<div class="texttittle">TTITLE</div>
		TEXT TEXT TEXT TEXT
	  
    </div>

	  <button class="view" onclick="myFunction2()">VIEW</button>	
		
</div>
</div>
	
	<div id="myModal2" class="modal2">
			<span onclick="myFunctionClose2()">&times;</span>
			
			<div class="slideshow-container">
 
<div class="mySlides2 fade"> 
   <img src="https://sitmeanssit.com/wp-content/uploads/2014/12/all-dogs-training.jpg">
</div>
  
<div class="mySlides2 fade"> 
    <img src="https://sitmeanssit.com/wp-content/uploads/2014/12/all-dogs-training.jpg">
</div>
  	
<div class="mySlides2 fade"> 
    <img src="https://sitmeanssit.com/wp-content/uploads/2014/12/all-dogs-training.jpg">
</div>
		
	<a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>
	<a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
			
		</div>

	<div class="container">
  <img src="https://sitmeanssit.com/wp-content/uploads/2014/12/all-dogs-training.jpg" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">

		<div class="texttittle">TITLE</div>
		<br><br>
	TEXT TEXT TEXT

    </div>
	  <button class="view" onclick="myFunction3()">VIEW</button>	
</div>
</div>

	<div id="myModal3" class="modal3">
			<span onclick="myFunctionClose3()">&times;</span>
	
			<div class="slideshow-container">
 		
<div class="mySlides3 fade"> 
   <img src="https://sitmeanssit.com/wp-content/uploads/2014/12/all-dogs-training.jpg">
</div>
  		
<div class="mySlides3 fade"> 
    <img src="https://sitmeanssit.com/wp-content/uploads/2014/12/all-dogs-training.jpg">
</div>
  			
<div class="mySlides3 fade"> 
    <img src="https://sitmeanssit.com/wp-content/uploads/2014/12/all-dogs-training.jpg">
</div>
		
	<a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a>
	<a class="next" onclick="plusSlides(1, 2)">&#10095;</a>
		
		</div>
<script>
	
	
	function myFunction() {
  document.getElementById("myModal").style.display = "block";
}
	function myFunctionClose() {
  document.getElementById("myModal").style.display = "none";
}
	
	function myFunction2() {
  document.getElementById("myModal2").style.display = "block";
}

	function myFunctionClose2() {
  document.getElementById("myModal2").style.display = "none";
}
	
	function myFunction3() {
  document.getElementById("myModal3").style.display = "block";
}

	function myFunctionClose3() {
  document.getElementById("myModal3").style.display = "none";
}
	
//slide show//
	
	
	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 currentSlide(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";  
}
	

</script>
	
</body>
</html>
2

Welcome to the forums. Ì have formatted your code in order to make it more readable here. Next time you post some code, you can format it by placing three backticks (```) on the line before the code and three backticks on the line after. Or you can highlight the code and select the </> icon that is at the top of your edit box.

3

thank you sorry for the inconvenience I appreciate it !!!

4

IF it helps I have 1 more version that i cant get the third slider to work…

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

	

	
<style>
	
		
	
	
	.container {
    position: relative;
    width: 60%;
    margin: auto;
    margin-top: 80px;
}	
	
	
.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 120%;
    opacity: 0;
    transition: .5s ease;
    background-color: #7A7A7A;
    margin-left: -90px;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
    color: rgba(255,255,255,1.00);
    font-size: 15pt;
    position: absolute;
    top: 48%;
    left: 38%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: left;
    font-family: Helvetica LT Std;
    font-weight: lighter;
}
		
	
	
		.texttittle {
			font: bold;
			font-size: 30pt;
		}
		
		
		.greek {
			font-family: Helvetica World;
			font-weight: lighter;
		}
		
		
		
		
		.view {
    border: 1px solid #000000;
    background-color: #7A7A7A;
    width: 120px;
    height: 50px;
    font-family: Helvetica LT Std;
    font-weight: normal;
    color: #000000;
    margin-top: 460px;
    margin-left: 925px;
    font-size: 15px;
    letter-spacing: 5px;
		}
		
		
		
		.view:hover {
    color: #FFFFFF;
    font-size: 12pt;
    border-color: #FF0004;
    border-width: 2px;
		}
	
	
	
	
	.modal {
    background-color: #757575;
    opacity: 1;
    display: none;
    width: 100%;
    height: 650px;
    position: relative;
    top: -609px;
    margin: 0px;
    max-width: 100%;
    max-height: 650px;
		overflow: hidden;
	}
	
	
	
	
	.modal2 {
    background-color: #0024FF;
    width: 500px;
    height: 500px;
    opacity: 1;
    display: none;
	}
	
	
	
	.modal3 {
    background-color: yellow;
    width: 500px;
    height: 500px;
    opacity: 1;
    display: none;
	}
	
	
	
	
	
	/* 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;
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	</style>
	
	
</head>

<body>
	
	
	<div class="container">
  <img src="IMAGE HERE" class="image">
  <div class="overlay">
    <div class="text">
		
		
		<div class="texttittle">TITLE</div>
		<br><br>
		TEXT TEXT TEXT
	
	  
    </div>
	  
	  
	  <button class="view" onclick="myFunction()">VIEW</button>	
		
		
		
		
</div>
	
	
</div>
		
		
		
		<div id="myModal" class="modal">
			<span onclick="myFunctionClose()">&times;</span>
			
		
			
			<div class="slideshow-container">
  <div class="mySlides1">
    <img src="IMAGE HERE" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="IMAGE HERE" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="IMAGE HERE" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
</div>
			
			
			
			
		</div>
	
	
	
	
	<div class="container">
  <img src="IMAGE HERE" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">
		
		
		<div class="texttittle">TITLE</div>
		<br><br>
		TEXT TEXT TEXT
	  
    </div>
	  
	  
	  <button class="view" onclick="myFunction2()">VIEW</button>	
		
		
		
		
		
		
</div>
	
	
</div>
	
	
	
	<div id="myModal2" class="modal2">
			<span onclick="myFunctionClose2()">&times;</span>
			
			
			<div class="slideshow-container">
  <div class="mySlides2">
    <img src="IMAGE HERE"style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="IMAGE HERE" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="IMAGE HERE" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
</div>
			
			
			
		</div>
	
	
	
	
	
	
	
	<div class="container">
  <img src="IMAGE HERE" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">
		
		
		<div class="texttittle">TITLE</div>
		<br><br>
		TEXT TEXT TEXT
	
	  
    </div>
	  
	  
	  <button class="view" onclick="myFunction3()">VIEW</button>	
		
		
		
		
		
		
</div>
	
	
</div>
	
	
	
	<div id="myModal3" class="modal3">
			<span onclick="myFunctionClose3()">&times;</span>
			
			
			<div class="slideshow-container">
  <div class="mySlides3">
    <img src="IMAGE HERE" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="IMAGE HERE" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="IMAGE HERE" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 3)">&#10094;</a>
	<a class="next" onclick="plusSlides(1, 3)">&#10095;</a>
</div>
			
			
			
		</div>
	
	

	
		
<script>
	
	
	function myFunction() {
  document.getElementById("myModal").style.display = "block";
}

	
	
	function myFunctionClose() {
  document.getElementById("myModal").style.display = "none";
}
	
	
	
	
	
	function myFunction2() {
  document.getElementById("myModal2").style.display = "block";
}

	
	
	function myFunctionClose2() {
  document.getElementById("myModal2").style.display = "none";
}
	
	
	
	function myFunction3() {
  document.getElementById("myModal3").style.display = "block";
}

	
	
	function myFunctionClose3() {
  document.getElementById("myModal3").style.display = "none";
}
	
	
	
	
	
	
//slide show//
	
	
	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 currentSlide(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";  
}
	
	
	
	
	
	
	
	
	
</script>
	
	
	
	
	
	
	

	
	
	
</body>
</html>
5

You are passing the wrong parameters in your third example. It should be (1,2) for the third item as the index starts at zero.

<div id="myModal3" class="modal3"> <span onclick="myFunctionClose3()">&times;</span>
  <div class="slideshow-container">
    <div class="mySlides3"> <img src="IMAGE HERE" style="width:100%"> </div>
    <div class="mySlides3"> <img src="IMAGE HERE" style="width:100%"> </div>
    <div class="mySlides3"> <img src="IMAGE HERE" style="width:100%"> </div>
    <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a> <a class="next" onclick="plusSlides(1, 2)">&#10095;</a> </div>
</div>

You also need to adjust the js to account for only three items and not five otherwise you get an error.

e.g.

var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

I’m not sure how your page is supposed to look but the layout seems all over the place.:slight_smile:

It would be better if you could take all your code along with some suitable images and place it an a codepen so that it is easier for us to help.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.