資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 HTML、CSS 和 JavaScript 建立圖片燈箱畫廊？
在當今計算技術時代，視覺媒體在吸引和保持觀眾注意力方面的影響力不容忽視。網頁上展示圖片的燈箱畫廊是一種有效機制，透過提供使用者友好且簡單的介面來促進使用者互動。為什麼不嘗試使用此工具並親自了解它如何提升您網站的效能呢？藉助 HTML、CSS 和 JavaScript，可以建立自定義圖片燈箱畫廊，並輕鬆整合到網站中。在本篇介紹中，我們將採用增量方法來構建一個基本的圖片燈箱畫廊，可以根據您的具體需求進行微調。無論您是新手還是經驗豐富的 Web 開發人員，本指南都將為您提供開始的基礎知識。
圖片燈箱畫廊
圖片燈箱畫廊是網站上使用的一項功能，用於以更大的尺寸顯示圖片，以覆蓋層的方式覆蓋在網頁上，並可以選擇在多張圖片之間導航。使用者通常透過點選縮圖來觸發燈箱，然後全尺寸圖片就會出現在燈箱中。燈箱通常包括一些控制元件，例如用於在圖片之間導航的箭頭、用於退出燈箱的關閉按鈕，以及可能顯示圖片說明的文字。圖片燈箱畫廊的目的是為使用者提供一種簡潔、優雅的方式來檢視網站上的圖片，而無需離開主頁面。圖片燈箱畫廊通常用於顯示產品圖片、圖片庫和其他型別的視覺內容。
方法
我們將使用 HTML、CSS 和 JavaScript 建立圖片燈箱畫廊。HTML 結構分為兩個主要部分——畫廊和燈箱。畫廊部分包含一組顯示為縮圖的圖片，包裹在“a”標籤內，而燈箱部分是一個覆蓋頁面的容器，用於顯示全尺寸圖片。CSS 樣式化畫廊和燈箱。畫廊部分設定為 flex 佈局，並在容器寬度超出時自動換行。燈箱部分設定為具有深色背景顏色，並將其內容水平和垂直居中。燈箱圖片設定為最大寬度和高度為燈箱容器的 90%。關閉按鈕具有絕對定位，設定為距離燈箱頂部和右側 20 畫素，字型大小為 30 畫素，白色背景顏色。JavaScript 程式碼在畫廊和關閉按鈕上設定事件監聽器，分別用於開啟和關閉燈箱。當點選圖片縮圖時，燈箱會顯示，並且全尺寸圖片會設定為燈箱圖片的源。當點選關閉按鈕時，燈箱會再次隱藏。
為了理解程式碼，我們將仔細檢查 HTML、CSS 和 JavaScript 程式碼段。顯示元件使用 flexbox 模型以網格形式構建，並且在被點選時，燈箱會顯示為一個覆蓋整個螢幕的實體。它包含特定的圖片和一個關閉按鈕，並顯示半透明的背景。在使用者選擇畫廊中的圖片後，JavaScript 偵聽點選事件並在燈箱中顯示關聯的圖片，使用統一資源定位符作為圖片識別符號。點選關閉按鈕會觸發另一個點選事件，最終導致燈箱消失並使使用者返回畫廊。
示例
以下是我們將在此示例中逐步講解的完整程式碼：
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery a {
display: block;
margin: 10px;
}
.gallery img{
height: 120px;
width: 120px;
}
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
}
.close {
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
background-color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
}
</style>
</head>
<body>
<h4>How to Create Image Lightbox Gallery using HTML CSS and JavaScript?</h4>
<div class="gallery">
<a href="image1.jpg">
<img src="https://picsum.photos/seed/picsum/200/300" alt="Image 1">
</a>
<a href="image2.jpg">
<img src="https://picsum.photos/id/237/200/300" alt="Image 2">
</a>
</div>
<div class="lightbox">
<img src="">
<button class="close">X</button>
</div>
<script>
const gallery = document.querySelector('.gallery');
const lightbox = document.querySelector('.lightbox');
const close = document.querySelector('.close');
const lightboxImg = lightbox.querySelector('img');
gallery.addEventListener('click', function (event) {
event.preventDefault();
lightbox.style.display = 'flex';
lightboxImg.src = event.target.src || event.target.parentNode.href;
});
close.addEventListener('click', function () {
lightbox.style.display = 'none';
});
</script>
</body>
</html>
結論
總之，使用 HTML、CSS 和 JavaScript 建立視覺燈箱畫廊是一項相對簡單的任務，並提供了豐富的個性化選項。透過實施本文中列出的指南，您可以快速建立一個視覺燈箱畫廊，以滿足您網站的特定需求。HTML、CSS 和 JavaScript 的結合為構建動態、互動式的圖片畫廊提供了堅實的基礎，這將增強您網站的吸引力和可訪問性。無論您是新手還是經驗豐富的網站設計師，我都希望本指南能為您提供必要的知識和靈感來設計您自己的獨特圖片燈箱畫廊。因此，從今天開始您的旅程，為您的網站增添新的視覺效果吧！
3K+ 瀏覽量
