跳转到主要内容
qiyue 提交于 21 April 2015

使用views slideshow模块可以实现多种形式的幻灯片,下面我介绍一下通过结合使用views模块,views slideshow模块 还有部分的CSS样式代码来实现如下的三种形式的幻灯片,有什么不到之处,希望各位大神指正。

  1. 鼠标滑过缩略图可以切换幻灯片图片,同时支持幻灯片自动播放。效果如下图:

vs_1.png

         2.幻灯片输出标题,并点击鼠标可以切换,同时支持幻灯片自动播放。效果如下图:

vs_2.png

         3.幻灯片输出标题,简单介绍,并且鼠标滑动下方的色块切换幻灯片图片,同时支持幻灯片自动播放,效果如下图:

        vs_3.png

  • 首先实现第一种形式的幻灯片。
  1. 下载安装views (https://www.drupal.org/project/views); views slideshow(https://www.drupal.org/project/views_slideshow)模块,安装后启用这两个模块,如下图:vs_4.png
  1. 创建一个views,并且格式选择幻灯片(slideshow),然后添加两个相同的图片字段,总体设置如下图:

            vs_5.png

  1. 首先我们去设置第一个图像字段,这个字段我们用来显示大图。我们为了使我们的幻灯片图片整齐,我们去创建一个图片大小格式。访问: admin/config/media/image-styles 去创建图像样式,选择添加样式(比如我添加了一个名称为beautiful的样式),然后添加一个效果,一般选择“比例缩放并裁切”,随后填写自己需要的图片高度和宽度。如下图:vs_6.png然后我们回到刚才添加的views页面,对字段下面的第一个图像字段做如下的设置,在图像样式选择我们刚才创建的图像样式(比如我创建的beautiful样式)。

             vs_7.png

  1. 同样我们为幻灯片中的缩略图创建图像样式,和上步的方法一样,并且在views 字段下面第二个图像字段选择创建的图像样式,如下图所示:

             vs_8.png

  1. 下面到了views slideshow最关键的一步设置,views界面下的格式下面的幻灯片 设置会进入到下面的界面,并做如下的设置并保存:

 vs_9.png

vs_10.png

vs_11.png

vs_12.png

vs_13.png

         6. 为了定制输出幻灯片,我们需要自己写一部分CSS样式,如我写的一部分CSS样式。 

             源代码:

vs_14.png

       CSS部分代码:

.beauty{width: 1000px; height: 530px; margin:0 auto; background-color: #ffffff; margin-top: 50px;}
.beauty_slideshow{ width: 990px; height: 520px; margin-left: 5px;margin-top: 5px;  float: left;}
.beauty_slideshow .skin-default{position:relative;}
.beauty_slideshow .views-slideshow-controls-bottom{position: absolute; bottom: 370px; padding-left:5px;left: 80px; z-index: 10; background-color: rgba(0,0,0,0.5); width:410px; height:80px;}
.beauty_slideshow .views_slideshow_pager_field_item{cursor: pointer;float: left;margin-top: 2px;}
.beauty_slideshow .views_slideshow_pager_field_item.active{margin-top: 0px;float: left;}
.beauty_slideshow .views_slideshow_pager_field_item.active img{border:3px solid #b3d06a;}

 

  • 其次实现第二种形式的幻灯片。
  1. 创建一个views,总体设置如下图所示:

             vs_15.png

  1. 如形式一中一样创建一个此幻灯片的图像样式,具体步骤不在赘述,图像字段的具体如下:

vs_16.png

  1. 标题字段如下设置:

vs_17.png

  1. 下面到了views slideshow最关键的一步设置,views界面下的格式下面的幻灯片 设置会进入到下面的界面,并做如下的设置并保存:

            vs_18.png

vs_19.png

vs_20.png

vs_20_1.png

  1. 然后我们去翻译页面把幻灯片上的上一页,下一页换成左右按钮,

           链接:admin/config/regional/translate/translate,进入到这个界面后搜索:Previous,如下图:

vs_21.png

进入编辑界面后将” Previous”翻译成” ‹”如下图:

vs_22.png

同样的道理搜索”Next”,并将其翻译成” ›”如下图:

vs_23.png

  1. 为了定制输出幻灯片,我们需要自己写一部分CSS样式,如我写的一部分CSS样式。

             源代码:

             vs_25.png

部分CSS代码:

.front_slideshow{float: left;}
.front_slideshow .skin-default{position: relative;}
.front_slideshow  .views-slideshow-controls-bottom {position: absolute;bottom: 0px;padding:10px;left: 0;z-index: 10;width: 655px;}
.front_slideshow .views-slideshow-controls-text-previous a
,.front_slideshow .views-slideshow-controls-text-next a{position: absolute;top:-170px;width: 50px;height: 50px;margin-top: -20px;font-size: 80px;font-weight: 100;line-height: 40px;color: white;text-align: center;background-color: black;-webkit-border-radius: 23px;-moz-border-radius: 23px;opacity: 0.5;filter:alpha(opacity=50);font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
.front_slideshow .views-slideshow-controls-text-next a{right: 15px;left: auto;}
.front_slideshow .views-slideshow-controls-text-previous a:hover
,.front_slideshow .views-slideshow-controls-text-next a:hover{color: white;text-decoration: none;opacity: 0.9;filter:alpha(opacity=90);}
.front_slideshow .views-slideshow-controls-text-pause{display: none;}
.front_slideshow .views-slideshow-controls-text-pause a{color: #fff;opacity: 0.5;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;background: #222;border: 2px solid white;padding: 3px; font-size: 12px;}
.front_slideshow .views-slideshow-controls-text-pause a:hover{color: white;text-decoration: none;;opacity: 0.9;filter:alpha(opacity=90);}
.front_slideshow  .slideshow_title{ width:100%; position:absolute; bottom:0px; left:0px; z-index:10; height:34px; background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#80000000',endColorstr = '#80000000')\9;  display:block; line-height:34px; text-align:left; }
.front_slideshow .slideshow_title a{display: block;font-size: 14px;font-weight: bold;color: white; margin-left: 10px; float: left;}
  • 最后实现第三种形式的幻灯片。(明天再补充上)
Drupal 版本