web-dev-qa-db-ja.com

FancyBoxに投稿コンテンツを読み込む

私は難しい質問をしました。スクロールカルーセルに表示したいカスタム投稿タイプを作成しました。カルーセルには、タイトル、抜粋、および「続きを読む」ボタンだけが表示されます。 "続きを読む"ボタンはFancyBox内の全投稿を表示します。

これが私のコードです。

<ul id="slider2">
<?php
    $args = array( 'post_type' => 'jobs', 'posts_per_page' => 15 , 'order' => 'ASC' );
    $loop = new WP_Query( $args ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <li>
            <h4><?php the_title(); ?></h4>
            <?php echo excerpt( '30' ); ?>
            <a class="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Read more &rarr;</a>
            <div style="display: none;">
                <div id="inline1" style="width:400px;height:100px;overflow:auto;"><?php the_content(); ?></div>
            </div>
        </li>
    <?php endwhile; wp_reset_query(); ?>
</ul>

すべてがうまく機能しています。 CarouselスクリプトとFancyBoxスクリプトは正しくロードされていますが、FancyBoxが誤ったコンテンツを表示しています。

任意の助け/アドバイスは素晴らしいでしょう。

custom-post-typespostsquery-posts
1
jmysona

これが役立ちます

<ul id="slider2">  
<?php
$args = array( 'post_type' => 'jobs', 'posts_per_page' => 15 , 'order' => 'ASC' );
$loop = new WP_Query( $args ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); global $post; ?>
    <li>
        <h4><?php the_title(); ?></h4>
        <?php echo excerpt( '30' ); ?>
        <a class="various1 fancybox" href="#inline<?php echo $post->ID; ?>" title="Lorem ipsum dolor sit amet">Read more &rarr;</a>
        <div style="display: none;">
            <div id="inline<?php echo $post->ID;  ?>" style="width:400px;height:100px;overflow:auto;"><?php the_content(); ?></div>
        </div>
    </li>
<?php endwhile; wp_reset_query(); ?>
1
Dhanuka Nuwan

問題は、ループ内のすべてのDIVに対して同じIDを宣言しているということです。あなたが必要とするのはこのような何かをすることです：

    <ul id="slider2">
<?php
    $args = array( 'post_type' => 'jobs', 'posts_per_page' => 15 , 'order' => 'ASC' );
    $loop = new WP_Query( $args ); $i = 0; ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); $i++; ?>
        <li>
            <h4><?php the_title(); ?></h4>
            <?php echo excerpt( '30' ); ?>
            <a class="various1" href="#inline<?php echo $i; ?>" title="Lorem ipsum dolor sit amet">Read more &rarr;</a>
            <div style="display: none;">
                <div id="inline<?php echo $i; ?>" style="width:400px;height:100px;overflow:auto;"><?php the_content(); ?></div>
            </div>
        </li>
    <?php endwhile; wp_reset_query(); ?>
</ul>

inline1をinline[?php echo $i; ?]に変更しました。

これがあなたの問題を解決することを願っています。

1
Viktor Hugo Morales

あなたのファンシーボックスのコンテンツがあなたが望むものではないなら、問題はあなたのjqueryまたはプラグインの使用法にある可能性が最も高いです。

あなたが「ワードプレスのためのfancybox」プラグインを使用しているなら、それはそれがデフォルトでうまくインラインコンテンツを扱わないことが私の経験でした。プラグイン内で追加の呼び出しを定義する必要があるかもしれません。

Fancybox.netサイトでのインライン使用を反映しているようです。
そこで使用されているfancyboxへの同様の呼び出しを実装してみてください。

$("#various1").fancybox({
    'titlePosition'     : 'inside',
    'transitionIn'      : 'none',
    'transitionOut'     : 'none'
});`

これはこのHTMLの例の呼び出しです：

<a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Inline - auto detect width / height</a>

various1はリンクのIDで、fancyboxはリンク内のhref属性のIDと一致する要素の内容を表示します（この場合はhref="#inline1"）。

0
Evan Mattson