主页 / 问题 / 1590841
Accepted
Aiden
Asked:2024-08-16 00:32:51 +0000 UTC2024-08-16 00:32:51 +0000 UTC

从一个 HTML 页面打开不同相册中的不同图像

  • 772

如何用js制作相册。

您单击带有动物的相册 - 将打开带有动物图像的页面，您单击带有树木的相册 - 打开带有树木图像的页面，含义很明确。

问题是如何实施这一点。

为 20 个专辑制作 20 个 html 页面显然不是一种选择，我正在考虑制作一个主要 html 文档，并在其中为所有专辑制作一个 html 文档。但我不知道如何写，以便打开不同的相册时，会打开不同的图像。谁能告诉我应该朝哪个方向来实施这个？或者我在哪里可以读到这方面的内容？没有js后端可以做到这一点吗？

<main class="albom">
  <ul class="cards">
    <li class="card">
      <a href="./photos.html">
        <img class="picture" src="./pictures/IMG_2229.JPG">
      </a>
    </li>
    <li class="card">
      <a href="./photos.html">
        <img class="picture" src="./pictures/IMG_5398.JPG">
      </a>
    </li>
    <li class="card">
      <a href="./photos.html">
        <img class="picture" src="./pictures/IMG_5398.JPG">
      </a>
    </li>
    <li class="card">
      <a href="./photos.html">
        <img class="picture" src="./pictures/IMG_5398.JPG">
      </a>
    </li>
  </ul>
</main>
javascript

2 个回答

  1. 我将提出一个用 JavaScript 简单实现相册的选项，当您单击<a>带有属性的“链接”时，data-album将加载预定义数组中的相应图像。这些图像将显示在imagesContainer每次新上传之前需要清除的容器中。imagesContainer.innerHTML = "";

    document.addEventListener("DOMContentLoaded", function() {
  const albums = {
    animals: [
      "https://isstatic.askoverflow.dev/7oVRCSke.jpg",
      "https://isstatic.askoverflow.dev/LRuawLtd.jpg",
      "https://isstatic.askoverflow.dev/fzB8KfZ6.jpg"
    ],
    trees: [
      "https://isstatic.askoverflow.dev/tCn2EM1y.jpg",
      "https://isstatic.askoverflow.dev/kEgUX3lb.jpg",
      "https://isstatic.askoverflow.dev/TiGiwwJj.jpg"
    ]
  };

  const albumLinks = document.querySelectorAll(".album-list a");
  const imagesContainer = document.getElementById("imagesContainer");

  albumLinks.forEach(link => {
    link.addEventListener("click", function(event) {
      event.preventDefault();
      const albumName = link.dataset.album;
      loadAlbum(albumName);
    });
  });

  function loadAlbum(albumName) {
    imagesContainer.innerHTML = "";

    if (albums[albumName]) {
      albums[albumName].forEach(src => {
        const img = document.createElement("img");
        img.src = src;
        imagesContainer.appendChild(img);
      });
    }
  }
});
    .album-list {
  display: flex;
  gap: 20px;
}

.album-list a {
  cursor: pointer;
  text-decoration: underline;
}

.images-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.images-container img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}
    <div class="album-list">
  <a href="#" data-album="animals">Альбом с животными</a>
  <a href="#" data-album="trees">Альбом с деревьями</a>
</div>

<div class="images-container" id="imagesContainer">
  <!-- Изображения будут подгружаться сюда -->
</div>

    • 2
  2. Best Answer

    创建一个文件album.html，创建文件并将其连接到它album.js

    在主页的相册链接中，您将写下以下内容：/path/to/album.html?id=<название или id альбома>。同样在主JS文件中，您需要创建一个类型的对象：

    const albums = {
  first: [
    "Some links for this album"
  ],
  second: [
    "Some links for this album"
  ],
  ...
}

    接下来，将该对象保存在localStorage

    单击该链接后，您将被重定向到一个文件album.html，其中地址栏将指示id您需要进入该文件album.js。在同一个文件中，您将需要获取localStorage.从这个对象中，您可以使用id地址栏中的equal 键获取相册

    接下来，根据生成的相册（即一组图片链接），您需要生成一个相册，albom.html仅此而已

    这样您将拥有一个页面，根据奉献者的不同，该页面id将显示所需的专辑

    当然，您需要处理id它不在对象中的情况。或者，您可以发送到 404 页面

    我大致是这样看待你们网站的结构的：

    在此输入图像描述

    以下是每个文件的内容：

    index.html

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Albums</title>
        <script defer src="/localDB/albumsDB.js"></script>
        <script defer src="index.js"></script>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <main class="albums_preview_container">
            <h1>Ниже вы можете увидеть список альбомов</h1>

            <ul class="albums_preview_list"></ul>
        </main>
    </body>
</html>

    index.css

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

ul {
    list-style: none;
}

.albums_preview_container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.albums_preview_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(100px, 1fr);
    gap: 8px;
}

.albums_preview_list > a {
    width: 100%;
    height: 100%;
}

.album_preview_item > a > .preview_image {
    width: 100%;
    height: 100%;
}

    index.js

    localStorage.setItem('albumsDB', JSON.stringify(albumsDB));

const albumsList = document.querySelector('.albums_preview_list');
const fragment = document.createDocumentFragment();

/**
 * @param {Album} albumData
 * @param {string} albumId
 * @returns {HTMLLIElement}
 */
const createAlbumItem = (albumData, albumId) => {
    const albumItem = document.createElement("li");
    albumItem.classList.add("album_preview_item");
    
    const linkToWholeAlbum = document.createElement("a");
    linkToWholeAlbum.href = `/Album/pages/album/album.html?id=${albumId}`;
    
    const previewImage = document.createElement("img");
    previewImage.src = albumData.images[0];
    previewImage.classList.add('preview_image');
    
    linkToWholeAlbum.append(previewImage);
    albumItem.append(linkToWholeAlbum);
    
    return albumItem;
}

for (const albumId in albumsDB) {
    const albumData = albumsDB[albumId];
    
    fragment.append(createAlbumItem(albumData, albumId));
}

albumsList.append(fragment);

    localDB/albumsDB.js

    /**
 * @typedef {{
 *     title: string,
 *     images: string[]
 * }} Album
 */

/**
 * @type {{[key: string]: Album}}
 */
const albumsDB = {
    cats: {
        title: 'Кошки',
        images: [
            'https://www.alleycat.org/wp-content/uploads/2019/03/FELV-cat.jpg',
            'https://d2zp5xs5cp8zlg.cloudfront.net/image-53920-800.jpg',
            'https://www.vmcdn.ca/f/files/sootoday/village-life/pets/most-popular-cat-breeds/adobestock_66233948.jpeg;w=960'
        ]
    },
    dogs: {
        title: 'Собаки',
        images: [
            'https://cdn.britannica.com/79/232779-050-6B0411D7/German-Shepherd-dog-Alsatian.jpg',
            'https://dogtime.com/wp-content/uploads/sites/12/2023/11/GettyImages-529202089-e1701095552546.jpg?w=1024',
            'https://ichef.bbci.co.uk/news/976/cpsprodpb/12EAD/production/_131058477_dog.jpg'
        ]
    },
    nature: {
        title: 'Природа',
        images: [
            'https://good-nature-blog-uploads.s3.amazonaws.com/uploads/2022/01/good-nature-homepage-hero_2-scaled.jpg',
            'https://d19h8kn98xvxar.cloudfront.net/images/_hero/connectwithnature.jpg',
            'https://miro.medium.com/v2/resize:fit:1400/1*x0vDKUdcRMx7kfsFGq689w.jpeg'
        ]
    }
}

    pages/album/album.html

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Album</title>
        <link rel="stylesheet" href="album.css">
        <script defer src="album.js"></script>
    </head>
    <body>
        <main class="album_container">
            <h1 class="album_title">Альбом: </h1>

            <ul class="images"></ul>
        </main>
    </body>
</html>

    pages/album/album.css

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

ul {
    list-style: none;
}

.album_container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(100px, 1fr);
    gap: 8px;
}

.image > img {
    width: 100%;
    height: 100%;
}

    pages/album/album.js

    const albumsDB = JSON.parse(localStorage.getItem("albumsDB")) || {};
const albumId = new URLSearchParams(document.location.search).get("id");

/**
 * @type {Album | undefined}
 */
const album = albumsDB[albumId];

if (typeof album === 'undefined') {
    alert("No Album Found");
    
    window.location = '/Album';
}

const headerText = document.querySelector('h1');
headerText.textContent += album.title;

const imagesList = document.querySelector('.images');
const fragment = document.createDocumentFragment();

/**
 * @param {string} imageSrc
 * @returns {HTMLLIElement}
 */
const createAlbumItem = (imageSrc) => {
    const albumItem = document.createElement("li");
    albumItem.classList.add("image");
    
    const image = document.createElement("img");
    image.src = imageSrc;
    
    albumItem.append(image);
    
    return albumItem;
}

for (const imageSrc of album.images) {
    fragment.append(createAlbumItem(imageSrc));
}

imagesList.append(fragment);
    • 1

相关问题