上海戴文 - Drupal开发 在线教育

你在这里

Drupal7下使用views_slideshow模块制作轮换图片

主标签

图片轮换效果在很多网站上都可以看到,如腾讯、新浪、搜狐等门户站,也有各种中小型的企业资讯站。而在Drupal下如何来实现这样的效果呢?其实,Drupal官网提供了非常多的图片轮换效果的模块,但是对于初学者来说,一直被选择哪个模块或者用哪种方式来实现困扰着。

简要列几个官网提供的图片轮换的模块:

http://drupal.org/project/views_slideshow

http://drupal.org/project/ddblock

http://drupal.org/project/ajax_slideshow    Demo   http://67.222.4.219/slideshow-front

http://drupal.org/project/slideshow_creator    Demo   http://www.malsup.com/jquery/cycle/

http://drupal.org/project/jquery_slideshow    Demo   http://drupalhub.org/videos

 

Views Slideshow模块地址:

http://drupal.org/project/views_slideshow

Views Slideshow 英文文档地址:

http://drupal.org/node/903244

Views Slideshow模块的安装:

当前views_slideshow模块的Drupal7.x的最新版本是3.x,因此本教程是基于3.x版本来介绍。在模块的手册页面,已经给出了详细的步骤,我们只需按部就班操作即可。

  1. 首先确保你正在使用的views版本是3.x。
  2. 下载并views_slideshow模块,解压至:/sites/all/modules
  3. 下载Libraries 模块 ,解压至:/sites/all/modules
  4. 创建sites/all/libraries目录
  5. sites/all/libraries目录下创建一个文件夹,并命名为jquery.cycle(龙马备注:这里用于放slideshow效果的js库,请注意字母全部小写)。
  6. jQuery cycle 插件 页面去下载jquery.cycle.all.js。
  7. 将jquery.cycle.all.js上传至jquery.cycle目录
  8. 开启Views slideshowViews Slideshow: Cycle模块
  9. 这样在views的style里就增加了一项叫Slideshow”。

创建Slideshow所需的内容类型和字段

模块我们已经安装成功了,那么接下来我们就可以开始创建我们的slideshow了。

操作步骤也是很简单,在制作slideshow之前要确认好,我们要展示的是哪个字段的内容

本文以创建一个slideshow的内容类型,同时添加一个图片字段为例,来介绍一个简单的slideshow的制作过程。

依次进入“结构” –“内容类型” – “添加内容类型”( admin/structure/types/add):

这里的名称为我们要新建的内容类型的名字,名称可以使用中文、英文、数字和空格,如果你输入的是中文,你需要手动编辑一下它的机读名称,机读名称必须由英文小写、数字或者下划线组成。“描述”用于让用户在添加内容的时候知道这是一个什么样的内容类型,可以不填。

接着,看一下我们建立的slideshow类型的字段,点击内容类型列表页面里的Slideshow类型后面的“管理字段”:

这时,我们将看到:

对于Body字段,这里我们不需要,可以删除掉。点击操作下的“删除”按钮。

下面添加一个图片字段:

图片字段的配置不做详细介绍,自己依据个人需求配置。

下面添加几篇slideshow类型的node,为slideshow所需的内容做准备。

创建和配置Views Slideshow

以上算是做好了充足的准备工作,虽然介绍的内容相对多一点,但是操作起来还是很简单。

好了,接下来正式开始建立我们的views:

依次进入“结构” –“Views” – “Add new view”( admin/structure/views/add):

这里我们把“Create a page”前面的勾去掉,然后勾选“Create a block”,这样我们创建一个block类型的view。(备注:如果你打算通过views来创建一个page来放这个slideshow,也可以勾选“Create a page”,不过通常很少这样做。)

接着,点击“Continue and Save”,保存并继续配置views。

现在我们将格式改为Slideshow,点击“Unformatted list”:

将弹出所有的views格式,选择“Slideshow”,其他配置先保持默认,保存即可:

因为我们这里只需要显示图片的轮换,所以“内容:标题”字段需要删除。点击“内容:标题”,然后点击弹出层下的“移除”按钮,这样这个字段就删除了。

接着,我们来添加所需的slideshow图片字段,在Field:

保存进入接下来的设置,去掉label,设置一个Image style:

保存之后,即可在当前views的底部看到一个slideshow的预览效果了:

然后,保存我们创建的这个views。

这时,会生成一个views block,我们到block的管理页面,将这个block放置到指定的区域即可,这样一个简单的图片轮换效果就这样做好了。

Drupal 版本: 

猜你喜欢

在哪里看views的style呢?

在删除“内容:标题”字段时,点击“内容:标题”,然后点击弹出层下的“移除”按钮,结果出现一堆乱码:

[ {"command":"settings", "settings":{"basePath":"\u002F", "pathPrefix":"", "ajaxPageState":{"theme":"seven", "theme_token":"Nx2nnCfoaGm1oDokQk_PxlHZyat4QPEg2t1IciVHRNU"}}, "merge":true}, {"command":"viewsSetForm", "output":"\u003Cform action=\u0022\u002Fadmin\u002Fstructure\u002Fviews\u002Fajax\u002Fconfig-item\u002Fslideshow\u002Fblock\u002Ffield\u002Ftitle\u0022 method=\u0022post\u0022 id=\u0022views-ui-config-item-form\u0022 accept-charset=\u0022UTF-8\u0022\u003E\u003Cdiv\u003E\u003Cdiv class=\u0022scroll form-wrapper\u0022 id=\u0022edit-options\u0022\u003E\u003C\u002Fdiv\u003E\u003Cinput type=\u0022hidden\u0022 name=\u0022form_build_id\u0022 value=\u0022form-UW3wGjAZ7uQSHnSFHkOCJBCXFkUh_hUSMVfXH5flU9g\u0022 \u002F\u003E\u000A\u003Cinput type=\u0022hidden\u0022 name=\u0022form_token\u0022 value=\u0022b0wo8lghlzfDkETx2iFzL2qUnzT1j_KhttblF047zDU\u0022 \u002F\u003E\u000A\u003Cinput type=\u0022hidden\u0022 name=\u0022form_id\u0022 value=\u0022views_ui_config_item_form\u0022 \u002F\u003E\u000A\u003C\u002Fdiv\u003E\u003C\u002Fform\u003E", "title":"", "url":"http:\u002F\u002F(我的站点域名).com\u002Fadmin\u002Fstructure\u002Fviews\u002Fajax\u002Fconfig-item\u002Fslideshow\u002Fblock\u002Ffield\u002Ftitle"} ]

Drupal 7

Views 7.x-3.7

Views Slideshow 7.x-3.1

jquery.cycle 已安装

试了好几次都这样,请高手帮我看看为什么?

新手学习、请多多指教……

这个是JSON的信息吧,你稍等片刻再点击,看看有没有。

喜欢Drupal和Wordpress,建了两个小站,不成气候。学习中。

估计又是用了 jquery 1.8+ 的版本了吧?切换到1.7,就可以了!

Drupal China http://drupalchina.cn

改成1.7的后果然没出现这个问题,谢谢!

1111111111.jpg我也遇到与楼上一样的问题,一点应用就出现一大堆,不过用还是可以的

但又出现了上图问题,没照片显示。

你确定是已经加了图片的字段了吗?

Drupal China http://drupalchina.cn

我已按步骤全部完成,但结果只显示一张照片呢?

根据操作步骤可以实现,提醒大家注意js的存放路径,非常感谢龙马的总结和分享!