如何使用免费的WordPress FooGallery插件创建图像库-优快云博客

有些网站要求您在单个帖子或网页中添加许多图像。例如，您可能想从艺术展览或网站上的活动中上传很多图像。同样，任何专注于产品和服务的业务都可能在单个页面上添加很多相关图像。

在本教程中，您将学习如何使用免费的WordPress FooGallery插件创建图片库。

我们将要建设的

如前所述，我们将使用FooGallery插件创建图片库。

画廊将有14张鸭子的图像。其中一些是我自己的照片，其他的则是从png拍摄的。下图显示了本教程结束时您将拥有的画廊设计。屏幕截图中的文字来自Wikipedia关于鸭子的条目。

我们将使用该插件设置边框宽度，框阴影和缩略图大小。

该插件还允许您为图片库设置分页。如果画廊中有很多图像，这很有用。使用自定义CSS修改了背景，缩略图的边框半径以及图库中的其他一些内容。

默认情况下，点击任意缩略图都会在灯箱中打开较大版本的图片。但是，您需要安装一个灯箱插件才能实现。 FooBox Free Edition是与FooGallery一起使用的免费插件。

入门

安装并激活插件后，您可以通过在WordPress仪表板中单击FooGallery> Add Gallery来开始创建自己的响应式图像库。

现在，您可以为图库指定标题，并通过单击“ 从媒体库添加”按钮添加库中媒体库中的所有图像。

上载图像后，您可以通过单击“ 常规”选项卡为图库指定一些常规选项。

在本例中，我们将缩略图的Width和Height设置为100 px 。

链接到设置允许您指定当用户单击缩略图之一时发生的情况。如果您安装了灯箱插件，则“ 全尺寸图片”选项将在灯箱中打开图片。否则，它将仅在Web浏览器中打开原始图像。如果要使用产品图像创建图库，则还可以将选项设置为“ 自定义URL”以打开特定的产品页面。

对齐设置控制图库容器中缩略图的对齐。我们将其设置为我们画廊的中心。

自定义缩略图

您可以借助外观标签中的设置来更改与缩略图相关的许多方面。这包括边框颜色，边框宽度和框阴影。

在我们对这些设置进行任何更改之前，您应该单击页面顶部的“ 图库预览”按钮，以便在仪表板本身中查看图库的实时预览。

主题设置基本上控制缩略图的边框颜色。我们将其设置为浅，以便在缩略图周围添加白色边框。

您还可以确定每个缩略图的拐角处。当“ 圆角”设置为“ 无”时 ，缩略图将是完美的正方形或矩形。设置为Full时 ，您将获得圆形缩略图，而不是正方形缩略图。

“ 加载图标”设置用于确定在加载缩略图之前显示的图标。这与单击缩略图后边框加载完整图像时出现的任何加载动画不同。

“ 加载的效果”设置确定缩略图在加载后是否应与任何动画一起出现在网页上。我们将其设置为简单的淡入动画。

添加悬停效果

您可以更改一些设置，以便在缩略图上添加漂亮的悬停动画。

当用户将鼠标悬停在缩略图上时， 色彩效果设置将确定缩略图是彩色还是灰度。我们将值设置为Greyscale 。现在，缩略图最初将具有其自然色，但是当用户将鼠标悬停在缩略图上时，它将变为灰度。

设置为“ 缩放比例”时，“ 缩放效果”会稍微放大缩略图。在本教程中，我们将其保留为默认值None 。

过渡设置确定当用户将鼠标悬停在缩略图上时，叠加层应如何在缩略图上设置动画效果。这里有几个选项。如果您想要即时叠加，只需从下拉菜单中选择即时。这将从缩略图中删除所有叠加动画。对于我们的画廊，我们将使用Fade应用微妙的动画。

图标设置确定出现在叠加层中的图标。我们将为缩略图使用较小的放大图标，因为它使用户知道单击缩略图将为他们显示图像的放大版本。图标也足够小，以至于不覆盖整个缩略图。

将分页添加到图库

即使只有100 x 100的缩略图，如果画廊包含很多图像，它们也会占用大量空间。在这一点上，缩小缩略图可能不是一个好主意。

如果您无法减少图库中的图像数量，则显示图库的用户友好选项将是添加分页。这样，您只能在图库容器中显示图像的子集，并允许用户单击图库下面的点以查看下一组图像。

与分页有关的所有设置都可以在“ 分页”选项卡下找到。 页面大小设置确定一次显示的缩略图的数量。默认情况下，图库的导航点会同时添加在顶部和底部。通过将Position的值设置为Bottom，我们将仅在底部显示它们。

主题设置仅控制点的颜色。黑暗的主题，使所选择的点与其他点没有区别，所以我们将设置主题，以轻。

当用户单击任何分页点时，“ 滚动到顶部”设置会将用户带回到图库容器的顶部。对于我们的画廊，我们将其设置为“ 否” ，因为每个页面上只有十个缩略图。在此处添加滚动条只会分散用户的注意力，因为他们仍然可以看到整个画廊。

如果图库中有大量图像，则应考虑将Paging Output值设置为JSON 。由于我们的图库中没有很多图像，因此我们将选择HTML 。

将自定义CSS应用于图库

现在剩下要做的就是应用一些自定义CSS，以使我们的画廊变得独特而时尚。所有这些设置下方都有一个部分，您可以在其中编写将应用于图库的自定义CSS。

该插件会告诉您ID ，您可以在选择器中使用该ID定位此特定画廊。这是我们将在本教程中使用CSS：

#foogallery-gallery-80 {
    background: radial-gradient(#f65d5d, #900090);
    padding: 20px 0;
    border-radius: 2px;
    border: 10px solid #f5f5f5;
    outline: 5px solid #e0e0e0;
}

#foogallery-gallery-80.fg-dark .fg-item-inner, .foogallery.fg-light .fg-item-inner {
   border-radius: 15% 85% 14% 86% / 86% 23% 77% 14%;
}

#foogallery-gallery-80 figcaption.fg-caption {
   background: rgba(0,0,0, 0.5);
}

我们首先对画廊容器应用背景和轮廓。之后，我们将缩略图的边框半径设置得更宽一些，以使其更加时尚。

最后，我们加亮了将鼠标悬停在任何图像上时出现的叠加层的背景色。最后一点确保将鼠标悬停在缩略图上时用户仍然可以看到图像。

完成本教程中的所有步骤后，您将获得以下结果。

最后的想法

在本教程中，我们学习了如何使用免费的FooGallery插件向我们的WordPress网站添加图像库。该插件提供了许多基本功能，可以帮助您轻松创建画廊。

但是，此免费插件有两个限制。例如，您不能创建同时包含图像和视频的画廊。同样，除了FooBox之外，您不能将此插件集成到其他灯箱中。

您最喜欢的免费或付费WordPress画廊插件是哪个？在下面的评论中让我们知道。

翻译自: https://code.tutsplus.com/tutorials/how-to-use-the-free-wordpress-foogallery-plugin-to-create-image-galleries--cms-34037