Loading post content in FancyBox

Question

I got a tricky question. I have created a custom post type whose posts I would like to display in a scrolling carousel. The carousel will only display the title, the excerpt and a "read more" button. The "read more" button displays the full post in a FancyBox.

Here is my code so far:

<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> 

Everything is working nicely. The Carousel and FancyBox scripts are loading correctly but the FancyBox is displaying the wrong content.

Any help/advice would be great.

Answer 1

The issue is that you are declaring a same ID for every DIV in the LOOP. What you need is to do something like this:

    <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> 

I've change the inline1 with inline[?php echo $i; ?].

Hope this solve your problem.

Answer 2

Hope This will help

<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(); ?>

Answer 3

If your fancybox content isn't what you want then the issue is most likely with your jquery or plugin usage.

If you're using the "fancybox for wordpress" plugin, it's been my experience that it doesn't handle inline content well by default. You may need to define an extra call within the plugin.

It looks like you are mirroring the inline usage on the fancybox.net site.
You should try implementing a similar call to fancybox that is used there:

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

this is the call for this html example:

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

Where various1 is the id of the link and fancybox displays the content of the element that matches the id of the href attribute in the link (in this case href="#inline1").