疯狂做受xxxx国产,高潮毛片无遮挡高清免费,а√天堂8中文

基於類別的過濾：使用者可以按網(wǎng)頁設(shè)計、平面設(shè)計和攝影等類別過濾項目。
\n即時搜尋：搜尋列根據(jù)輸入過濾項目，增強使用者體驗。
\n燈箱模態(tài)：<\/p>\n\n

圖像放大：點擊項目將開啟一個模式，顯示更大的圖像和詳細說明。
\n無縫導(dǎo)航：使用者可以透過點擊關(guān)閉按鈕或內(nèi)容區(qū)域之外輕鬆關(guān)閉模式。
\n暗\/亮模式切換：<\/p>\n

使用者偏好：使用者可以在深色和淺色主題之間切換，並將他們的偏好保存在 localStorage 中以便跨會話持久保存。
\n圖示切換：切換按鈕圖示動態(tài)變化以反映目前主題。
\n實施暗\/亮模式
\n深色模式不僅提供了現(xiàn)代美感，還增強了使用者在低光源環(huán)境下的可訪問性。以下是如何在您的作品集中整合暗\/亮模式切換：<\/p>\n\n

CSS 變數(shù)：我們已經(jīng)為淺色和深色主題定義了變數(shù)。
\nJavaScript Toggle：script.js 處理暗模式類別的新增和刪除，從而相應(yīng)地更改主題。
\n保留使用者偏好：使用 localStorage，儲存使用者的主題偏好並在後續(xù)造訪時套用。
\n增強使用者體驗：搜尋與過濾
\n動態(tài)過濾和即時搜尋欄使用戶能夠輕鬆瀏覽您的專案。 <\/p>\n\n

按類別過濾：使用者可以點擊篩選按鈕來查看特定類別內(nèi)的項目。
\n即時搜尋：當(dāng)使用者在搜尋欄中輸入內(nèi)容時，系統(tǒng)會根據(jù)輸入即時篩選項目，提供即時回饋。
\n優(yōu)化回應(yīng)能力和可訪問性
\n優(yōu)雅的產(chǎn)品組合必須響應(yīng)迅速且易於訪問，以滿足所有用戶的需求。 <\/p>\n\n

靈活的佈局：使用 CSS Grid 和 Flexbox 確保圖庫適應(yīng)各種螢?zāi)怀叽纭?
\n媒體查詢：根據(jù)裝置寬度調(diào)整字體大小、填充和佈局，以獲得最佳觀看效果。
\n輔助功能：<\/p>\n\n

圖像的替代文字：描述性替代屬性可提高螢?zāi)婚喿x器的可存取性。
\n鍵盤導(dǎo)航：確保所有互動元素都可以透過鍵盤存取。
\n顏色對比：保持文字和背景之間的高對比度以提高可讀性。
\n部署您的投資組合
\n一旦對您的產(chǎn)品組合感到滿意，就可以部署給全世界看。 <\/p>\n\n

GitHub Pages：靜態(tài)網(wǎng)站的免費主機服務(wù)。
\nNetlify：提供持續(xù)部署和免費託管以及自訂網(wǎng)域支援。
\nVercel：為前端專案提供無縫部署。
\n自訂域：<\/p>\n\n

購買自訂域名，讓您的作品集更加專業(yè)和難忘。
\nSEO 優(yōu)化：<\/p>\n\n

使用有意義的元標(biāo)籤、標(biāo)題和描述。
\n透過壓縮圖片和縮小 CSS\/JS 檔案來優(yōu)化載入時間。
\n推廣您的投資組合
\n擁有令人驚嘆的投資組合只是第一步。推廣它可以確保它到達您的目標(biāo)受眾。 <\/p>\n\n

在 LinkedIn、Twitter 和 Facebook 等平臺上分享您的作品集。
\n使用相關(guān)主題標(biāo)籤來提高可見度。
\n網(wǎng)路：<\/p>\n\n

與 Reddit、Stack Overflow 或 Dribbble 上的社群互動。
\n參加虛擬或面對面的社交活動來展示您的作品。
\n搜尋引擎優(yōu)化與內(nèi)容行銷：<\/p>\n

建立與您的領(lǐng)域相關(guān)的部落格以增加自然流量。
\n使用相關(guān)關(guān)鍵字針對搜尋引擎優(yōu)化您的作品集。
\n電子郵件簽名：<\/p>\n\n

在電子郵件簽名中包含指向您的作品集的鏈接，以被動地推廣它。
\n結(jié)論
\n創(chuàng)建優(yōu)雅的互動式作品集畫廊是一項有益的努力，它以專業(yè)且引人入勝的方式展示您的技能和專案。透過利用 HTML5、CSS3 和 JavaScript，您可以建立在數(shù)位領(lǐng)域脫穎而出的響應(yīng)式動態(tài)產(chǎn)品組合。 <\/p>\n\n

探索更多我的作品：
\nLinkedIn：皮耶-羅曼洛佩茲
\n角鬥士之戰(zhàn)：gladiatorsbattle.com
\nDivWeb：divweb.fr
\n推特：@GladiatorsBT
\nJeanFernandsEtti：jeanfernandsetti.fr
\nXavierFlabat：xavier-flabat.com
\n請隨時透過我的社交媒體管道或訪問我的網(wǎng)站來了解有關(guān)我的項目和服務(wù)的更多資訊。我始終對合作和新機會持開放態(tài)度！ <\/p>\n\n

作者簡介
\nPierre-Romain Lopez 是一位充滿熱情的 Web 開發(fā)人員和設(shè)計師，對細節(jié)有著敏銳的洞察力，致力於創(chuàng)造引人入勝且使用者友好的數(shù)位體驗。 Pierre-Romain 擁有涵蓋網(wǎng)頁設(shè)計、平面設(shè)計和攝影的多元化產(chǎn)品組合，擅長透過程式碼和設(shè)計將創(chuàng)意願景變?yōu)??現(xiàn)實。 <\/p>\n\n\n \n\n \n "}

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

首頁

web前端

js教程

使用 HTMLCSS 和 JavaScript 建立優(yōu)雅的互動式作品集畫廊

Susan Sarandon

Nov 17, 2024 pm 09:25 PM

Building an Elegant Interactive Portfolio Gallery with HTMLCSSand JavaScript

在當(dāng)今的數(shù)位時代，您的作品集可以作為您的專業(yè)名片。無論您是網(wǎng)頁開發(fā)人員、平面設(shè)計師、攝影師或任何創(chuàng)意專業(yè)人士，精美的互動式作品集都可以顯著增強您的線上形象、展示您的技能並吸引潛在客戶或雇主。在本教程中，我們將引導(dǎo)您使用 HTML5、CSS3 和 JavaScript 建立複雜的互動式作品集。最後，您將擁有一個響應(yīng)式圖庫，具有動態(tài)過濾、即時搜尋列、暗/亮模式切換以及直覺的燈箱模式，可有效顯示您的項目。

圖1：優(yōu)雅的互動作品集預(yù)覽

為什麼是互動作品集？
先決條件
設(shè)定項目結(jié)構(gòu)
建立 HTML 結(jié)構(gòu)
使用 CSS 樣式
使用 JavaScript 加入互動性
實現(xiàn)暗/亮模式
增強使用者體驗：搜尋與過濾
最佳化回應(yīng)能力和可訪問性
部署您的投資組合
推廣您的作品集
結(jié)論
為什麼是互動作品集？
互動式作品集不僅僅是列出您的專案；它吸引訪客，突出您的技能，並展示您創(chuàng)建用戶友好且美觀的介面的能力。過濾、搜尋列和暗/亮模式等互動元素不僅可以增強使用者體驗，還可以展示您對現(xiàn)代 Web 開發(fā)技術(shù)的熟練程度。

先決條件
在深入建立您的投資組合之前，請確保您擁有：

HTML、CSS 和 JavaScript 的基礎(chǔ)知識：了解基礎(chǔ)知識至關(guān)重要。
程式碼編輯器：建議使用 Visual Studio Code、Sublime Text 或 Atom 等工具。
網(wǎng)頁瀏覽器：帶有開發(fā)人員工具的現(xiàn)代瀏覽器，例如 Google Chrome 或 Mozilla Firefox。
您的專案圖像：展示您作品的高品質(zhì)視覺效果。
設(shè)定項目結(jié)構(gòu)
有系統(tǒng)地組織您的專案文件，以便於管理和可擴展性。

作品集畫廊/
│
├──index.html
├── styles.css
├── script.js
└── 資產(chǎn)/
└── 圖片/
├── web-project1.jpg
├── 圖形項目1.jpg
└── 攝影-project1.jpg
index.html：主要 HTML 檔案。
styles.css：包含所有 CSS 樣式。
script.js：保存用於互動的 JavaScript 程式碼。
asset/images/: 項目圖片目錄。
建立 HTML 結(jié)構(gòu)
首先製作語義且可存取的 HTML 結(jié)構(gòu)。這個基礎(chǔ)可確保您的作品集用戶友好且經(jīng)過 SEO 優(yōu)化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Elegant Interactive Portfolio Gallery</title>
  <!-- Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- Google Fonts for Typography -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <!-- Stylesheet -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Header Section -->
  <header>
    <div>



<p>Key Components:<br>
Header:</p>

<p>Logo and Title: Incorporates a Font Awesome icon for a professional touch.<br>
Search Bar: Allows users to search through your projects in real-time.<br>
Theme Toggle: Enables users to switch between dark and light modes.<br>
Navigation Filters: Buttons to filter projects by category.<br>
Gallery:</p>

<p>Gallery Items: Each project is encapsulated within a gallery-item div, containing an image and an overlay with the project title and description.<br>
Lightbox Modal:</p>

<p>Lightbox Structure: Displays an enlarged view of the project image along with detailed information when a gallery item is clicked.<br>
Footer:</p>

<p>Social Links: Provides links to your social media profiles and websites with corresponding icons.<br>
Styling with CSS<br>
To achieve a modern and elegant look, we'll utilize CSS Grid for the gallery layout, flexbox for the header and navigation, and CSS variables for easy theming. We'll also implement responsive design to ensure the portfolio looks great on all devices.<br>
</p>

<pre class="brush:php;toolbar:false">/* =====================================================================
   1. CSS Variables for Theme Management
   ===================================================================== */

/* Light Theme Colors */
:root {
  --color-bg-light: #f0f2f5;
  --color-text-light: #333333;
  --color-header-bg-light: #ffffff;
  --color-header-text-light: #333333;
  --color-overlay-light: rgba(0, 0, 0, 0.7);
  --color-footer-bg-light: #ffffff;
  --color-footer-text-light: #333333;
  --color-button-bg-light: #e0e0e0;
  --color-button-hover-light: #333333;
  --color-button-text-light: #333333;
  --color-button-hover-text-light: #ffffff;

  /* Font Sizes */
  --font-size-base: 16px;
  --font-size-large: 2.5rem;
  --font-size-medium: 1.2rem;
  --font-size-small: 0.9rem;

  /* Transition Duration */
  --transition-duration: 0.3s;
}

/* Dark Theme Colors */
body.dark-mode {
  --color-bg-dark: #121212;
  --color-text-dark: #e0e0e0;
  --color-header-bg-dark: #1e1e1e;
  --color-header-text-dark: #e0e0e0;
  --color-overlay-dark: rgba(0, 0, 0, 0.85);
  --color-footer-bg-dark: #1e1e1e;
  --color-footer-text-dark: #e0e0e0;
  --color-button-bg-dark: #333333;
  --color-button-hover-dark: #ffffff;
  --color-button-text-dark: #ffffff;
  --color-button-hover-text-dark: #333333;
}

/* =====================================================================
   2. Reset and Base Styles
   ===================================================================== */

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

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--color-bg-light);
  color: var(--color-text-light);
  transition: background-color var(--transition-duration), color var(--transition-duration);
  line-height: 1.6;
}

/* Dark Mode Background and Text */
body.dark-mode {
  background-color: var(--color-bg-dark);
  color: var(--color-text-dark);
}

/* =====================================================================
   3. Header Styles
   ===================================================================== */

header {
  background-color: var(--color-header-bg-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
}

body.dark-mode header {
  background-color: var(--color-header-bg-dark);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header h1 {
  font-size: var(--font-size-large);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-header-text-light);
  transition: color var(--transition-duration);
}

body.dark-mode .header-container h1 {
  color: var(--color-header-text-dark);
}

.header-controls {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

#searchBar {
  padding: 0.6rem 1.2rem;
  border: 1px solid #ccc;
  border-radius: 30px;
  width: 250px;
  transition: border-color var(--transition-duration), background-color var(--transition-duration), color var(--transition-duration);
}

#searchBar:focus {
  border-color: #555;
  outline: none;
}

body.dark-mode #searchBar {
  background-color: #2c2c2c;
  color: #e0e0e0;
  border: 1px solid #555;
}

body.dark-mode #searchBar::placeholder {
  color: #aaa;
}

#themeToggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--color-button-text-light);
  transition: color var(--transition-duration);
}

body.dark-mode #themeToggle {
  color: var(--color-button-text-dark);
}

#themeToggle:hover {
  color: var(--color-button-hover-text-light);
}

body.dark-mode #themeToggle:hover {
  color: var(--color-button-hover-text-dark);
}

/* =====================================================================
   4. Navigation Styles
   ===================================================================== */

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

nav .filter-btn {
  padding: 0.6rem 1.2rem;
  border: none;
  background-color: var(--color-button-bg-light);
  cursor: pointer;
  transition: background-color var(--transition-duration), color var(--transition-duration), transform var(--transition-duration);
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-medium);
}

nav .filter-btn:hover {
  background-color: var(--color-button-hover-light);
  color: var(--color-button-hover-text-light);
  transform: translateY(-3px);
}

nav .filter-btn.active {
  background-color: #333333;
  color: #ffffff;
}

body.dark-mode nav .filter-btn {
  background-color: var(--color-button-bg-dark);
  color: var(--color-button-text-dark);
}

body.dark-mode nav .filter-btn:hover {
  background-color: var(--color-button-hover-dark);
  color: var(--color-button-hover-text-dark);
}

body.dark-mode nav .filter-btn.active {
  background-color: #ffffff;
  color: #333333;
}

/* =====================================================================
   5. Gallery Styles
   ===================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 3rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}

.gallery-item:hover {
  transform: translateY(-15px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-duration);
}

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

.overlay {
  position: absolute;
  bottom: 0;
  background: var(--color-overlay-light);
  color: #ffffff;
  width: 100%;
  transform: translateY(100%);
  transition: transform var(--transition-duration), background-color var(--transition-duration);
  padding: 1.2rem;
  text-align: center;
}

.gallery-item:hover .overlay {
  transform: translateY(0);
}

body.dark-mode .overlay {
  background: var(--color-overlay-dark);
}

.overlay h3 {
  margin-bottom: 0.6rem;
  font-size: var(--font-size-medium);
  font-weight: 700;
}

.overlay p {
  font-size: var(--font-size-small);
  line-height: 1.4;
}

/* =====================================================================
   6. Lightbox Styles
   ===================================================================== */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  background-color: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  animation: slideDown 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

body.dark-mode .lightbox-content {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

.lightbox img {
  width: 100%;
  height: auto;
  display: block;
}

.lightbox-caption {
  padding: 1.5rem;
  background-color: #f9f9f9;
  transition: background-color var(--transition-duration), color var(--transition-duration);
}

body.dark-mode .lightbox-caption {
  background-color: #2c2c2c;
}

.lightbox-caption h3 {
  margin-bottom: 0.8rem;
  font-size: var(--font-size-medium);
}

.lightbox-caption p {
  font-size: var(--font-size-small);
  line-height: 1.5;
}

/* Close Button Styles */
.close {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #ffffff;
  font-size: 2rem;
  cursor: pointer;
  transition: color var(--transition-duration), transform var(--transition-duration);
}

.close:hover {
  color: #cccccc;
  transform: scale(1.1);
}

body.dark-mode .close {
  color: #e0e0e0;
}

body.dark-mode .close:hover {
  color: #ffffff;
}

/* =====================================================================
   7. Footer Styles
   ===================================================================== */

footer {
  text-align: center;
  padding: 2rem 1rem;
  background-color: var(--color-footer-bg-light);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 3rem;
  transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
}

body.dark-mode footer {
  background-color: var(--color-footer-bg-dark);
  box-shadow: 0 -2px 8px rgba(255, 255, 255, 0.1);
}

footer p {
  font-size: var(--font-size-small);
  color: var(--color-footer-text-light);
  transition: color var(--transition-duration);
}

body.dark-mode footer p {
  color: var(--color-footer-text-dark);
}

footer a {
  color: inherit;
  text-decoration: none;
  margin: 0 0.5rem;
  transition: color var(--transition-duration), transform var(--transition-duration);
}

footer a:hover {
  color: #0073e6;
  transform: scale(1.05);
}

body.dark-mode footer a:hover {
  color: #1e90ff;
}

/* =====================================================================
   8. Responsive Design Adjustments
   ===================================================================== */

@media (max-width: 768px) {
  header h1 {
    font-size: 2rem;
  }

  .header-controls {
    flex-direction: column;
    gap: 0.5rem;
  }

  #searchBar {
    width: 200px;
  }

  nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }

  .gallery {
    padding: 2rem 1rem;
    gap: 1.5rem;
  }

  .lightbox-content {
    max-width: 90%;
    max-height: 90%;
  }
}

@media (max-width: 480px) {
  header h1 {
    font-size: 1.8rem;
  }

  #searchBar {
    width: 180px;
  }

  .gallery-item {
    border-radius: 10px;
  }

  .overlay h3 {
    font-size: 1rem;
  }

  .overlay p {
    font-size: 0.8rem;
  }

  .lightbox-caption {
    padding: 1rem;
  }

  .lightbox-caption h3 {
    font-size: 1rem;
  }

  .lightbox-caption p {
    font-size: 0.8rem;
  }

  footer p {
    font-size: 0.8rem;
  }
}

/* =====================================================================
   9. Keyframe Animations
   ===================================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

增強功能說明：
用於主題管理的 CSS 變數(shù)：

淺色和深色主題變數(shù)：利用 CSS 變數(shù)可以在整個樣式表中輕鬆主題化和一致的顏色管理。
現(xiàn)代版式與版面：

字體大小和行高：各種字體大小的定義變數(shù)確保一致性和可擴展性。
盒子陰影和過渡：增加深度和流暢的互動增強視覺吸引力。
響應(yīng)式設(shè)計：

媒體查詢：確保產(chǎn)品組合無縫適應(yīng)不同的螢?zāi)怀叽?，在行動裝置、平板電腦和桌上型電腦上提供最佳的觀賞體驗。
互動元素：

懸停效果：微妙的縮放和陰影增強使互動感覺更加動態(tài)和引人入勝。
平滑過渡：確保主題切換和燈箱動畫等變化感覺自然流暢。
輔助功能注意事項：

顏色對比：在文字和背景之間保持足夠的對比度，以提高可讀性。
互動式元素大?。喊粹o和互動式元素的大小適當(dāng)，以便在所有裝置上輕鬆互動。
使用 JavaScript 新增互動
JavaScript 透過處理使用者互動（例如過濾專案、打開燈箱以及在深色和淺色模式之間切換）來讓您的作品集栩栩如生。

// =====================================================================
// 1. Selecting Elements
// =====================================================================

const filterButtons = document.querySelectorAll('.filter-btn');
const galleryItems = document.querySelectorAll('.gallery-item');
const searchBar = document.getElementById('searchBar');

const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const lightboxTitle = document.getElementById('lightbox-title');
const lightboxDescription = document.getElementById('lightbox-description');
const closeBtn = document.querySelector('.close');

const themeToggleBtn = document.getElementById('themeToggle');
const body = document.body;
const header = document.querySelector('header');
const galleryItemsArray = Array.from(galleryItems);
const lightboxContent = document.querySelector('.lightbox-content');
const overlayElements = document.querySelectorAll('.overlay');
const filterBtns = document.querySelectorAll('.filter-btn');

// =====================================================================
// 2. Filtering Functionality
// =====================================================================

function filterGallery() {
  const activeFilter = document.querySelector('.filter-btn.active').getAttribute('data-filter');
  const searchQuery = searchBar.value.toLowerCase();

  galleryItems.forEach(item => {
    const itemCategory = item.getAttribute('data-category');
    const itemTitle = item.querySelector('.overlay h3').textContent.toLowerCase();

    if (
      (activeFilter === 'all' || itemCategory === activeFilter) &&
      itemTitle.includes(searchQuery)
    ) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
}

// Event Listeners for Filter Buttons
filterButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Remove 'active' class from all buttons
    filterButtons.forEach(btn => btn.classList.remove('active'));
    // Add 'active' class to the clicked button
    button.classList.add('active');

    // Filter the gallery based on the selected category
    filterGallery();
  });
});

// Event Listener for Search Bar
searchBar.addEventListener('input', () => {
  filterGallery();
});

// =====================================================================
// 3. Lightbox Functionality
// =====================================================================

// Function to Open Lightbox
function openLightbox(item) {
  const imgSrc = item.querySelector('img').src;
  const title = item.querySelector('.overlay h3').textContent;
  const description = item.querySelector('.overlay p').textContent;

  lightboxImg.src = imgSrc;
  lightboxTitle.textContent = title;
  lightboxDescription.textContent = description;

  lightbox.classList.add('active');
  body.style.overflow = 'hidden'; // Prevent background scrolling
}

// Event Listeners for Gallery Items
galleryItems.forEach(item => {
  item.addEventListener('click', () => {
    openLightbox(item);
  });
});

// Function to Close Lightbox
function closeLightbox() {
  lightbox.classList.remove('active');
  body.style.overflow = 'auto'; // Restore background scrolling
}

// Event Listener for Close Button
closeBtn.addEventListener('click', () => {
  closeLightbox();
});

// Event Listener for Clicking Outside Lightbox Content
window.addEventListener('click', (e) => {
  if (e.target === lightbox) {
    closeLightbox();
  }
});

// =====================================================================
// 4. Theme Toggle Functionality
// =====================================================================

// Retrieve Saved Theme from Local Storage
const savedTheme = localStorage.getItem('theme') || 'light-mode';

// Function to Apply Theme
function applyTheme(theme) {
  if (theme === 'dark-mode') {
    body.classList.add('dark-mode');
    header.classList.add('dark-mode');
    lightbox.classList.add('dark-mode');
    lightboxContent.classList.add('dark-mode');
    overlayElements.forEach(el => el.classList.add('dark-mode'));
    galleryItemsArray.forEach(item => item.classList.add('dark-mode'));
    filterBtns.forEach(btn => btn.classList.add('dark-mode'));

    // Change Icon to Sun
    themeToggleBtn.querySelector('i').classList.remove('fa-moon');
    themeToggleBtn.querySelector('i').classList.add('fa-sun');
  } else {
    body.classList.remove('dark-mode');
    header.classList.remove('dark-mode');
    lightbox.classList.remove('dark-mode');
    lightboxContent.classList.remove('dark-mode');
    overlayElements.forEach(el => el.classList.remove('dark-mode'));
    galleryItemsArray.forEach(item => item.classList.remove('dark-mode'));
    filterBtns.forEach(btn => btn.classList.remove('dark-mode'));

    // Change Icon to Moon
    themeToggleBtn.querySelector('i').classList.remove('fa-sun');
    themeToggleBtn.querySelector('i').classList.add('fa-moon');
  }
}

// Apply Saved Theme on Page Load
applyTheme(savedTheme);

// Event Listener for Theme Toggle Button
themeToggleBtn.addEventListener('click', () => {
  if (body.classList.contains('dark-mode')) {
    applyTheme('light-mode');
    localStorage.setItem('theme', 'light-mode');
  } else {
    applyTheme('dark-mode');
    localStorage.setItem('theme', 'dark-mode');
  }
});

主要功能：
篩選項目：

基於類別的過濾：使用者可以按網(wǎng)頁設(shè)計、平面設(shè)計和攝影等類別過濾項目。
即時搜尋：搜尋列根據(jù)輸入過濾項目，增強使用者體驗。
燈箱模態(tài)：

圖像放大：點擊項目將開啟一個模式，顯示更大的圖像和詳細說明。
無縫導(dǎo)航：使用者可以透過點擊關(guān)閉按鈕或內(nèi)容區(qū)域之外輕鬆關(guān)閉模式。
暗/亮模式切換：

使用者偏好：使用者可以在深色和淺色主題之間切換，並將他們的偏好保存在 localStorage 中以便跨會話持久保存。
圖示切換：切換按鈕圖示動態(tài)變化以反映目前主題。
實施暗/亮模式
深色模式不僅提供了現(xiàn)代美感，還增強了使用者在低光源環(huán)境下的可訪問性。以下是如何在您的作品集中整合暗/亮模式切換：

CSS 變數(shù)：我們已經(jīng)為淺色和深色主題定義了變數(shù)。
JavaScript Toggle：script.js 處理暗模式類別的新增和刪除，從而相應(yīng)地更改主題。
保留使用者偏好：使用 localStorage，儲存使用者的主題偏好並在後續(xù)造訪時套用。
增強使用者體驗：搜尋與過濾
動態(tài)過濾和即時搜尋欄使用戶能夠輕鬆瀏覽您的專案。

按類別過濾：使用者可以點擊篩選按鈕來查看特定類別內(nèi)的項目。
即時搜尋：當(dāng)使用者在搜尋欄中輸入內(nèi)容時，系統(tǒng)會根據(jù)輸入即時篩選項目，提供即時回饋。
優(yōu)化回應(yīng)能力和可訪問性
優(yōu)雅的產(chǎn)品組合必須響應(yīng)迅速且易於訪問，以滿足所有用戶的需求。

響應(yīng)式設(shè)計：

靈活的佈局：使用 CSS Grid 和 Flexbox 確保圖庫適應(yīng)各種螢?zāi)怀叽纭?
媒體查詢：根據(jù)裝置寬度調(diào)整字體大小、填充和佈局，以獲得最佳觀看效果。
輔助功能：

圖像的替代文字：描述性替代屬性可提高螢?zāi)婚喿x器的可存取性。
鍵盤導(dǎo)航：確保所有互動元素都可以透過鍵盤存取。
顏色對比：保持文字和背景之間的高對比度以提高可讀性。
部署您的投資組合
一旦對您的產(chǎn)品組合感到滿意，就可以部署給全世界看。

託管平臺：

GitHub Pages：靜態(tài)網(wǎng)站的免費主機服務(wù)。
Netlify：提供持續(xù)部署和免費託管以及自訂網(wǎng)域支援。
Vercel：為前端專案提供無縫部署。
自訂域：

購買自訂域名，讓您的作品集更加專業(yè)和難忘。
SEO 優(yōu)化：

使用有意義的元標(biāo)籤、標(biāo)題和描述。
透過壓縮圖片和縮小 CSS/JS 檔案來優(yōu)化載入時間。
推廣您的投資組合
擁有令人驚嘆的投資組合只是第一步。推廣它可以確保它到達您的目標(biāo)受眾。

社群媒體：

在 LinkedIn、Twitter 和 Facebook 等平臺上分享您的作品集。
使用相關(guān)主題標(biāo)籤來提高可見度。
網(wǎng)路：

與 Reddit、Stack Overflow 或 Dribbble 上的社群互動。
參加虛擬或面對面的社交活動來展示您的作品。
搜尋引擎優(yōu)化與內(nèi)容行銷：

建立與您的領(lǐng)域相關(guān)的部落格以增加自然流量。
使用相關(guān)關(guān)鍵字針對搜尋引擎優(yōu)化您的作品集。
電子郵件簽名：

在電子郵件簽名中包含指向您的作品集的鏈接，以被動地推廣它。
結(jié)論
創(chuàng)建優(yōu)雅的互動式作品集畫廊是一項有益的努力，它以專業(yè)且引人入勝的方式展示您的技能和專案。透過利用 HTML5、CSS3 和 JavaScript，您可以建立在數(shù)位領(lǐng)域脫穎而出的響應(yīng)式動態(tài)產(chǎn)品組合。

探索更多我的作品：
LinkedIn：皮耶-羅曼洛佩茲
角鬥士之戰(zhàn)：gladiatorsbattle.com
DivWeb：divweb.fr
推特：@GladiatorsBT
JeanFernandsEtti：jeanfernandsetti.fr
XavierFlabat：xavier-flabat.com
請隨時透過我的社交媒體管道或訪問我的網(wǎng)站來了解有關(guān)我的項目和服務(wù)的更多資訊。我始終對合作和新機會持開放態(tài)度！

祝您編碼愉快，祝您的作品好運！ ??

作者簡介
Pierre-Romain Lopez 是一位充滿熱情的 Web 開發(fā)人員和設(shè)計師，對細節(jié)有著敏銳的洞察力，致力於創(chuàng)造引人入勝且使用者友好的數(shù)位體驗。 Pierre-Romain 擁有涵蓋網(wǎng)頁設(shè)計、平面設(shè)計和攝影的多元化產(chǎn)品組合，擅長透過程式碼和設(shè)計將創(chuàng)意願景變?yōu)??現(xiàn)實。

以上是使用 HTMLCSS 和 JavaScript 建立優(yōu)雅的互動式作品集畫廊的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！

本網(wǎng)站聲明

本文內(nèi)容由網(wǎng)友自願投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請聯(lián)絡(luò)admin@php.cn