Flickr APIで画像ギャラリーを作成します

このチュートリアルでは、Flickr APIを使用したシンプルな画像ギャラリーの構築に関する2部構成のシリーズを締めくくります。 パート1では、プロジェクトの要件、HTML構造、および2つのCSSモジュールをカバーしました。この最後の部分は、残りのCSSとギャラリーに動力を供給するJavaScriptに焦点を当てています。

重要な概念：

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

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

フルサイズの画像を保持するための

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

）が含まれている場合、

およびが100％に設定されています。 アクセシビリティを向上させるためのナビゲーション矢印（

）のホバーおよびフォーカススタイル。 キーボードユーザーには、視覚的な手がかりが明確に表示されます

• サムネイルモジュール：.gallery
• このモジュールは、5列のグリッドにサムネイルを配置し、ホバー/フォーカス効果を追加します。 max-width max-heightimgホームページモジュール：
• このモジュールは、ページのコンテキストに基づいてスタイルを分離するためのベストプラクティスを実証するホームページ固有の要素をスタイルします。 .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ビルディングとオブジェクト拡張機能の再利用可能な機能を提供します。

ギャラリーモジュール：

.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インタラクションを処理します。 を実際の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);

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

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

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

以上がFlickr APIで画像ギャラリーを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。