尽管链接正确,但仍显示错误的图像

时间:2015-08-27 18:36:26

标签: css wordpress wordpress-theming lightbox

这是我目前正在处理的一个非常奇怪的问题:我正试图在我的wordpress主题中实现一个灯箱效果。遵循本教程here(使用的CSS代码是这一个:link)。我按原样试了,效果很好。
但我并不是要将效果应用于精选图像,而是将其应用于帖子中的所有图像。我已经更改了代码以符合我的需要,如果我在帖子中只有一张图片但是如果我在问题开始时添加另一张(或更多),则它会起作用:
当我点击图片时,无论哪一张,它都只是第一张在大版本中显示的图片。但是当我检查源代码时,每个图片的大版本都会调用相关的图片 以下是我用于此灯箱效果的代码:

<?php
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'post_mime_type'=> 'image',
'orderby'   => 'ID',
'order'     => 'ASC',
);
$attachments = get_posts( $args );
?>
<div class="nine columns">
<div class="about">
<h2><?php the_title(); ?></h2>
<?php  foreach ( $attachments as $attachment ) :
$attachments = get_posts( $args );
$small_image = wp_get_attachment_image_src($attachment->ID, 'thumbnail');
$large_image = wp_get_attachment_image_src($attachment->ID, 'full');
?>
<a href="#<?php echo $attachments ?>"><img src="<?php echo $small_image[0]; >" alt="small"></a> 
<a href="#" id="<?php echo $attachments ?>" class="pressbox"><img src="<?php echo $large_image[0]; ?>" alt="large"></a>
<?php endforeach ?>
</div>
</div> 

提前感谢您查看我的请求 亲切的问候 漫游者

1 个答案:

答案 0 :(得分:0)

您的代码有三个问题:
1.不应该调用$ attachments = get_posts($ args);在foreach中 2.小​​图像链接的href不正确
3.大图像链接的ID不正确

试试这个:

<?php
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'post_mime_type'=> 'image',
'orderby'   => 'ID',
'order'     => 'ASC',
);
$attachments = get_posts( $args );
?>
<div class="nine columns">
<div class="about">
<h2><?php the_title(); ?></h2>
<?php  foreach ( $attachments as $attachment ) :

$small_image = wp_get_attachment_image_src($attachment->ID, 'thumbnail');
$large_image = wp_get_attachment_image_src($attachment->ID, 'full');
?>
<a href="#<?php echo $attachment->ID ?>"><img src="<?php echo $small_image[0]; ?>" alt="small"></a> 
<a href="#" id="<?php echo $attachment->ID ?>" class="pressbox"><img src="<?php echo $large_image[0]; ?>" alt="large"></a>
<?php endforeach ?>
</div>
</div>