jQuery循环缩略图？
大家好
我这里有一个演示（不是Wordpress），我正在使用jQuery循环插件创建幻灯片和缩略图。
http://www.ttmt.org.uk/forum/wordpress/
我想在Wordpress中创建同样的东西
http://www.ttmt.org.uk/wordpress/
在这里，我有一个直接添加到页面内容中的图像页面。
我使用与非wordpress页面相同的循环代码。
将为缩略图添加图像占位符，但不会为图像添加占位符。
有人知道为什么没有显示缩略图吗？
还有别的方法吗。
我尝试使用Wordpress插件来实现这一点，但它们都将幻灯片图像限制为相同的尺寸。我需要不同大小的图像。
--更新--
主页有一个php，它只输出页面内容。图像已直接添加到页面
<div id="content">
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div id="slideshow">
<?php the_content(); ?>
</div><!-- #slideshow -->
<div id="thumbWrap">
<ul id="thumbs">
</ul>
</div>
<?php endwhile; endif;?>
</div><!-- #content -->
这是我用来尝试创建缩略图的jquery。我正在使用Timthumb调整拇指的大小。
<script type="text/javascript">
$(window).load(function() {
$(\'#slideshow\').cycle({
fx: \'fade\',
speed: 800,
timeout: 3000,
pause: 1,
pager: \'#thumbs\',
pagerAnchorBuilder: function(idx, slide) {
return \'<li><a href="#"><img class="imgThumb" src="<?php bloginfo(\'template_directory\'); ?>/thumb/thumb.php?src="\' + slide.src + \'"&h=50&w=50px&zc=1" /></a></li>\';
}
});
});
</script>
SO网友:cpilko
我在的主页上使用jQuery循环http://getwellgabby.org/. 您可以检查这些元素，看看CSS在这里发生了什么。
对于PHP，我编写了一个自定义主页模板，作为基于TwentyTen的子主题的一部分。页面中有两个循环：一个循环获取静态页面内容，另一个循环将最新的博客文章拉入“隐藏”中。
<?php
$page_id = 5; //Get the content for the "Home" page.
$page_data = get_page( $page_id );
$content = apply_filters(\'the_content\', $page_data->post_content);
?>
<div id="post-<?php echo $page_id; ?>" <?php post_class(\'\', $page_id); ?>>
<div class="entry-content">
<?php
$arrImages =& get_children(\'order_by=menu_order&order=ASC&post_type=attachment&post_mime_type=image&post_parent=\' . $page_id);
if($arrImages): ?>
<script type="text/javascript">
jQuery(function(){
jQuery(\'#slider\').cycle({ fx: \'fade\', speed: 3000 });
});
</script>
<div id="slider-wrapper">
<div id="slider">
<!-- To add photos to this page, upload 385 x 265 px images in the WP media manager and attach them to the Home Page -->
<?php
foreach ( $arrImages as $attachment_id => $attachment ) {
echo wp_get_attachment_image( $attachment_id, \'rotator\' );
}
?>
</div><!--slider-->
<div id="slider-frame">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/photo-frame.png" width="394" height="275" />
</div><!--slider-frame-->
</div><!--slider-wrapper-->
<?php endif; ?>
<?php echo $content; ?>
</div><!--#entry-content-->
</div><!--#post-->
为了获得自定义大小的“旋转器”图像，我将此代码添加到主题的函数中。php：
if ( function_exists ( \'add_theme_support\') ) {
add_theme_support( \'post-thumbnails\' );
add_image_size( \'rotator\', 385, 265, true );
}
