Как определить различные размеры модальных изображений на одной веб-странице?
I found code at w3schools that works really well for generating full size images from thumbnails using modal images, except that in my case I have some really wide panoramas that don't display properly using the same width or height definition in the modal that works well for the rest of the more standard size images. In the code below the height is set for 70% but this does not allow the full horizontal dimension of the panorama to display. I don't want the height to be any smaller as it makes the regular sized images too small. Does anyone know how I can create a second, different definition for the panoramas to open with a different ratio for screen height or width? Thank you.
<!DOCTYPE HTML>
<html>
<head>
<style>
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
vertical-align: middle;
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
height: 70%;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
font-family: "europa",sans-serif;
font-size: 120%;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
html {
background-color: white;
}
body {
width: auto;
margin: 0 auto 0;
}
.gallery {
width: auto;
height: auto;
display: flex;
padding: 50px;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.photo {
padding: 20px;
}
.photo img {
padding: 30px;
}
</style>
</head>
<body>
<section class="gallery">
<div><img class="myImg" src="http://bartonlewisfilm.com/img_157-229_tb.jpg" alt="157-229, 96th St., IND Eighth Ave. Line" width="187" height="142" /></div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<div><img class="myImg" src="http://bartonlewisfilm.com/img_214-099_368.jpg" alt="214-069, 182nd – 183rd Sts., IND Concourse Line" width="519" height="142" /></div>
<div><img class="myImg" src="http://bartonlewisfilm.com/img_214-015.jpg" alt="214-015, 182nd-183rd Sts., IND Concourse Line" width="199" height="142" /></div>
</section>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var modal = document.getElementById('myModal');
var imageArray = document.getElementsByClassName("myImg");
for(var i=0;i<imageArray.length;i++){
var img = imageArray[i];
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
};
</script>
</body>
</html>
Что я уже пробовал:
Я попытался создать класс для 2-го определения, посмотрев на то, как классы перекрестно ссылаются друг на друга в css и js для более широких (панорамных) изображений, но не смог заставить его работать.