Drupal 幻灯片制作教程
各种类型的网站都可以用到幻灯片,不论是用途网站首页的图片展示还是用于制作大气的图片轮换Banner。Drupal 中用得较多的幻灯片模块有 Views Slideshow 和 DDBlock 两种,本文将以 Views Slideshow 为例,详细介绍使用 Drupal 制作幻灯片的步骤:
用到的模块:
- Views Slideshow (6.x-2.x)
- ImageField
- Link
- ImageCache
确认安装并启用以上模块之后,便可以按照以下步骤来创建 Drupal 幻灯片了 :D
提示:本文最后提供了一个打包好的幻灯片配置包,大家直接下载并启用就可以得到按照本文配置的基本幻灯片了 :D
Drupal 幻灯片制作流程:
1.创建幻灯片 (Slideshow) 内容类型
添加内容类型,访问管理 > 内容管理 > 内容类型 > 添加内容类型页面 (admin/content/types/add),按以下配置创建内容类型之后点击保存
名称: slideshow
类型: 幻灯片

新添加的 Slideshow 会出现在内容类型管理列表中,点击 Slideshow 对应的“管理字段" (manage fields) 链接,进入 Slideshow 编辑页面

添加幻灯片图片字段:在管理字段页面,按以下配置添加图片 (ImageField) 字段后点击“保存字段设置”按钮
- 标签:幻灯片图片
- 字段名称:field_slideshow_image
- 数据类型:文件
- 表单元素:图片

配置幻灯片图片字段:在图片字段配置页面,配置以下信息及根据你的需要进行配置后点击“保存”
- 路径设置-> 文件路径: slideshow (这会将所有上传的幻灯片图片保存到 slideshow 目录下)
- 全局设置 -> 必须
添加幻灯片链接字段:在管理字段页面,按以下配置添加链接 (Link) 字段后点击“保存”
- 标签:幻灯片链接
- 字段名称:field_slideshow_link
- 数据类型:链接
- 表单元素:链接

配置幻灯片链接字段:在链接字段配置页面,根据需要配置后点击“保存字段配置”按钮
调整字段顺序:在管理字段页面,将幻灯片图片和幻灯片链接拖动到正文的前面,然后点击“保存”

2. 添加幻灯片图片
访问创建内容 > 幻灯片 (node/add/slideshow) 页面,填写标题、上传图片、填写幻灯片链接标题和URL,正文可以留空,然后保存即可
重复此步骤创建大概5张不同的幻灯片图片
3. 创建 ImageCache 规则
访问管理 > 站点构建 > ImageCache > 添加 ImageCache 预设页面 (admin/build/imagecache/add),设置名称后点击保存
ImageCache 预设名称:Slideshow

在运作中,点击"添加 Scale And Crop "链接,在新窗口设置幻灯片大小后点击"创建动作"
- 宽度:300
- 高度:240
注意:点击创建动作后,可以在页面下方看到缩放成 300 x 240 大小的图片,如果看不到图片预览,请查看模块管理页面,确保 ImageAPI GD2 和 ImageAPI ImageMagick 至少有一个是启用状态。
4. 创建 View
访问管理 > 站点构建 > 视图 > 添加 页面(admin/build/views/add),配置以下信息后点击“前进”
- 视图名称:slideshow
- 视图描述:幻灯片
- 视频标签:幻灯片

添加区块:在 View 配置页面的最左边,从下拉框中选择“区块”, 点击“添加显示”

配置幻灯片区块:按照以下顺序和配置对幻灯片区块进行配置
- 字段
- 添加字段:内容:幻灯片链接(field_slideshow_link)幻灯片链接(field_slideshow_link)
- 排除显示:勾选
- 标签:无
- 格式:URL, as plain text
- 添加字段:内容: 幻灯片图片 (field_slideshow_image)幻灯片图片 (field_slideshow_image)
- 将这个字段作为链接输出:勾选
- 链接路径:[field_slideshow_link_url]
- 标签:无
- 格式:Slideshow image
- 将这个字段作为链接输出:勾选
- 添加字段:内容:幻灯片链接(field_slideshow_link)幻灯片链接(field_slideshow_link)
- 过滤
- 添加过滤器:节点: 类型
- 操作符:其中之一
- 节点类型:幻灯片
- 添加过滤器:节点:已发表
- 已发表:是
- 添加过滤器:节点: 类型
- 基本设置
- 样式:幻灯片
选择幻灯片之后,点击样式列后面的齿轮可以对幻灯片进行详细配置。可以用于创建带缩略图的幻灯片、添加幻灯片控件、幻灯片效果等等(可参见文章最后的幻灯片示例) - 要显示的条目数:5
- 样式:幻灯片

5. 将幻灯片分配到指定区域
访问管理 > 站点构建 > 区块管理页面 (admin/build/block),找到 slideshow: 区块,将其分配到指定的区域后,点击保存。
6. 幻灯片美化
为幻灯片区块添加 CSS,做一些美化,使幻灯片看起来更漂亮。
本文介绍了配合 Views Slideshow 创建幻灯片的基本用法,大家可以根据需要,自行添加一些字段以及更改 Views Slideshow 的配置更幻灯片变得更加丰富。使用 Views Slideshow 可以创建各种类型的幻灯片片,下面提供几个幻灯片示例以供大家参考交流。欢迎留言交流 :D
1. 只带页码的幻灯片

2. 包含页面和标题的幻灯片

3. 纵向带页码的幻灯片

4. 带标题、缩略图和控件的复杂幻灯片

虽然本文介绍了制作幻灯片的步骤,但每次在不同的网站上又重新配置一遍也比较辛苦,为了节省重复的配置工作,我制作了一个特性包,大家直接下载且启用就可以得到一个基于本教程的简单幻灯片了,详情请参考《Fox Slideshow - 基于 Views Slideshow 的幻灯片 Features 包下载》
评论
游客 (未验证)
星期日, 10/30/2011 - 22:19
永久连接
很不错,在D7下面可以用吗?
很不错,在D7下面可以用吗?
lugir
星期一, 10/31/2011 - 09:08
永久连接
D7 与 D6 的操作应该比较类似,还没在 D7
D7 与 D6 的操作应该比较类似,还没在 D7 下配置过,楼主可以尝试一下 :D
27522381 (未验证)
星期一, 10/31/2011 - 17:00
永久连接
求 带标题、缩略图和控件的复杂幻灯片 制作方法。。。
求 带标题、缩略图和控件的复杂幻灯片 制作方法。。。
lugir
星期一, 10/31/2011 - 23:07
永久连接
《Fox Slideshow - 基于 Views
《Fox Slideshow - 基于 Views Slideshow 的幻灯片 Features 包下载》提供了基于 Views Slideshow 的简单幻灯片,大家直接下载并启用就可以了。
带标题、缩略图和控件的幻灯片也是在 Fox Slideshow 的基础上,添加标题和缩略图字段,再配置 Views Slideshow 显示风格形成的效果。
但是因为幻灯片最后的显示效果还涉及到CSS和浏览器兼容性,对于不懂CSS的用户来说,调整起来会比较麻烦。所以我也觉得如果能够为下图那样的幻灯片提供一个像 Fox Slideshow 那样一键安装的解决方案会方便不少 Drupal 用户。可惜暂时还没有太多关于打包带自定义样式的特性包的思路,大家的好的想法不妨分享一下,或者有兴趣的朋友帮忙研究一下。多谢 :D
AssistanTMMII (未验证)
星期四, 03/15/2012 - 21:28
永久连接
+1 , 不会做,郁闷中。。。。哪位高手讲解一下啊!!谢谢
+1 , 不会做,郁闷中。。。。哪位高手讲解一下啊!!谢谢
游客 (未验证)
星期六, 11/26/2011 - 12:10
永久连接
我按上面步骤做得,做到下面: 填写幻灯片链接标题和URL
我按上面步骤做得,做到下面:
lugir
星期六, 11/26/2011 - 18:58
永久连接
请确认你的 Drupal 6 是运行在 PHP
请确认你的 Drupal 6 是运行在 PHP 5.2.x 的环境下,如果在 PHP 5.2 下依然存在这样的问题,可试着更换一下 link 模块的版本。
另外,可以参考以下链接处理这个问题:
http://drupal.org/node/830432
游客 (未验证)
星期一, 11/28/2011 - 12:09
永久连接
我试着换为6.x-2.x的link版本,出现新的错误 no
我试着换为6.x-2.x的link版本,出现新的错误
游客 (未验证)
星期一, 11/28/2011 - 12:17
永久连接
感谢你的解答。 我试着把link模块换成6.x-2.x版本
感谢你的解答。
我试着把link模块换成6.x-2.x版本,又出现下面错误:
lugir
星期一, 11/28/2011 - 15:59
永久连接
可以先试着不使用 Link
可以先试着不使用 Link 模块来为幻灯片添加链接,先让幻灯片正常显示出来。
另外为幻灯片添加链接的两个可选方案:
游客 (未验证)
星期一, 11/28/2011 - 18:50
永久连接
用path redirect
用path redirect 模块搞出来了,但是登出后,图片显示不了,只有用管理员帐号才能看到,要怎么解决?
lugir
星期一, 11/28/2011 - 20:12
永久连接
这是因为没有为匿名用户分配合适的权限。访问用户权限管理
这是因为没有为匿名用户分配合适的权限。访问用户权限管理页面,找到 ImageCache 模块对应的权限项,为匿名用户和注册用户分配合适的查看权限即可。:D
游客 (未验证)
星期一, 11/28/2011 - 20:25
永久连接
是不是按下面这样设置: 在imagecache
是不是按下面这样设置:
在imagecache 模块中view imagecache Slideshow啊,里面有三个可以勾选的,都试过了,为什么还是显示不出来呢?
游客 (未验证)
星期一, 11/28/2011 - 22:04
永久连接
还是显示不了啊,请帮帮忙啊
还是显示不了啊,请帮帮忙啊
lugir
星期一, 11/28/2011 - 22:36
永久连接
请记得清空ImageCache缓存和页面缓存 :D
请记得清空ImageCache缓存和页面缓存 :D
游客 (未验证)
星期二, 11/29/2011 - 09:24
永久连接
清空是不是按flush?搞了之后还是老样子,标题能显示,图
清空是不是按flush?搞了之后还是老样子,标题能显示,图片看不见。
游客 (未验证)
星期二, 11/29/2011 - 15:28
永久连接
跪求解决办法啊?
跪求解决办法啊?
lugir
星期二, 11/29/2011 - 19:53
永久连接
请检查是否启用了 CCK 的 Content
请检查是否启用了 CCK 的 Content Permission 子模块,如果不知道为何启用此模块请禁用。或者到权限设置页面配置相应的权限。
毕竟在博客里接触不到你的实际环境,只能根据你有限的描述提供相应的支持。如果只是想要一个幻灯片可以下载 Fox Slideshow 特性包,可以节省掉配置的麻烦。
游客 (未验证)
星期五, 12/02/2011 - 08:28
永久连接
十二分感谢啊,确实是content
十二分感谢啊,确实是content permission里的权限,在开始没有给,现在总算是把幻灯片搞出来了,再次感谢啊!!!
游客 (未验证)
星期五, 12/23/2011 - 11:43
永久连接
我按照你的这个方法设置,怎么页面上不显示图片呢?
我按照你的这个方法设置,怎么页面上不显示图片呢?
lugir
星期六, 12/24/2011 - 11:27
永久连接
这样的提问该怎么回答呢 :(
这样的提问该怎么回答呢 :(
雨滴 (未验证)
星期四, 12/22/2011 - 16:18
永久连接
我也是Drupal新手,感谢站长的分享,先支持一下!
我也是Drupal新手,感谢站长的分享,先支持一下!
雨滴 (未验证)
星期四, 12/22/2011 - 16:20
永久连接
Drupal新手,感谢站长的分享,支持下先
Drupal新手,感谢站长的分享,支持下先
zkx
星期五, 03/02/2012 - 22:14
永久连接
我按照上面的方法,弄出来的幻灯片的衔接地址如下: http
我按照上面的方法,弄出来的幻灯片的衔接地址如下:
http://192.168.16.130/amq/[field_slideshow_link]
而我实际指定的地址是www.xxx.com请问这是什么原因,谢谢!
lugir
星期一, 03/05/2012 - 20:44
永久连接
问题应该出在 views
问题应该出在 views 字段的配置上,请检查字段是不是都添加正确,字段的覆写是不是也正确 :)
狗王炒蛋 (未验证)
星期一, 03/19/2012 - 16:24
永久连接
楼主写的好详细,非常感谢。
楼主写的好详细,非常感谢。
我按照操作非常顺利,但是到最后一步,幻灯片在view里面样式中没有幻灯片的选项,出来的图片没有以幻灯片的形式出现,还是出来一张一张的照片,这是为什么呢?前面的所有设置都做了~
lugir
星期二, 03/20/2012 - 16:44
永久连接
需要安装 views_slideshow 模块才可以在
需要安装 views_slideshow 模块才可以在 views 的样式设计中进行选择,另外还请确认 views_slideshow 和 views 的版本兼容,具体请看模块项目页面的说明。
新手求助 (未验证)
星期五, 04/27/2012 - 11:29
永久连接
楼主吖。。怎么我用你的方法。。一直到最后。
楼主吖。。怎么我用你的方法。。一直到最后。。在那style里面找不到那幻灯片的类型吖。。。在D6下怎么找不到了???
lugir
星期日, 05/06/2012 - 19:19
永久连接
之前 Views Slideshow 还没能支持
之前 Views Slideshow 还没能支持 Views 3.x,所以请确定您所使用的 Views 和 Views Slideshow 的版本匹配。
flyfox (未验证)
星期二, 05/15/2012 - 00:07
永久连接
LZ能不能给出这种的文字在图片上显示的教程呢
LZ能不能给出这种的文字在图片上显示的教程呢,我的现在的数字可以显示出来,不过只能在图片的下方或上方显示,不能在图片上面显示
flyfox (未验证)
星期二, 05/15/2012 - 00:08
永久连接
怎么发了一次没有显示出来,再发一次
怎么发了一次没有显示出来,再发一次
LZ能不能把这个样式的教程也写一下,还有序号在图片上显示的也写写,我的数字是在图片下面了。
添加新评论