博客

如何使用HTML CSS和JavaScript创建图片灯箱画廊

  • Post category:jquery

当想要在网站上展示大量的图片时，使用图片灯箱画廊将会是一个不错的选择。图片灯箱画廊使得点击图片后，可以在页面上无缝地打开一个浮层，使图片得以在浮层中放大、缩小和切换。本文将为读者介绍如何使用HTML、CSS和JavaScript创建图片灯箱画廊。

第一步：HTML结构

首先，我们需要确定网页上展示灯箱画廊的位置，可以创建一个包裹所有图片的div容器，并为每个图片创建一个对应的div子容器。

<div class="gallery">
  <div class="gallery-item">
    <img src="path/to/image1">
  </div>
  <div class="gallery-item">
    <img src="path/to/image2">
  </div>
  <div class="gallery-item">
    <img src="path/to/image3">
  </div>
  <!-- more gallery items here -->
</div>

第二步：CSS样式

接下来，我们需要使用CSS样式来为画廊中的图片添加一些基本的样式，并且隐藏它们的原始版本。

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery-item {
  width: 200px;
  height: 200px;
  margin: 10px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease-in-out;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

上述代码中，我们使用了flex布局，让图片能够自适应排列。我们还将每个图片的宽高、边框和内边距设定为200像素，并使用了overflow: hidden属性来隐藏原始图片。另外，我们通过使用transition和:hover选择器，实现了当鼠标悬停于图片上时，能够放大展示图片。

第三步：JavaScript脚本

最后，我们需要添加JavaScript脚本来实现灯箱效果。我们需要创建一个弹出窗口，使其在用户点击图片时弹出，并展示图片。

首先，我们创建一个标准的HTML模板，用于展示选定的图片。

<div class="lightbox">
  <div class="lightbox-container">
    <span class="close">&times;</span>
    <img src="path/to/image">
  </div>
</div>

然后，我们需要用JavaScript枚举所有的图片容器，为它们添加一个click事件。在每个click事件中，我们需要通过获取被选中图片的img元素，创建一个新的img元素，并将其添加到灯箱容器中。

// 获取所有图片容器
var galleryItems = document.getElementsByClassName("gallery-item");

// 枚举所有图片容器
for (var i = 0; i < galleryItems.length; i++) {
  galleryItems[i].addEventListener("click", function() {
    // 获取被选中的图片的img元素
    var imageSrc = this.querySelector("img").getAttribute("src");

    // 创建并添加一个新的img元素
    var lightbox = document.createElement("div");
    lightbox.classList.add("lightbox");
    var lightboxContent = `
      <div class="lightbox-container">
        <span class="close">&times;</span>
        <img src="${imageSrc}">
      </div>
    `;
    lightbox.innerHTML = lightboxContent;
    document.body.appendChild(lightbox);

    // 关闭灯箱
    var closeButton = document.querySelector(".close");
    closeButton.addEventListener("click", function() {
      document.body.removeChild(lightbox);
    });
  });
}

示例说明

示例1：单页灯箱画廊

在这个示例中，我们将创建一个单页灯箱画廊，用于展示一个展品或产品的多个图片。

<div class="gallery">
  <div class="gallery-item">
    <img src="path/to/image1">
  </div>
  <div class="gallery-item">
    <img src="path/to/image2">
  </div>
  <div class="gallery-item">
    <img src="path/to/image3">
  </div>
  <!-- more gallery items here -->
</div>

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery-item {
  width: 200px;
  height: 200px;
  margin: 10px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease-in-out;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

var galleryItems = document.getElementsByClassName("gallery-item");

for (var i = 0; i < galleryItems.length; i++) {
  galleryItems[i].addEventListener("click", function() {
    var imageSrc = this.querySelector("img").getAttribute("src");
    var lightbox = document.createElement("div");
    lightbox.classList.add("lightbox");
    var lightboxContent = `
      <div class="lightbox-container">
        <span class="close">&times;</span>
        <img src="${imageSrc}">
      </div>
    `;
    lightbox.innerHTML = lightboxContent;
    document.body.appendChild(lightbox);
    var closeButton = document.querySelector(".close");
    closeButton.addEventListener("click", function() {
      document.body.removeChild(lightbox);
    });
  });
}

示例2：多页灯箱画廊

在这个示例中，我们将创建一个多页灯箱画廊，用于展示不同展品或产品的多个图片。

<div class="gallery-container">
  <div class="gallery-card">
    <h2>展品1</h2>
    <div class="gallery">
      <div class="gallery-item">
        <img src="path/to/image1-1">
      </div>
      <div class="gallery-item">
        <img src="path/to/image1-2">
      </div>
      <div class="gallery-item">
        <img src="path/to/image1-3">
      </div>
      <!-- more gallery items here -->
    </div>
  </div>
  <div class="gallery-card">
    <h2>展品2</h2>
    <div class="gallery">
      <div class="gallery-item">
        <img src="path/to/image2-1">
      </div>
      <div class="gallery-item">
        <img src="path/to/image2-2">
      </div>
      <div class="gallery-item">
        <img src="path/to/image2-3">
      </div>
      <!-- more gallery items here -->
    </div>
  </div>
  <!-- more gallery cards here -->
</div>

.gallery-container {
  display: flex;
  flex-wrap: wrap;
}

.gallery-card {
  flex: 1;
  margin: 20px;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery-item {
  width: 150px;
  height: 150px;
  margin: 10px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease-in-out;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

var galleryItems = document.getElementsByClassName("gallery-item");

for (var i = 0; i < galleryItems.length; i++) {
  galleryItems[i].addEventListener("click", function() {
    var imageSrc = this.querySelector("img").getAttribute("src");
    var lightbox = document.createElement("div");
    lightbox.classList.add("lightbox");
    var lightboxContent = `
      <div class="lightbox-container">
        <span class="close">&times;</span>
        <img src="${imageSrc}">
      </div>
    `;
    lightbox.innerHTML = lightboxContent;
    document.body.appendChild(lightbox);
    var closeButton = document.querySelector(".close");
    closeButton.addEventListener("click", function() {
      document.body.removeChild(lightbox);
    });
  });
}
Tags: