I am trying to create a "Meet the Team" page for my website. I want am currently working on a code where the staff member's picture is displayed and when you click it, their bio comes up. I got the code to work for one staff member, but I can't get the text to change between pictures. This is what I have. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row > .column {
padding: 2px 15px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 33.3%;
}
#Img {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#Img: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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
width: 80%;
}
/* 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%;
}
}
.title {
color: navy;font-family: "Source Sans Pro", arial, sans-serif;line-height: 1.5;
}
h2 {
color: navy;font-family: "Source Sans Pro", arial, sans-serif;line-height: 1.5;
}
p {
color: rgb(94, 94, 94);font-family: "Source Sans Pro", arial, sans-serif;line-height: 1.5;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img class="faculty" src="https://assets.jhsph.edu/faculty/profile/230/3864.jpg" alt="Lesliam" style="width:100%;max-width:300px;height:250px">
<p class="title">Lesliam Quirós-Alcalá, PhD, MSc</p>
</div>
<div class="column">
<img class="faculty" src="https://www.hopkinsmedicine.org/sebin/custom/hopkins_photos/large/10003353.jpg" alt="Emily" style="width:100%;max-width:300px;height:250px"onclick="onClick(this)">
<p class="title">Emily Brigham, MD, MHS</p>
</div>
<div id="modal01" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Lesliam Quirós-Alcalá, PhD, MSc</h2>
<p class="title">Assistant Professor of Environmental Health and Engineering, JHSPH</p>
<p>As an exposure scientist and environmental epidemiologist, she seeks to conduct novel translational exposure science research to better understand exposure-response relationships. The ultimate goal of her research is to inform the development of public health policies and practices, and identify potential interventions to reduce environmental exposures and improve health.</p>
<p><a href="https://www.ncbi.nlm.nih.gov/pubmed/?term=Quir%C3%B3s-Alcal%C3%A1"target="_blank"</a>See All Publications</a></p>
<p><a href="https://www.jhsph.edu/faculty/directory/profile/3864/lesliam-quir-s-alcal"target="_blank"</a>Learn More</a></p>
</div>
</div>
<div id="modal02" class="modal">
<span class="close">×</span>
<div class="modal-content">
<h2>Emily Brigham, MD, MHS</h2>
<p class="title"> Associate Professor of Medicine, Johns Hopkins University School of Medicine (JHU SOM)</p>
<p> Dr. Emily P. Brigham is Assistant Professor at the Johns Hopkins University School of Medicine. Her areas of clinical expertise include obstructive lung disease (asthma, chronic obstructive lung disease, obliterative bronchiolitis) and critical care medicine.
</p>
<p><a href="https://www.ncbi.nlm.nih.gov/pubmed/?term=Brigham%2C+Emily"target="_blank"</a>See All Publications</a></p>
<p><a href=" https://www.hopkinsmedicine.org/profiles/results/directory/profile/10003353/emily-brigham"target="_blank" </a>Learn More</a></p>
</div>
</div>
<script>
var modal = document.getElementById('modal01');
var images = document.getElementsByClassName('faculty');
// var modalImg = document.getElementById("img01");
// var captionText = document.getElementById("caption");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire