Hi,
I have 3 modals that work independently of one another. Everything is nice and spiffy, but the pop-up images are smaller than i'd like. I'm still a newbie to HTML, so I don't really know what to look for, to change.
Any help is greatly appreciated.
Here's the code:
<link rel="stylesheet" href="assets/css/modal.css">
<main class="main wrapper">
<!-- The Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img src="" id="modal-image" />
</div>
</div>
<section class="gallery">
<div class="boxOfimages">
<div class="big-img">
<input type="image" id="imageBox1" src="assets/img/igTerm1.png" alt="">
</div>
<div class="boxOfsmallImgs">
<img src="assets/img/igTerm2.png" onclick="galleryFunction1(this)" alt="">
</div>
</div>
<div class="boxOftext">
</div>
<script>
let imageBox1 = document.getElementById("imageBox1");
function galleryFunction1(smallImg) {
imageBox1.src = smallImg.src;
}
// Get the modal image tag
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var modalImage = document.getElementById("modal-image");
// When the user clicks the big picture, set the image and open the modal
imageBox1.onclick = function (e) {
var src = e.srcElement.src;
modal.style.display = "block";
modalImage.src = src;
};
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
</script>
</section>
</div>
<hr />
<script src="../dist/js/lightbox-plus-jquery.min.js"></script>
<p></p>
<p></p>
<p>history:</p>
</div>
</div>
</div>
<div class="col-md-4 section-1-box wow fadeInDown">
<div class="row">
<div class="col-md-4">
<div class="section-1-box-icon">
<i class="fas fa-cog"></i>
</div>
</div>
<div class="col-md-8">
<h3>Renegade/Linux</h3>
<p>Renegade y2k ported to Linux from Windows</p>
<p></p>
<link rel="stylesheet" href="../dist/css/lightbox.min.css">
<script src="../dist/js/lightbox-plus-jquery.min.js"></script>
<link rel="stylesheet" href="assets/css/modal.css">
<main class="main wrapper">
<!-- The Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img src="" id="modal-image" />
</div>
</div>
<section class="gallery">
<div class="boxOfimages">
<div class="big-img">
<input type="image" id="imageBox2" src="assets/img/renegade1.png" alt="">
</div>
<div class="boxOfsmallImgs">
<img src="assets/img/renegade2.png" onclick="galleryFunction1(this)" alt="">
</div>
</div>
<div class="boxOftext">
</div>
<script>
let imageBox2 = document.getElementById("imageBox2");
function galleryFunction1(smallImg) {
imageBox2.src = smallImg.src;
}
// Get the modal image tag
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var modalImage = document.getElementById("modal-image");
// When the user clicks the big picture, set the image and open the modal
imageBox2.onclick = function (e) {
var src = e.srcElement.src;
modal.style.display = "block";
modalImage.src = src;
};
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
</script>
</section>
<p></p>
<p>history:</p>
</div>
</div>
</div>
<div class="col-md-4 section-1-box wow fadeInUp">
<div class="row">
<div class="col-md-4">
<div class="section-1-box-icon">
<i class="fas fa-cog"></i>
</div>
</div>
<div class="col-md-8">
<h3>Impulse/Linux</h3>
<p>Impulse BBS ported to Linux from DOS</p>
<p></p>
<link rel="stylesheet" href="../dist/css/lightbox.min.css">
<script src="../dist/js/lightbox-plus-jquery.min.js"></script>
<link rel="stylesheet" href="assets/css/modal.css">
<main class="main wrapper">
<!-- The Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img src="" id="modal-image" />
</div>
</div>
<section class="gallery">
<div class="boxOfimages">
<div class="big-img">
<input type="image" id="imageBox3" src="assets/img/impulse1.png" alt="">
</div>
<div class="boxOfsmallImgs">
<img src="assets/img/impulse2.png" onclick="galleryFunction(this)" alt="">
</div>
</div>
<div class="boxOftext">
</div>
<script>
let imageBox3 = document.getElementById("imageBox3");
function galleryFunction1(smallImg) {
imageBox3.src = smallImg.src;
}
// Get the modal image tag
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var modalImage = document.getElementById("modal-image");
// When the user clicks the big picture, set the image and open the modal
imageBox3.onclick = function (e) {
var src = e.srcElement.src;
modal.style.display = "block";
modalImage.src = src;
};
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
</script>
</section>