У меня есть шахта, состоящая из 12 проектов. Он должен щелкнуть модуль лайтбокса и показать одно или несколько изображений
. Независимо от того, что я делаю, этот модуль лайтбокса не показывает мои изображения "sr c". При щелчке открывается модуль с изображением «местозаполнитель», но не с фактическим изображением, и это относится ко всем проектам.
Я дважды проверил, и все изображения связаны правильно. Я довольно много волновался, и в какой-то момент при нажатии, например, на проект 1 или 2, показывалось бы изображение - только оно не было бы правильным. Вместо этого, когда я исследовал страницу в chrome, я заметил, что проект 1 действительно отображал изображение, обозначенное как проект 3., но в этот момент ничего не отображается. Я только пишу это, поскольку это может быть индикатором проблемы с источником.
<script>
var modal = document.getElementById("myModal_1");
var btn = document.getElementById("myBtn_1");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_2");
var btn = document.getElementById("myBtn_2");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_3");
var btn = document.getElementById("myBtn_3");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_4");
var btn = document.getElementById("myBtn_4");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_5");
var btn = document.getElementById("myBtn_5");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_6");
var btn = document.getElementById("myBtn_6");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_7");
var btn = document.getElementById("myBtn_7");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_8");
var btn = document.getElementById("myBtn_8");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_9");
var btn = document.getElementById("myBtn_9");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_10");
var btn = document.getElementById("myBtn_10");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_11");
var btn = document.getElementById("myBtn_11");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var modal = document.getElementById("myModal_12");
var btn = document.getElementById("myBtn_12");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 80vh;
text-align: left;
}
li {
padding-top: 40px;
}
body {
font-family: 'Helvetica Neue';
font-size: 45px;
}
.content {
margin-top: 450px;
}
.Project:hover {
cursor: default;
text-decoration: underline;
}
#year {
margin-right: 50%;
float: right;
}
p {
display: inline-block;
text-align: left;
padding-left:30px;
padding-right:30px;
font-size: 30px;
width: 700px;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div class="content">
<ul style="list-style: none;">
<li class="Project">
<span id="myBtn_1">
Wer Baut Der Stadt
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<img src="Images/WER BAUT 2018/Poster 7-11.pdf">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_2">
Hans Oscar Carlsson
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Webpage for curator and critic Hans Oscar Carlsson
</p>
</div>
<div id="myModal_2" class="modal">
<div class="modal-content">
<img src="Images/Newsarticle/_97A0846.jpg" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_3">
Atelier Toer
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Webpage for Atelier Toer
</p>
</div>
<div id="myModal_3" class="modal">
<div class="modal-content">
<img src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_4">
Wer Baut Der Stadt?
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin in 2018.
</p>
</div>
<div id="myModal_4" class="modal">
<div class="modal-content">
<img class=WerBaut src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_5">
CAFX 2018
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Identity design for Copenhagen Architecture Festival 2018.
</p>
</div>
<div id="myModal_5" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_6">
Mette Riis
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Webpage for artist and researcher Mette Riis.
</p>
</div>
<div id="myModal_6" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_7">
Contagious Tales
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Graduation project, editorial design
</p>
</div>
<div id="myModal_7" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_8">
Foam X Hydra
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Design of exhibition cahier in connection to the exhibition FOAM X HYDRA.
</p>
</div>
<div id="myModal_8" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_9">
What Is The News Article?
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Pamphlet with infographics.
</p>
</div>
<div id="myModal_9" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_10">
Money Can No Longer Buy
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Book.
</p>
</div>
<div id="myModal_10" class="modal">
<div class="modal-content">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_11">
Questionnarie on Individuality
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Litography on napkins.
</p>
</div>
<div id="myModal_11" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
<li class="Project">
<span id="myBtn_12">
Wordshuffler Posters
<span id="year">
2019
</span>
</span>
<div class="Describtion">
<p style="display:none;">
Posters.
</p>
</div>
<div id="myModal_12" class="modal">
<div class="modal-content">
<img class=CAFX src="Images/CAFX/screenforcinema.pdf" width="800px">
<span class="close">×
</span>
<p>Some text in the Modal..
</p>
</div>
</div>
</li>
</ul>
</div>