THE GOAL: to hover over an image–> a box appears with some text and a view button (click view button) –> and a gallery appears within a modal.
This much is easy what i cant get to work is the multiple galleries . With the help of https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple I got 2 of them to work but i cant get the 3d one to work properly… so
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>
