0

私が達成しようとしているのは、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(); ?>
4

2 に答える 2

0

この質問を参照してください。jQuery を使用してモーダルにデータを渡すのは非常に簡単です。

于 2013-06-13T14:52:54.393 に答える
0

私が間違っていたのは、モーダルの識別子が同じで、id が一意でなければならないということでした。だから私はモーダルのIDを「#myModal-」に変更し、それぞれが独自の一意のIDを取得しました!

于 2013-06-13T16:54:10.137 に答える