创建易于重用的翻转效果（slide show）的图片控制展示区块
效果如下图：（展示效果，可见此页面 -- 展示效果）
要点：
1. 无需其他模块支持
2. 利用drupal自带的jquery
3. 对于站点而言只增加了1个.js文件和相关的css设置
4. 通过block输出，灵活的控制显示和多页面重用
制作流程：
1.首先要在你的模板page.tpl.php中划分出该区块输出位置，比如left, right,此例为 AD 区，<code><?php print $AD ?></code>
2.既然是利用drupal自带的jquery库, 那么可以到http://www.malsup.com/jquery/cycle/int2.html查找你想用的cycle转换的jquery sample,此例用的是http://www.malsup.com/jquery/cycle/pager11.html
3.选定jquery sample后，分析sample需要用到的代码，比如此例需要用到的是jquery.cycle.all.2.72.js和页面的jquery控制代码：
<code>
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
fx: 'scrollHorz',
timeout: 0,
prev: '#prev',
next: '#next',
pager: '#imgnav',
pagerAnchorBuilder: pagerFactory
});
function pagerFactory(idx, slide) {
var s = idx > 2 ? ' style="display:none"' : '';
return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>';
};
});
</script>
</code>
以及对应的css定义，比如此例中的#slideshow 和 #imgnav（必须在页面文件中定义输出）
4.确认需要的文件和代码后，把这些都加入到drupal的theme文件中去，此例中page.tpl.php中加入到你的<head></head>中
<code>
<head>
......
<script type="text/javascript" src="/sites/all/themes/你的模板名称/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
fx: 'scrollHorz',
timeout: 0,
pager: '#imgnav',
pagerAnchorBuilder: pagerFactory
});
function pagerFactory(idx, slide) {
var s = idx > 2 ? ' style="display:none"' : '';
return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>';
};
});
</script>
......
</head>
</code>
5. page文件修饰好后，到block管理页面创建区块，添加自己的slide区块：
添加jquery sample 中css 定义和对应的html代码包括需要翻转的图片路径。
最后控制该区块的显示（可选）。
6. 区块保存后，把该区块增加到需要输出的区块输出区：
7.对应页面css小调整
OK,几项步骤过后，自定义的slide show区块就生成了。
可能中间环节比较细节，就是说制作并不是很简易，但这么做的做大好处在于：
做好第1个后，重用就很容易，做第2个乃至第10个，只要复制block中的html代码，改变一下图片路径，控制下显示页面即可。还有slide效果，增加或者改变也非常容易，参照之前的jquery sample网站，加入动态的简短控制代码，可以非常方便的得到诸如隐现，next/preview控制按钮，自动播放时间控制等多个效果。
Shanghai Apartment | Shanghai Property | Shanghai Rent | Shanghai Rental
- 0 条评论