Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
Please follow up on the questions you asked, it's an important part of the process on WPSE - see What should I do when someone answers my question? and Why is voting important? for a deeper insight. –  ialocin May 19 at 15:12

3 Answers 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").

share|improve this answer
    
Hi Evan No this wasn't my problem FancyBox works fine its just doesn't display the right content as I would like to display content off that post from the loop within that Fancybox –  jmysona Jun 29 '12 at 14:51

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.

share|improve this answer

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

share|improve this answer
    
Please try to explain your code, so that the code can be implemented with all its best. :) –  Mayeenul Islam Jul 2 at 4:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.