- EBT 块 🧱
- EPT 段落 🆕
- 资源与支持
- 最新动态
- Download Drupal
- 联系
额外区块类型 (EBT) - 全新的布局构建器体验❗
滚动
1.10 Colorbox:在 Drupal 中创建一个简单的图片画廊
18/10/2025, by Ivan
Menu
- 使用 Lando 安装 Drupal
-
1. Drupal:基本功能(Basic Features)
- 1.1 网站内容(Site Content)、内容类型(Content Types)与节点(Nodes)
- 1.2 用户、角色与权限(Users, Roles and Permissions)
- 1.3 评论(Comments)
- 1.4 博客(Blog)+ CKEditor:Drupal 中的博客
- 1.5 分类(Taxonomy):分类体系、词汇表与术语
- 1.6 区块(Block):区域与区块
- 1.7 字段(Field)与实体(Entity):在 Drupal 中处理字段与实体
- 1.8. 图像:处理图像与预设。
- 1.9 Views:在 Drupal 中创建新闻(News)信息流
- 1.10 Colorbox:在 Drupal 中创建一个简单的图片画廊
- 1.11 论坛:在 Drupal 中创建论坛
- 1.12. Drupal 中的菜单(Menus)
- 2. Drupal:配置(Configuration)
- 3. Drupal:网站构建
- 4. Drupal Commerce —— Drupal 的在线商店模块
- 5. Drupal 与 SEO
- 6. Drupal:主题开发
- 7. Drupal:高级主题开发。
- 9. Drupal 模块开发
- 解耦式 Drupal:基于 Drupal 构建后端(Drupal Decoupled. Building Backend on Drupal)
- 旧文章
在网站中,我们经常需要以弹出窗口(popup)的形式显示图片。为此,Drupal 提供了一个非常流行的模块 —— Colorbox:
https://www.drupal.org/project/colorbox
composer require drupal/colorbox drush en colorbox
安装完成后,我们需要进入模块文件夹,找到 README.txt 文件,并在其中找到 Colorbox 库(library)的下载链接:
/web/modules/contrib/colorbox


下载完成后,将文件解压,并将文件夹名称从 “colorbox-master” 重命名为 “colorbox”,然后放入网站根目录下的 libraries 文件夹中。如果没有此文件夹,请手动创建。

我已经创建了一个名为 Gallery(图库) 的内容类型,其中包含多个图片字段。现在我们为这个字段启用 Colorbox 效果:

模块还提供了多种显示设置选项:

我保持了默认设置,你可以根据需要自行调整。你也可以在模块的配置页面中修改 Colorbox 的全局参数。我同样保留了默认配置。

接着,我添加了一个图库页面(Gallery Page),上传了一些图片:

点击图片后,效果如下:

如果将多张图片排列在同一行并在它们之间添加合适的间距(margin),整体效果会更加美观。