欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

drupal如何实现图片的幻灯片显示(slideshows)效果

Web前端 夜阑小雨 476℃ 0评论

创建slide 内容类型和nodequeue slideshow.

用CCK创建一个类型名为slide,名字为Slide的内容类型,然后用 imagecache 创建一个图片filed,命名为field_slide_image.接下来,创建一个名字为Slideshow的nodequeue(admin/content/nodequeue/add/nodequeue),限定为只有Slide内容类型可以显示,再创建一些slide类型的节点。效果如图

内容创建完毕,接下来我们要处理显示页面和添加动作了

自定义主题和Jquery

我们用 ImageCache来限制图片的大小,这里设为350px (width) by 220px (height).

接下来在你的theme目录下创建 node-slide.tpl.php, copy以下代码:

<div id="node-<?php print $node->nid; ?>" class="slide">
<?php print theme('imagecache', 'slideshow', $node->field_slide_image[0]['filepath']); ?>
<? if (!empty($node->content['body']['#value'])): ?><div class="tagline"><?php print $node->content['body']['#value']; ?></div><?php endif; ?>
</div>

然后,copy以下CSS到你的theme目录下的css文件:
.slide {
position: relative;
height: 220px;
}

.slide img {
border: 0;
margin: 0;
padding: 0;
}

.slide .tagline {
background: #000;
color: #fff;
filter: alpha(opacity = 75);
font-size: 14px;
opacity: 0.75;
position: absolute;
bottom: 0;
width: 350px;
}

.slide .tagline p {
margin: 0;
padding: 7px 10px;
}
现在效果如下:

接下来,创建slideshow.js文件,copy以下代码或下载它:

$(document).ready( function() {
// Every six seconds execute the switchSlide() function
setInterval( "switchSlide()", 6000);
});

// This function takes the first .slide element and put at the end
function switchSlide() {
var slide = $(‘.slideshow .slide:first’);
slide.hide();
$(‘.slideshow’).append(slide);
slide.fadeIn(‘slow’);
}

最的,再加入以下CSS:

.slideshow {
height: 220px;
width: 350px;
margin: 0;
position: relative;
}

.slideshow .slide {
position: absolute;
}

然后在你的template.php文件中加入slideshow.js文件(注意是template而不是page.tpl.php
<?php
drupal_add_js(path_to_theme() .’/slideshow.js’);
print ‘<div class=”slideshow”>’. nodequeue_view_nodes(1) .'</div>’;
?>
确保把slideshow.js文件放进你的Theme目录下,这里“我”加入了Fadein()效果, 你也可以变成其它的,比如
slidedown(),show()等等

效果:

http://teddy.fr/blog/easy-and-maintainable-slideshows#slideshow

原文地址: http://teddy.fr/blog/easy-and-maintainable-slideshows

转载请注明:夜阑小雨 » drupal如何实现图片的幻灯片显示(slideshows)效果

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址