3.5.5. Views Slideshow —— 通过 Views 显示 jQuery 幻灯片与轮播
在 Drupal 7 中,有许多模块用于将不同的 jQuery 幻灯片插件与 Drupal 集成。其中最受欢迎、最方便的当属 Views Slideshow 模块。它的一个缺点是:在 Drupal 7 版本中,它并不是响应式的。而在 Drupal 8 版本中,这个问题已经得到了解决,因此我们将使用 Views Slideshow 来制作幻灯片。
首先,需要下载并安装 Views Slideshow 模块,同时启用其子模块 Views Slideshow Cycle:
https://www.drupal.org/project/views_slideshow
此外,我们还需要额外的 jQuery 库,这些库需要放在网站根目录下的 libraries
文件夹中(如果不存在,请手动创建)。
/libraries/jquery.hoverIntent/jquery.hoverIntent.js
https://github.com/briancherne/jquery-hoverIntent
/libraries/jquery.cycle/jquery.cycle.all.js
http://malsup.github.io/jquery.cycle.all.js
/libraries/json2/json2.js
https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js
当这些库都准备好后,我们可以创建一个通过 Views Slideshow 输出的视图。首先创建一个内容类型,或使用已有的内容类型(需要包含图片字段)。例如,这里我使用 Gallery 内容类型,字段名为 Photo。
接着创建一个 Views,选择显示格式为 Views Slideshow(Slideshow):
此时我们就拥有了一个带有丰富设置选项的幻灯片。在 Format(格式) 一栏点击 Settings(设置),我们来详细了解 Views Slideshow 的功能。
行类(Row class):默认情况下,Views 行的类名为 views-row
,在此可以为每个幻灯片设置额外的自定义类名。
样式(Style)
皮肤(Skin):你可以为 Views Slideshow 添加或选择不同的样式皮肤。初始仅提供默认皮肤,但你可以通过安装附加模块来扩展样式选项。
https://www.drupal.org/node/909020
幻灯片(Slides)
幻灯片类型:选择所使用的 jQuery 插件。例如,可使用 FlexSlider Views Slideshow:
https://www.drupal.org/project/flexslider_views_slideshow
切换效果(Slideshow Type)
这里可以设置幻灯片切换的方式。
Effect(效果):切换可以使用多种过渡效果。比如选择 scrollHorz
,幻灯片将以 jQuery 轮播(carousel)的形式显示。
高级切换设置(View Transition Advanced Options)
Timer delay(延迟时间):两次幻灯片切换之间的时间间隔。
Speed(速度):单次切换动画的持续时间。
Initial slide delay offset(初始延迟):首次播放前的等待时间,这样用户在加载慢的网站上也能看到第一张幻灯片。
Random(随机):幻灯片可随机播放。
动作(Action)
此部分用于控制幻灯片的暂停、启动与高度设置。
Pause On Click:点击幻灯片时暂停播放。
Pause on mouse click:同样作用于点击事件时暂停。
高级动作选项(View Action Advanced Options)
Start Slideshow Paused:幻灯片初始状态为暂停,需鼠标悬停或点击后启动。
Start On Last Slide Viewed:记录用户上次浏览的幻灯片,下次访问时从相同位置继续播放。
Pause When the Slideshow is Not Visible:当幻灯片不在屏幕可视范围内时暂停播放,这在着陆页(Landing Page)中非常实用。
End slideshow after last slide:播放完最后一张幻灯片后停止循环。
Make the slide window height fit the largest slide:自动调整幻灯片容器高度,使其与最高的幻灯片相匹配。若幻灯片高度差距大,会导致页面跳动,建议保持图片高度一致。
Items per slide:在这里可设置每页显示的幻灯片数量。若设为多个并配合 scrollHorz
效果,则可实现类似 jQuery Carousel 的布局。
Wait for all the slide images to load:等待所有图片加载完成后再开始切换。若图片过大,可禁用此选项。
IE 调整(Internet Explorer Tweaks)
若幻灯片中没有文本或背景色,可忽略此设置,它仅在 IE 中有效。
高级 jQuery Cycle 设置:关于 jQuery Cycle 的高级自定义,我们将在单独课程中讲解。
小部件(Widgets):可以在幻灯片顶部或底部显示切换按钮。
控制项(Controls):可以启用“上一张 / 下一张”文本链接,并通过 CSS 自定义按钮样式。我们将在基于 Bootstrap 的主题开发章节中学习如何美化它。
幻灯片计数器(Slide counter):显示总幻灯片数量以及当前播放的编号。
分页器(Pager):可以为幻灯片添加分页点。方法是:在视图输出中添加“Views 结果计数器”字段,并在 Pager 设置中选用该字段。稍后我们将在“基于 Bootstrap 的主题”课程中介绍如何为 Drupal 8 及更高版本创建分页点切换效果。
现在,你可以尝试创建一个基于 Views Slideshow 的幻灯片。如果遇到问题,欢迎在评论区留言,我们将一起解决。