这将是一个很长的问题，对此很抱歉，但我是 hmtl/css/js 的新手并且仍在努力学习，我正在尝试为我使用 API 从 pexels 获取的照片实现灯箱，我想实现灯箱所以当我点击它显示更大的图片时，我真的很感激帮助我希望它不会太多，代码在这里，如果你需要任何其他东西，请告诉我：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Kavivanar&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster+Two:ital@0;1&display=swap" rel="stylesheet">
<title>Title</title>
<link rel="stylesheet" href="./lightboxTest.css">
</head>
<!--
- Basic HTML index,if you hover over the Gallery text you will see another text that says "Return to start".
- When you hover over pictures there is a text to let you know that if you click the picture you get the original size.
- Getting a search icon from ionicons in one of the script tags.
- Having some links to my social media,thinking that if this was a real company the users could visit.
-->
<body>
<section>
<div class="container">
<ul>
<span title="Visit our Instagram page!"><li><a href="https://www.facebook.com/myName" target="_blank"><i class="fab fa-facebook" aria-hidden="true"></i></a></li></span>
<span title="Visit our Instagram page!"><li><a href="https://twitter.com/myName" target="_blank"><i class="fab fa-twitter" aria-hidden="true"></i></a></li></span>
<span title="Visit our Instagram page!"><li><a href="https://www.instagram.com/myName/" target="_blank"><i class="fab fa-instagram" aria-hidden="true"></i></a></li></span>
<span title="Contact"><li><a href="contact.html"><i class="fas fa-id-card-alt" aria-hidden="true"></i></a></li></span>
<!-- <span title="Contact"><li><a href="contact"><i class="contact" aria-hidden="true">@</i></a></li></span> -->
</ul>
<div class="header">
<span title="Return to start"><h1 class="logo">G a l l e r y</h1></span>
<form>
<input type="text" placeholder="Search Photos">
<ion-icon name="search-outline"></ion-icon>
</form>
</div>
<span title="Click on picture to see original size"><div class="gallery"></span></div>
<span title="Load more pictures"><a class="load-more data-img='curated'">View More</a></span>
</div>
</section>
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
<script src="./main.js"></script>
<script src="./newTab.js"></script>
</body>
</html>
这里是CSS：
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap");
/* Asterix means: Select all elementes and set the properties inside of the curly brackets */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Montserrat",sans-serif;
font-size: 100%;
}
body {
background-color: gray;
}
/* Properties for my social media contacts aswell contact icon. */
ul {
position: relative;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
text-align: center;
align-items: center;
justify-content: center;
margin: 0 10px;
text-decoration: none;
}
ul li {
list-style: none;
}
ul li a {
position: relative;
width:60px;
height:60px;
display:block;
text-align:center;
margin:0 10px;
border-radius: 50%;
padding: 6px;
text-decoration:none;
box-shadow: 0 10px 15px rgba(0,0.3);
background: linear-gradient(0deg,#ddd,#fff);
transition: .5s;
}
ul li a:hover {
box-shadow: 0 2px 5px rgba(0,0.3);
text-decoration:none;
}
ul li a .fab {
width: 100%;
height:100%;
display: inline-block;
background: linear-gradient(0deg,#fff,#ddd);
border-radius: 50%;
line-height: calc(60px - 12px);
font-size:24px;
color: #262626;
transition: .5s;
}
ul li a .fas {
width: 100%;
height:100%;
display: inline-block;
background: linear-gradient(0deg,#ddd);
border-radius: 50%;
line-height: calc(60px - 12px);
font-size:24px;
color: #262626;
transition: .5s;
}
/* Child is the different icons,number 1 is facebook,2 twitter and so on. */
ul li:nth-child(1) a:hover .fab {
color: #3b5998;
}
ul li:nth-child(2) a:hover .fab {
color: #00aced;
}
ul li:nth-child(3) a:hover .fab {
color: #e4405f;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
section {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 100px 0;
}
/* Containing pretty much everything you see on the site,can you call it a wrapper?? */
.container {
background-color: lightgray;
width: 90%;
max-width: 900px;
margin: 0 auto;
box-shadow: 0px 0px 61px 7px #5e849c40;
padding: 50px 20px;
border-radius: 20px;
text-align: center;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.header h1 {
font-size: 40px;
font-weight: 900;
letter-spacing: -2px;
}
/* For the search section */
form {
margin-top: 30px;
width: 80%;
max-width: 300px;
position: relative;
}
/* Input box properties,where the user can search for photos */
input {
border: none;
border-bottom: 2px solid gray;
font-size: 20px;
width: 100%;
outline: none;
color: black;
background-color: transparent;
position: relative;
}
/* Placeholder properties,in this case "Search Photos" */
input::placeholder {
opacity: 0.5;
color: black;
font-family: "Montserrat";
}
/* Ionicon properties which is the magnifying glass in the search box */
form ion-icon {
position: absolute;
right: 0;
font-size: 20px;
opacity: 0.5;
color: black;
}
/* Properties of gallery logo */
.logo
{
color: black;
transition: 0.3s ease;
font-family: 'Kavivanar',cursive;
}
/* Gallery logo hovering effects */
.logo:hover
{
color: darkgray;
text-shadow: 2px 2px black;
}
.gallery{
display: grid;
grid-template-columns: repeat(3,200px);
justify-content: center;
grid-gap: 10px;
height: 100vh;
}
img{
cursor: pointer;
width: 200px;
height: 200px;
}
#item {
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,.8);
display: none;
}
#item.active{
display: flex;
justify-content: center;
align-items: center;
}
这是JS：
class PhotoGallery
{
//Constructor containing my selectors
constructor()
{
this.API_KEY = '563492ad6f917000010000013a6f79bdd68a47199caa701bab553adf';
// The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.
this.galleryDIv = document.querySelector('.gallery');
this.searchForm = document.querySelector('.header form');
this.loadmore = document.querySelector('.load-more');
this.logo = document.querySelector('.logo');
this.pageIndex = 1;
this.searchValueGlobal = '';
this.eventHandle();
}
//Eventhandler,eg when the DOMContent is loaded I wanna retrieve the pictures from my API_KEY
eventHandle()
{
document.addEventListener('DOMContentLoaded',() => {
this.getImg(1);
});
this.searchForm.addEventListener('submit',(e) => {
this.pageIndex = 1;
this.getSearchedImages(e);
});
this.loadmore.addEventListener('click',(e) => {
this.loadmoreImages(e);
});
this.logo.addEventListener('click',() => {
this.pageIndex = 1;
this.galleryDIv.innerHTML = '';
this.getImg(this.pageIndex);
});
}
//Getting images from my API_KEY by calling the function fetchImages.
async getImg(index){
this.loadmore.setattribute('data-img','curated');
const baseURL = `https://api.pexels.com/v1/curated?page=${index}&per_page=12`;
const data = await this.fetchImages(baseURL);
this.GenerateHTML(data.photos);
console.log(data);
}
//Fetching the images from my API_KEY
async fetchImages(baseURL){
const response = await fetch(baseURL,{
method: 'GET',headers:{
accept: 'application/json',Authorization: this.API_KEY
}
});
const data = await response.json();
return data;
}
// the document.createElement() method creates the HTML element specified by tagName,or an HTMLUnknownElement if tagName isn't recognized.
GenerateHTML(photos){
photos.forEach(photo=>{
const item = document.createElement('div');
item.classList.add('item');
item.innerHTML = `
<a href='${photo.src.original}' target="_blank"></a>
<img src="${photo.src.medium}">
<h3>${photo.photographer}</h3>
</a>
`;
this.galleryDIv.appendChild(item);
})
}
async getSearchedImages(e){
this.loadmore.setattribute('data-img','search');
// preventDefault method cancels the event if it is cancelable,meaning that the default action that belongs to the event will not occur.
e.preventDefault();
this.galleryDIv.innerHTML = '';
const searchValue = e.target.querySelector('input').value;
this.searchValueGlobal = searchValue;
const baseURL = `https://api.pexels.com/v1/search?query=${searchValue}&page=1&per_page=12`;
const data = await this.fetchImages(baseURL);
this.GenerateHTML(data.photos)
e.target.reset();
}
async getMoreSearchedImages(index){
const baseURL = `https://api.pexels.com/v1/search?query=${this.searchValueGlobal}&page=${index}&per_page=12`;
const data = await this.fetchImages(baseURL);
console.log(data);
this.GenerateHTML(data.photos)
}
loadmoreImages(e){
let index = ++this.pageIndex;
// The getattribute() method of the Element interface returns the value of a specified attribute on the element.
// If the given attribute does not exist,the value returned will either be null or "" (the empty string);
const loadmoreData = e.target.getattribute('data-img');
if(loadmoreData === 'curated')
{
this.getImg(index)
}
else
{
this.getMoreSearchedImages(index);
}
}
}
//Creating a new instance of the PhotoGallery
const gallery = new PhotoGallery;