使用Flickr API创建图像库-js教程-PHP中文网

Creating an Image Gallery with the Flickr API

>本教程结束了我们两部分使用Flickr API构建简单图像库的系列。第一部分涵盖的项目要求，HTML结构和两个CSS模块。最后一部分侧重于剩余的CSS和为画廊提供动力的JavaScript。

密钥概念：

> CSS样式：我们将完善画廊的外观，确保图像适合其容器和箭头，可在悬停方面提供清晰的视觉反馈，并重点以改善可访问性。>
> javascript逻辑：将使用立即调用函数表达式（IIFES）实现核心功能，以进行干净的代码和严格的预防误差模式。>
flickr api集成：使用实用程序模块有效地获取和显示图像来管理模块化的URL和对象扩展 >
>通过JavaScript中的事件委托以及键盘导航支持来优化用户互动和内存管理。

>上一篇文章详细介绍了助手和布局CSS。让我们使用画廊和缩略图模块来完成样式。>

画廊模块：

这个模块样式主画廊容器及其组件。关键功能包括：

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

>和.gallery设置为包含的图像（
> max-width悬停和聚焦样式的导航箭头（max-height）以增强可访问性。键盘用户将看到清晰的视觉提示。img
.gallery__arrow

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

登录后复制

该模块在五列网格中排列缩略图，并添加悬停/焦点效果。

主页模块：

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

登录后复制

此模块样式特定于首页特定元素，展示了基于页面上下文分离样式的最佳实践。

> JavaScript模块：

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

登录后复制

JavaScript逻辑是使用IIFE和严格模式模块化的。

>实用程序模块：

>为URL构建和对象扩展提供可重复使用的功能。

画廊模块：

>管理画廊的显示逻辑。请注意，在

中使用闭合来正确处理事件处理程序。

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

登录后复制

flickr模块：

处理Flickr API相互作用。切记用实际的API键替换createThumbnailsGallery。

(function(document, window) {
  'use strict';

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

  window.Gallery = Gallery;
})(document, window);

登录后复制

主模块：

这个模块将所有内容绑定在一起，处理用户交互并集成其他模块。请注意，事件委托对箭头的PAGER和键盘支持的使用。

.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中文网其他相关文章！