使用Flickr API創建圖像庫

>本教程結束了我們兩部分使用Flickr API構建簡單圖像庫的系列。 第一部分涵蓋的項目要求，HTML結構和兩個CSS模塊。最後一部分側重於剩餘的CSS和為畫廊提供動力的JavaScript。

密鑰概念：

>
• > CSS樣式：我們將完善畫廊的外觀，確保圖像適合其容器和箭頭，可在懸停方面提供清晰的視覺反饋，並重點以改善可訪問性。 >
• > javascript邏輯：將使用立即調用函數表達式（IIFES）實現核心功能，以進行乾淨的代碼和嚴格的預防誤差模式。 >
>
• flickr api集成：使用實用程序模塊有效地獲取和顯示圖像來管理模塊化的URL和對象擴展 >
>事件委託：
• >通過JavaScript中的事件委託以及鍵盤導航支持來優化用戶互動和內存管理。
> CSS增強：

>上一篇文章詳細介紹了助手和佈局CSS。 讓我們使用畫廊和縮略圖模塊來完成樣式。 >

畫廊模塊：

這個模塊樣式主畫廊容器及其組件。 關鍵功能包括：

>

容器以保持全尺寸圖像的固定高度（500px）。

>
• >和.gallery設置為包含的圖像（
）以防止溢出。
• > max-width懸停和聚焦樣式的導航箭頭（max-height）以增強可訪問性。 鍵盤用戶將看到清晰的視覺提示。 img
• .gallery__arrow
縮略圖模塊：

<code class="language-css">.gallery {
  position: relative;
  height: 500px;
  border: 1px solid #FFFFFF;
}

.gallery img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  display: block;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background-color: #000000;
  opacity: 0.7;
  cursor: pointer;
}

.gallery__arrow:hover,
.gallery__arrow:focus {
  opacity: 1;
}

/* Arrow styling (before and after pseudo-elements) */
.gallery__arrow:before,
.gallery__arrow:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 40%;
  background-color: #FFFFFF;
}

.gallery__arrow:before {
  bottom: 12px;
}

.gallery__arrow:after {
  top: 12px;
}

.gallery__arrow:hover:before,
.gallery__arrow:focus:before,
.gallery__arrow:hover:after,
.gallery__arrow:focus:after {
  background-color: #FCB712;
}

/* Left and right arrow positioning and rotation */
.gallery__arrow--left {
  left: 0.5em;
}

.gallery__arrow--left:before {
  transform: rotate(-40deg);
  left: 35%;
}

.gallery__arrow--left:after {
  transform: rotate(40deg);
  left: 35%;
}

.gallery__arrow--right {
  right: 0.5em;
}

.gallery__arrow--right:before {
  transform: rotate(40deg);
  right: 35%;
}

.gallery__arrow--right:after {
  transform: rotate(-40deg);
  right: 35%;
}</code>

該模塊在五列網格中排列縮略圖，並添加懸停/焦點效果。

主頁模塊：

<code class="language-css">.thumbnails__list,
.thumbnails__pager {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.thumbnails__list li {
  display: inline-block;
  width: 19%;
  margin-top: 1%;
  margin-right: 1%;
}

.thumbnail {
  width: 100%;
}

.thumbnail:hover,
.thumbnail:focus {
  border: 1px solid #FCB720;
  opacity: 0.7;
}

.thumbnails__pager {
  text-align: right;
  margin: 0.5em 0;
}

.thumbnails__pager li {
  display: inline;
}

.thumbnails__pager a {
  margin: 0 0.2em;
  color: #FFFFFF;
  text-decoration: none;
}

.thumbnails__pager a.current,
.thumbnails__pager a:hover,
.thumbnails__pager a:focus {
  color: #FCB720;
  text-decoration: underline;
}</code>

此模塊樣式特定於首頁特定元素，展示了基於頁面上下文分離樣式的最佳實踐。

> JavaScript模塊：

<code class="language-css">.form-search {
  margin: 0.5em 0;
  text-align: right;
}

.form-search #query {
  padding: 0.2em;
}

.form-search input {
  color: #000000;
}

.thumbnails {
  border-bottom: 3px solid #FFFFFF;
}

.copyright {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-align: right;
}</code>

JavaScript邏輯是使用IIFE和嚴格模式模塊化的。

>實用程序模塊：

>為URL構建和對象擴展提供可重複使用的功能。

>

畫廊模塊：

>管理畫廊的顯示邏輯。 請注意，在

中使用閉合來正確處理事件處理程序。

>

<code class="language-javascript">(function(document, window) {
  'use strict';

  function buildUrl(url, parameters) {
    // ... (URL building logic as before) ...
  }

  function extend(object) {
    // ... (Object extension logic as before) ...
  }

  window.Utility = {
    buildUrl: buildUrl,
    extend: extend
  };
})(document, window);</code>

flickr模塊：

處理Flickr API相互作用。 切記用實際的API鍵替換createThumbnailsGallery。

>

<code class="language-javascript">(function(document, window) {
  'use strict';

  function Gallery(photos, container) {
    // ... (Gallery logic as before) ...
  }

  window.Gallery = Gallery;
})(document, window);</code>

主模塊：

這個模塊將所有內容綁定在一起，處理用戶交互並集成其他模塊。 請注意，事件委託對箭頭的PAGER和鍵盤支持的使用。

<code class="language-css">.gallery {
  position: relative;
  height: 500px;
  border: 1px solid #FFFFFF;
}

.gallery img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  display: block;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background-color: #000000;
  opacity: 0.7;
  cursor: pointer;
}

.gallery__arrow:hover,
.gallery__arrow:focus {
  opacity: 1;
}

/* Arrow styling (before and after pseudo-elements) */
.gallery__arrow:before,
.gallery__arrow:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 40%;
  background-color: #FFFFFF;
}

.gallery__arrow:before {
  bottom: 12px;
}

.gallery__arrow:after {
  top: 12px;
}

.gallery__arrow:hover:before,
.gallery__arrow:focus:before,
.gallery__arrow:hover:after,
.gallery__arrow:focus:after {
  background-color: #FCB712;
}

/* Left and right arrow positioning and rotation */
.gallery__arrow--left {
  left: 0.5em;
}

.gallery__arrow--left:before {
  transform: rotate(-40deg);
  left: 35%;
}

.gallery__arrow--left:after {
  transform: rotate(40deg);
  left: 35%;
}

.gallery__arrow--right {
  right: 0.5em;
}

.gallery__arrow--right:before {
  transform: rotate(40deg);
  right: 35%;
}

.gallery__arrow--right:after {
  transform: rotate(-40deg);
  right: 35%;
}</code>

>這種綜合的重寫提供了對代碼的結構化和可讀性的解釋，同時保持原始功能並將圖像保持其原始格式。 切記將佔位符評論替換為原始響應中的實際代碼。 GitHub存儲庫鏈接也應包括在內。

>

以上是使用Flickr API創建圖像庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！