このチュートリアルでは、Flickr APIを使用したシンプルな畫(huà)像ギャラリーの構(gòu)築に関する2部構(gòu)成のシリーズを締めくくります。 パート1では、プロジェクトの要件、HTML構(gòu)造、および2つのCSSモジュールをカバーしました。この最後の部分は、殘りのCSSとギャラリーに動(dòng)力を供給するJavaScriptに焦點(diǎn)を當(dāng)てています。

重要な概念：

cssスタイリング：
• ギャラリーの外観を改良し、容器に合わせて畫(huà)像がホバーとアクセシビリティを改善するための明確な視覚的フィードバックを提供します。 javaScriptロジック：
コア機(jī)能は、クリーンコードのために即座に呼び出された関數(shù)式（iifes）とエラー防止のための厳格モードを使用して実裝されます。
• Flickr API統(tǒng)合：ユーティリティモジュールを使用してURLとオブジェクト拡張機(jī)能を使用して畫(huà)像を効率的に取得および表示します。
• イベント代表団：JavaScriptでのイベント委任を通じてユーザーインタラクションとメモリ管理を最適化し、キーボードナビゲーションサポート。
• css強(qiáng)化：
前の記事では、ヘルパーとレイアウトCSSを詳細(xì)に説明しました。 ギャラリーとサムネイルモジュールでスタイリングを完了しましょう。

ギャラリーモジュール： このモジュールは、メインギャラリーコンテナとそのコンポーネントをスタイリングします。 主な機(jī)能には次のものがあります

フルサイズの畫(huà)像を保持するための

コンテナの固定高さ（500px）。 オーバーフローを防ぐために、含まれている畫(huà)像（

）が含まれている場(chǎng)合、

およびが100％に設(shè)定されています。 アクセシビリティを向上させるためのナビゲーション矢?。?/p>）のホバーおよびフォーカススタイル。 キーボードユーザーには、視覚的な手がかりが明確に表示されます

• サムネイルモジュール：.gallery
• このモジュールは、5列のグリッドにサムネイルを配置し、ホバー/フォーカス効果を追加します。 max-width max-heightimgホームページモジュール：
• このモジュールは、ページのコンテキストに基づいてスタイルを分離するためのベストプラクティスを?qū)g証するホームページ固有の要素をスタイルします。 .gallery__arrow

javaScriptモジュール：

.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%;
}

JavaScriptロジックは、iifeと厳密なモードを使用してモジュール化されています。

ユーティリティモジュール：

.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;
}

URLビルディングとオブジェクト拡張機(jī)能の再利用可能な機(jī)能を提供します。

ギャラリーモジュール：

.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;
}

ギャラリーのディスプレイロジックを管理します。 イベントハンドラーを正しく処理するために

で閉鎖を使用することに注意してください。

flickrモジュール：

Flickr APIインタラクションを処理します。 を?qū)g際のAPIキーに置き換えることを忘れないでください

メインモジュール：

(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);

このモジュールはすべてを結(jié)び付け、ユーザーのインタラクションを処理し、他のモジュールを統(tǒng)合します。 矢印のポケットベールとキーボードサポートのためのイベント委任の使用に注意してください。

.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%;
}

この包括的な書(shū)き込みは、元の機(jī)能を維持し、畫(huà)像を元の形式に保持しながら、コードのより構(gòu)造的で読みやすい説明を提供します。 プレースホルダーのコメントを元の応答から実際のコードに置き換えることを忘れないでください。 GitHubリポジトリリンクも完全性のために含める必要があります。

以上がF(xiàn)lickr APIで畫(huà)像ギャラリーを作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。