Creating an Image Gallery with the Flickr API

This tutorial concludes our two-part series on building a simple image gallery using the Flickr API. Part one covered project requirements, HTML structure, and two CSS modules. This final part focuses on the remaining CSS and the JavaScript powering the gallery.

Key Concepts:

• CSS Styling: We'll refine the gallery's appearance, ensuring images fit their containers and arrows provide clear visual feedback on hover and focus for improved accessibility.
• JavaScript Logic: The core functionality will be implemented using Immediately Invoked Function Expressions (IIFEs) for clean code and strict mode for error prevention.
• Flickr API Integration: Efficiently fetching and displaying images using a utility module to manage URLs and object extension for modularity.
• Event Delegation: Optimizing user interaction and memory management through event delegation in JavaScript, along with keyboard navigation support.

CSS Enhancements:

The previous article detailed helper and layout CSS. Let's complete the styling with the gallery and thumbnails modules.

Gallery Module:

This module styles the main gallery container and its components. Key features include:

• A fixed height (500px) for the .gallery container to hold the full-size image.
• max-width and max-height set to 100% for the contained image (img) to prevent overflow.
• Hover and focus styles for navigation arrows (.gallery__arrow) to enhance accessibility. Keyboard users will see clear visual cues.

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

Thumbnails Module:

This module arranges thumbnails in a five-column grid and adds hover/focus effects.

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

This module styles homepage-specific elements, demonstrating best practices for separating styles based on page context.

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

The JavaScript logic is modularized using IIFEs and strict mode.

Utility Module:

Provides reusable functions for URL building and object extension.

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

Gallery Module:

Manages the gallery's display logic. Note the use of a closure in createThumbnailsGallery to handle event handlers correctly.

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

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

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

Flickr Module:

Handles Flickr API interaction. Remember to replace YOUR-API-KEY-HERE with your actual API key.

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

Main Module:

This module ties everything together, handling user interactions and integrating the other modules. Note the use of event delegation for the pager and keyboard support for the arrows.

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

This comprehensive rewrite provides a more structured and readable explanation of the code, while maintaining the original functionality and keeping the image in its original format. Remember to replace placeholder comments with the actual code from the original response. The GitHub repository link should also be included for completeness.

The above is the detailed content of Creating an Image Gallery with the Flickr API. For more information, please follow other related articles on the PHP Chinese website!