Erstellen einer Bildergalerie mit der Flickr -API

Dieses Tutorial schließt unsere zweiteilige Serie zum Erstellen einer einfachen Bildergalerie mit der Flickr-API ab. Teil 1 erfuhr die Projektanforderungen, die HTML -Struktur und zwei CSS -Module. Dieser letzte Teil konzentriert sich auf das verbleibende CSS und das JavaScript, das die Galerie betreibt.

Schlüsselkonzepte:

• CSS -Styling: Wir werden das Erscheinungsbild der Galerie verfeinern und sicherstellen, dass Bilder ihre Container und Pfeile eindeutig visuelles Feedback zu Schwebewaren und Fokus auf eine verbesserte Zugänglichkeit bieten.
• JavaScript -Logik: Die Kernfunktionalität wird unter Verwendung von sofort aufgerufenen Funktionsausdrücken (IIFes) für sauberen Code und strengen Modus für die Fehlerprävention implementiert.
• Flickr API -Integration: Effizient abrufen und Bilder mithilfe eines Dienstprogramms zum Verwalten von URLs und Objekterweiterungen für die Modularität.
• Ereignisdelegation: Optimierung der Benutzerinteraktion und Speicherverwaltung durch Ereignisdelegation in JavaScript sowie Support der Tastaturnavigation.

CSS -Verbesserungen:

Der vorherige Artikel detaillierte Helfer- und Layout -CSS. Lassen Sie uns das Styling mit den Modulen Galerie und Miniaturansichten abschließen.

Galeriemodul:

Dieser Modul stilft den Hauptgalerie -Container und seine Komponenten. Zu den wichtigsten Funktionen gehören:

• Eine feste Höhe (500px) für den .gallery -Kontainer, um das Bild in voller Größe zu halten.
• max-width und max-height für das enthaltene Bild (img) auf 100% einstellen, um Überlauf zu verhindern.
• schweben Sie und Fokusstile für Navigationspfeile (.gallery__arrow), um die Zugänglichkeit zu verbessern. Tastaturbenutzer sehen klare visuelle Hinweise.

<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>

Miniaturansichten Modul:

Dieses Modul arrangiert Miniaturansichten in einem Fünf-Säulen-Netz und fügt Schwebe-/Fokusffekte hinzu.

<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>

Homepage -Modul:

Dieses Modulstil-Stile-Homepage-spezifische Elemente, die Best Practices für die Trennung von Stilen auf der Basis des Seitenkontexts demonstrieren.

<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 -Module:

Die JavaScript -Logik wird unter Verwendung von IIFES und Strict -Modus modularisiert.

Dienstprogrammmodul:

bietet wiederverwendbare Funktionen für URL -Gebäude und Objekterweiterung.

<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>

Galeriemodul:

verwaltet die Anzeigelogik der Galerie. Beachten Sie die Verwendung eines Verschlusses in createThumbnailsGallery, um Ereignishandler korrekt zu verarbeiten.

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

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

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

Flickr -Modul:

verarbeitet die Flickr -API -Interaktion. Denken Sie daran, YOUR-API-KEY-HERE durch Ihren tatsächlichen API -Schlüssel zu ersetzen.

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

  var apiKey = 'YOUR-API-KEY-HERE';
  var apiURL = 'https://api.flickr.com/services/rest/';

  function searchText(parameters) {
    // ... (Flickr API call logic as before) ...
  }

  function buildThumbnailUrl(photo) {
    // ... (URL building logic as before) ...
  }

  function buildPhotoUrl(photo) {
    // ... (URL building logic as before) ...
  }

  function buildPhotoLargeUrl(photo) {
    // ... (URL building logic as before) ...
  }

  window.Flickr = Utility.extend(window.Flickr || {}, {
    buildThumbnailUrl: buildThumbnailUrl,
    buildPhotoUrl: buildPhotoUrl,
    buildPhotoLargeUrl: buildPhotoLargeUrl,
    searchText: searchText
  });
})(document, window);</code>

Hauptmodul:

Dieses Modul verbindet alles miteinander, behandelt Benutzerinteraktionen und die Integration der anderen Module. Beachten Sie die Verwendung der Ereignisdelegation für den Pager- und Tastaturunterstützung für die Pfeile.

<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>

Dieses umfassende Umschreiben liefert eine strukturiertere und lesbare Erklärung des Code, während die ursprüngliche Funktionalität beibehält und das Bild in seinem ursprünglichen Format aufbewahrt. Denken Sie daran, Platzhalter -Kommentare durch den tatsächlichen Code aus der ursprünglichen Antwort zu ersetzen. Der GitHub -Repository -Link sollte ebenfalls zur Vollständigkeit enthalten sein.

Das obige ist der detaillierte Inhalt vonErstellen einer Bildergalerie mit der Flickr -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!