创建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 .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;
}

然后在你的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)效果