Mixing
How can i make multiple gallery modals work on one page?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I would like to hover over an image and a box to appear with some text and a view button. When that buttons is clicked, gallery should appear within a modal.
This much is easy, but I cant ge't it to work with multiple galleries. With the help of this I got 2 of them to work but I can't get the 3rd one to work properly.
Here is my code if anyone can help it will be much appreciated :
<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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</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>javascript html css gallery
edited Jan 3 at 16:55
Warp Drive Enterprises
472524
asked Jan 3 at 15:43
tumblr acctumblr acc
11
add a comment |
0
I would like to hover over an image and a box to appear with some text and a view button. When that buttons is clicked, gallery should appear within a modal.
This much is easy, but I cant ge't it to work with multiple galleries. With the help of this I got 2 of them to work but I can't get the 3rd one to work properly.
Here is my code if anyone can help it will be much appreciated :
<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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</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>javascript html css gallery
edited Jan 3 at 16:55
Warp Drive Enterprises
472524
asked Jan 3 at 15:43
tumblr acctumblr acc
11
3
Welcome to StackOverflow. Please view this link on how to post a Minimal, Complete, and Verifiable example.
– jtate
Jan 3 at 15:47
add a comment |
0
0
0
I would like to hover over an image and a box to appear with some text and a view button. When that buttons is clicked, gallery should appear within a modal.
This much is easy, but I cant ge't it to work with multiple galleries. With the help of this I got 2 of them to work but I can't get the 3rd one to work properly.
Here is my code if anyone can help it will be much appreciated :
<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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</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>javascript html css gallery
edited Jan 3 at 16:55
Warp Drive Enterprises
472524
asked Jan 3 at 15:43
tumblr acctumblr acc
11
I would like to hover over an image and a box to appear with some text and a view button. When that buttons is clicked, gallery should appear within a modal.
This much is easy, but I cant ge't it to work with multiple galleries. With the help of this I got 2 of them to work but I can't get the 3rd one to work properly.
Here is my code if anyone can help it will be much appreciated :
<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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</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> <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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</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> <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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</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()">×</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)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</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>javascript html css gallery
javascript html css gallery
edited Jan 3 at 16:55
Warp Drive Enterprises
472524
asked Jan 3 at 15:43
tumblr acctumblr acc
11
edited Jan 3 at 16:55
Warp Drive Enterprises
472524
asked Jan 3 at 15:43
tumblr acctumblr acc
11
edited Jan 3 at 16:55
Warp Drive Enterprises
472524
edited Jan 3 at 16:55
Warp Drive Enterprises
472524
edited Jan 3 at 16:55
Warp Drive Enterprises
472524
472524
asked Jan 3 at 15:43
tumblr acctumblr acc
11
asked Jan 3 at 15:43
tumblr acctumblr acc
11
asked Jan 3 at 15:43
tumblr acctumblr acc
11
11
3
Welcome to StackOverflow. Please view this link on how to post a Minimal, Complete, and Verifiable example.
– jtate
Jan 3 at 15:47
add a comment |
3
Welcome to StackOverflow. Please view this link on how to post a Minimal, Complete, and Verifiable example.
– jtate
Jan 3 at 15:47
3
3
Welcome to StackOverflow. Please view this link on how to post a Minimal, Complete, and Verifiable example.
– jtate
Jan 3 at 15:47
Welcome to StackOverflow. Please view this link on how to post a Minimal, Complete, and Verifiable example.
– jtate
Jan 3 at 15:47
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54025502%2fhow-can-i-make-multiple-gallery-modals-work-on-one-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54025502%2fhow-can-i-make-multiple-gallery-modals-work-on-one-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
Welcome to StackOverflow. Please view this link on how to post a Minimal, Complete, and Verifiable example.
– jtate
Jan 3 at 15:47