【精华帖】Drupal 7.X/6.X 如何用DDBlock模块创建幻灯片/图片轮播

显示全部楼层 · 发表于 4-10-2012 02:48

经常看到Drupal朋友讨论幻灯片/图片轮播方面的问题，现在将其他作者的三帖合一，加上DOOOOR其他页面关于DDBLOCK等模块的收录，相信即使菜鸟也受益匪浅！

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.指向其它页面

文章简介：

这篇文章介绍了一种使用DDBlock实现图片轮播效果的方案，在这种方法中我们需要创建一个带有图片附件的节点（使用Drupal的核心上传模块）。

『翻译』如何创建图片轮播块DDBlock（一）指向其它页面

在这个节点的正文中，我们将使用以下HTML代码来实现图片轮播效果：

<!—图片轮播滑块集合 -->

<!—第一个滑块-->

<!—图片链接到相应的节点地址 -->

</div>

</div>

</div>

代码中的"link to image"将需要被替换成该图片对应的地址，而"link to node"则按你所需替换为站内的某一个页面或是其它站点的页面。

我们会配置DDBlock的图片轮播块来指向新建的节点。

由于这种方案实现起来比较死板，所以更适合于用来展现站内为数不多的一些静态页面。

如果你在寻找的是一个能让每一个滑块都对应一个节点，都有一个缩略图、链接或者是其它一些文字以及“详情”按钮，那么这个方案并不适合你，你可以去DDBlock模块的高级选项中找到答案，我会在另一片博文中翻译高级配置的过程。

我们在这里将会新建一个名为“链接到其它页面的图片轮播”的内容类型，一个名为“ddblock images with links”的节点，以及一个名为"ddblock image-link slideshow"的ddblock。我建议大家在跟随本教程动手配置的时候还是沿用这些名字，等你把功能实现，看到效果之后再更改为其它的名字。

链接到本站内的其它页面

安装过程：

下面将列出一步一步教大家如何设置一个点击后链接到站内其它页面的图片轮播块。

创建一个内容类型

找到创建内容类型的导航菜单

1.打开 Admin（管理） > Content management（内容管理） > Content types（内容类型）。

添加内容类型

1.点击添加内容类型的按钮。

2.填入以下fields(变量)：

?名称 – 比如 ("链接到其它页面的图片轮播").

?类型 – 比如 ("ddblock_images_with_links").

?描述 - (可选).

3.点击保存内容类型。

4.点击manage fields 来管理该内容类型内的变量，添加新的变量用于之后上传图片。（需要先启用上传模块才可以添加图片类型的变量）。

5.点击保存之后会有另外一个设置表单，这里需要把Number of values(值的个数)设为3或者无限，方便之后上传图片，然后点击save field settings（保存变量设置）。

创建一个为图片轮播提供内容的节点

找到创建节点的页面

1.打开 Admin（管理） > Create content（创建内容） > "链接到其它页面的图片轮播".

创建节点

1.填入以下内容:

? 标题 – 比如 ("带链接的图片轮播").

? 在正文处输入以下代码，意思是图片轮播块将有3个滑块

</div>

</div>

</div>

2.上传3张图片到节点上，你需要先启用upload模块才能操作这一步。

3.将三张图片前面的列表选框都取消选择。

4.你需要把正文处的 "link to node" 和 "link to image" 改成有效的链接。

"link to node" – 改为链接到某个节点，或者站外的某个链接。比如："node/1"或者http://themes.myalbums.biz之类的站外链接。

"link to image" – 改为链接到图片轮播块中对应的图片. (可以直接复制上传附件处的地址)

修改后的代码应该类似这样的：

</div>

</div>

</div>

5.将输入格式改为Full HTML.

6.在发布选项中将节点设为已发表.

7.点击保存.

增加更多的图片块

在我们设置的这个“链接到其它页面的图片轮播”节点中，只能显示3个图片块。如果你希望显示更多的话，把下面的代码复制到正文代码最后一个</div>前面就行了。

为DDBlock模块启用你新建的内容类型

在你配置DDBlock之前，需要先启用你刚才新建的“链接到其它页面的图片轮播”类型。

在DDBlock中启用新的内容类型的路径

1.打开Admin（管理） > Site configuration（站点设置） > Dynamic display block

2.点击“Settings”(设置)选项卡。

启用内容类型

1.在内容类型列表里面，勾选启用“链接到其它页面的图片轮播”。

2.点击保存。

为“链接到其它页面的图片轮播”增加一个新的区块

添加区块的路径：

1.打开Admin（管理） > Site configuration（站点配置） > Dynamic display block。

增加区块

1.在区块标题处填入区块名称 – 比如：链接到其它页面的图片轮播区块。

2.点击增加区块按钮。

配置区块 -链接到其它页面的图片轮播区块

你可以通过两种路径来找到配置区块的页面

1.打开Admin（管理） > Site building（站点构建） > Blocks（区块） > "链接到其它页面的图片轮播区块"。

2.打开Admin（管理） > Site configuration（站点配置） > Dynamic display block > "链接到其它页面的图片轮播区块"。

配置区块

1.在Input Type(输入类型)下拉列表中选择：Content Type。

2.在Content Type(内容类型)下拉列表中选择：ddblock_images_with_links

3.在节点下拉列表中选择你新建的节点，比如：链接到其它页面的图片轮播

4.设置其它选项。

注意：

1.将Content container(内容容器)设置为div.slide（对应我们之前粘贴到正文里面的标签）

2.取消勾选Next(下一个)选项，取消后用户点击内容时就不会自动跳转到下一个内容了。

3.勾选User Pager（翻页块）,之后会出现对应的几个设置项进一步该翻页块。

4.点击页面底部的保存按钮。

图片轮播区块：

你可以把你的图片轮播区块放到任何你觉得合适的区域内。我这里选择了Banner2这个区域。点击保存之后就能看到你辛苦设置的图片轮播了！

美化图片轮播

你可以通过重写模版文件node.tpl.php来美化你的图片轮播块。

找到node.tpl.php,复制然后重命名为node-[Content-type-name（内容类型名称）].tpl.php，再按你的意思去修改图片轮播的风格就行了。

常见问题

当你发现节点标题会在图片切换的时候闪出来，你肯定想把它干掉，你有两种办法：

1.用CSS来实现，比如：

#ddblock-ddblock-[ddblock_nr] h2{display:none}

替换 [ddblock-nr] 为DDBlock的数量, 替换后变成:

#ddblock-ddblock-3 h2{display:none}

2.通过重写node.tpl.php来实现

找到node.tpl.php,复制然后重命名为node-[Content-type-name（内容类型名称）].tpl.php

去掉像下面这样的代码

<?php if ($page == 0): ?>

<h2 class="title"><a href="http://luhewan.blog.163.com/blog/<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>

<?php endif; ?>

原文链接：http://ddblock.myalbums.biz/node/849

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2.图片来自图片附件文件夹

简介

在这种实现方案中，我们要新建一个带有图片附件的节点。（附件启用方法请参考如何创建图片轮播（一）。

uploadpath模块是一个用来自动把各个节点里的附件分别放到以节点ID命名的文件夹里面，它自动创建的文件夹路径格式是ddblock/nid-[nid]/images。

我们接下来将配置DDBlock的图片轮播块来从这些自动创建的文件夹中获得图片。

每一个图片轮播块都需要单独配置一个新的DDBlock，它的图片路径会被设置成类似ddblock/node-116/images这样的。

这种解决方案对于创建单个或少量几个图片轮播块比较有用，如果你在寻找的是能够像图片画廊那样一页显示多个图片的方案，那么你更适合去看另外一篇教程：如何创建图片轮播（五）一个节点多张图片的高级图片轮播。

准备工作

你需要首先安装了uploadpath模块，才可以进行我们接下来的操作，该模块下载地址是http://drupal.org/project/uploadpath。

创建一个特定的内容类型

最好能够专门创建一个内容类型用来为我们将要创建的图片轮播块服务，这里我们将这个内容类型命名为ddblock_node_gallery

具体步骤：

1.打开内容类型管理页面 Administer（管理） > Content management（内容管理） > Content types（内容类型）

2.点击添加内容类型。

3.填入以下变量值

· 名称 - 节点画廊图片轮播

· 类型 - ddblock_node_gallery

· 描述 - 使用节点所带附件上的图片来实现图片轮播效果

4.点击保存内容类型。

为新建的内容类型创建上传目录

1.打开uploadpath的管理页面：Administer（管理） > Site configuration（站点配置） > File upload paths（上传路径）

2.展开Patterns for each node type，

3.在节点画廊图片轮播这个内容类型的路径模式处输入ddblock/nid-[nid]/images。

4.点击保存。

新建一个节点

1.打开新建节点页面：Administer（管理） > Create content（新建内容） > 节点画廊图片轮播

2.填写标题 - 例如：画廊1

3.上传图片 - 用来做为滑块预览图的图片。

4.点击保存。

注意：

1.为了让图片轮播可以开始轮播，你需要至少上传两张图片。

2.uploadpath模块会为我们自动创建目录ddblock/nid-[nid]/images。

3.点击保存后注意看一下地址栏处显示的节点ID是多少，我们在之后创建DDBlock的时候会用到。

创建、配置和启用一个DDBlock

· 打开DDBlock管理页面： Administer（管理） > Site configuration（站点配置） > Dynamic display block

· 在页面底部的区块标题处输入名称. 比如来自节点9（9指的是你刚才新建的节点的编号）的图片9 或者其它更具描述性的名称。

· 点击增加区块.

4. 点击区块列表中“来自节点9的图片”所在行的配置区块链接.

5. 把图片文件夹设为ddblock/nid-[nid]/images ([nid] 替换为你新建的节点.)

6. 点击页面底部的保存.

7. 来自文件夹ddblock/nid-[nid]/images 的图片现在将会被用来图片轮播。

8. 打开区块管理页面： Administer（管理） > Site Building（站点构建） > Blocks（区块）.

9. 在被禁用的区块列表里找到你新建的区块，然后放置到你想要的位置。

10. 点击保存.

经过了以上步骤以后，你应该已经能够看到图片轮播的效果了.如果你不能看到图片，请检查你的图片地址是否正确，你的目录应该是网站根目录下的相对目录，如果可以的话你应该先实际打开那个目录确认一下路径。

原文链接：http://ddblock.myalbums.biz/node/866

-----------------------------------------------------------------------------------------------------------------------------------

3.显示额外信息

本教程会介绍如何一步一步去创建可以显示一些额外信息的图片轮播，这些额外信息来自特定的节点，可以被用作滑块标题，滑块注释或者详细信息按钮。

这种实现方法比较适合用于一些内容很少改变的地方，比如说网站的头部主菜单。大部分时候修改这个模块内容的只应该是管理员。所以这是一个不太灵活的实现方法，但对于某些情况是很有用的。

我们这里将创建一个例子，主要是三个部分不断轮播：教程，常见问题和例子。当你点击详细信息……按钮的时候，用户将会去到相应的页面。

注意：在设置轮播的图片大小时候，最好能够设为图片的合适大小，就像我们之前创建的图片轮播一样。

我们将会用到的是：

· Content type（内容类型）: "显示额外信息的图片轮播"

· node（节点）: "显示额外信息的图片轮播"

· ddblock: "显示额外信息的图片轮播"

我建议你在跟随本教程来设置图片轮播的时候，最好先沿用同样的名字，当你设置成功之后，你可以随便改成其它的名字。

以下上详细的操作步骤

首先新建一个内容类型

· 打开内容类型管理页面： Admin（管理） > Content management（内容管理） > Content types（内容类型）.

· 点击添加内容类型.

· 在表单内分别填入以下内容:

· Name（名称） - 例如 ("显示额外信息的图片轮播").

· Type（类型） - 例如("ddblock_basic_extra").

· Description（描述） - ("一种用于创建可以显示额外信息的图片轮播的节点类型".).

· 展开Workflow（流程设定）的设置区域.

5. 取消选择“Promoted to front page”（推荐到首页）的选项.

6. 点击保存内容类型.

内容类型创建好了，下面我们创建一个节点，用于提供图片和额外信息

1. 打开新建节点页面：Admin（管理） > Create content（创建内容） > "显示额外信息的图片轮播".

2. 在新建节点的表单内填入以下内容:

· 名称 - 比如("显示额外信息的图片轮播").

· 在正文处输入以下代码.

<h2>[在这里填入幻灯片标题]</h2>

</div>

<p>[在这里填入幻灯片信息].</p>

</div>

</div>

</div>

<h2>[在这里填入幻灯片标题]</h2>

</div>

<p>[在这里填入幻灯片信息].</p>

</div>

</div>

</div>

· 上传两张图片附件.(你必须已经启用了uploadpath模块才可以上传附件，如果不知如何启用的，参考前面的教程.)

3. 替换代码内容.
这里给出改变第一个幻灯片内容的方法做为例子. 要改变第二个幻灯片可以照葫芦画瓢.

· 替换 [在这里填入幻灯片标题]为你想要的幻灯片标题.(我们这里使用的是: 教程)

·         替换 [在这里填入幻灯片信息]为幻灯片的信息.
(我们这里填的是下面这个无先后顺序的列表)
    <ul>
     <li>基本幻灯片教程</li>
     <li>高级幻灯片教程</li>
     <li>视频教程</li>
     <li>手把手</li>
     <li>提示</li>
    </ul>

· 替换"[在这里填入详细信息地址]"为你希望用户点击幻灯片的详细信息的时候链接到的页面.
比如 (填入"/node/1"代表链接到节点1的页面，你可以填入任何你想要的页面，只要保证你填写的地址被包括在双引号之内就行了。

· 替换 "[在这里填入图片地址]"为你希望在幻灯片中展示的图片的地址. 你可以从附件列表处复制图片地址到这里，只要保证地址被包括在双引号之内就行了.

注意: 你不必一定要使用附件中的图片，你可以使用其它任何图片地址，我们这里只是做为演示使用了附件地址。

· 重复以上操作步骤，把第二个幻灯片的内容也更改一下。

5. 把输入格式设为Full HTML.

6. 点击保存。

你的正文处代码现在应该是像这样的:

<h2>图片轮播教程</h2>

</div>

<p>

<ul>

<li>基本幻灯片教程</li>

<li>高级幻灯片教程</li>

</ul>

</p>

</div>

</div>

</div>

<h2>[your changed slide-title]</h2>

</div>

<p>[your changed slide-text].</p>

</div>

</div>

</div>

重要提示: 你应该替换所有[]内的内容.

增加更多幻灯片

为了让图片轮播能够开始轮播，你需要至少定义两张幻灯片，如果你希望有更多的幻灯片出现，重复添加以下div（class是slide的div代表一张幻灯片的内容）

你可以一次或多次重复粘贴来添加足够的幻灯片。

比如说: 如果你希望有3张幻灯片不断轮播，那么你的代码结构应该是以下这样的

为DDBlock启用我们新建的内容类型

在你开始配置DDBlock之前，必须先让它启用了我们新建的内容类型：显示额外信息的图片轮播

1. 打开DDBlock管理页面： Admin（管理） > Site configuration（站点配置） > Dynamic display block.

2. 点击设置.

3. 在内容类型列表里找到 "显示额外信息的图片轮播" ，勾选以启用它。

4. 注意: 由于目前DDBlock模块的一个小Bug，你还必须勾选区块列表里面的"node - 聚合"才能继续，这个Bug将会在之后的版本中被修复。

5. Click Save configuration button.

增加新的区块 "显示额外信息的图片轮播"

1. 打开DDBlock管理页面：Admin（管理） > Site configuration（站点配置） > Dynamic display block.

2. 填入区块标题 - 比如("显示额外信息的图片轮播").

3. 点击增加区块按钮.

配置区块 - "显示额外信息的图片轮播"

你有两种方式可以打开配置区块的页面

1. 依次打开 Admin（管理） > Site building（站点构建） > Blocks（区块） > "显示额外信息的图片轮播".

2. 依次打开 Admin（管理） > Site configuration（站点配置） > Dynamic display block > "显示额外信息的图片轮播".

配置区块

1. 在输入类型处选择Content type(内容类型）。

2. 在Content Type（内容类型）处选择"ddblock_basic_extra" 。

3. 选择你新建的节点, 比如 ("显示额外信息的图片轮播").

4. Node Content （节点内容）处就按默认的，选择正文.

5. 在Content container（内容容器）处改img为div.slide.

6. 设置图片的宽和高为0，意为按照图片本身的大小。

7. 设置Content container(内容容器)的宽和高为你希望在图片轮播中显示的大小，比如：宽450，高300.

8. 在“设置”处取消勾选Next（下一个），让用户点击图片的时候不会去到下一张幻灯片.

9. 勾选Use Pager（自定义翻页）.

10. 选择一个翻页器，可以选择数字翻页或者前后翻页。

11. 设置翻页器默认高度为25.

12. 按你喜欢，设置其它的一些参数, 比如页面切换速度:500, 页面停留时间：5000 等等.

13. 点击保存.保存之后再到区块配置处把我们新建的区块放置到你想要的区域，不过这时候图片轮播的效果还没成型，如果你设置正确，看到的应该是很混乱的一个效果，因为我们还有很重要的一步没有完成，就是下面的主题设置。

显示额外信息的图片轮播主题布局

1. 先去下载页面下载主题布局文件basic_slideshow_extra_info.zip。

2. 在你所使用的Drupal主题文件夹内，新建一个名为custom的文件夹，你的Drupal主题一般是放在“sites/all/themes/[你的主题名称]/” 下面。然后把你刚下载的压缩包内的文件夹ddblock整个放到这个文件夹下面。

3. 找到文件 [主题名称].info，然后通过添加以下代码来启用我们刚下载的DDBlock主题：

stylesheets[all][] = custom/modules/ddblock/custom.css
重要:当你的Drupal主题没有通过 [你的主题名称].info文件来添加其他样式表(css)文件，那么它会默认地使用style.css.
当你现在添加代码
stylesheets[all][] = custom/modules/ddblock/custom.css
drupal会通过 [你的主题名称].info找到你指定的样式表(css)文件，而不再使用默认的。
在这里你同样需要指定新的样式表(css)文件。
所以你的代码应该多了一行:
;自定义样式表
stylesheets[all][] = custom/modules/ddblock/custom.css

; 标准样式表