我想要实现的是在wordpress页面内创建一个带引导程序的网格,并以缩略图形式显示30个帖子。通过单击缩略图,将显示模式框,其中图像为完整大小。
我现在正在做的是弹出模态但每次都显示相同的图像。我试图在标签中设置href值,该值将显示模态中的帖子。
<?php get_header(); ?>
<div id="content" class="clearfix">
<div id="main" class="clearfix" role="main">
<?php $counter = 0; ?>
<div class="row-fluid">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php if ($counter < 4): ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix thumbnail-post span3'); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<a href="#myModal" data-toggle="modal" >
<?php the_post_thumbnail( 'graphix-thumbnail' ); ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
</a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class='modal-body'>
<img src="<?php echo $url; ?>" />
</div>
</div>
<div class="page-header"><h3 itemprop="headline"><?php the_title(); ?></h3></div>
</header> <!-- end article header -->
<section class="post_content clearfix">
<?php the_content(); ?>
</section>
</article> <!-- end article -->
<?php $counter +=1; ?>
<?php else: ?>
</div>
<?php $counter = 0; ?>
<div class="row-fluid">
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
</div>
<?php endif; ?>
</div> <!-- end #main -->
</div> <!-- end #content -->
<?php get_footer(); ?>
答案 0 :(得分:0)
请参阅this问题。使用jQuery将数据传递给模态非常容易。
答案 1 :(得分:0)
我做错了是模态的标识符是相同的,而id必须是唯一的。所以我将模态的id更改为“#myModal-”,每个人都有自己独特的ID!