0

I have a custom post type being output as a list. I'm trying to output some of the inline content in each li via Fancybox.

All works so far except it only shows the first li's content. I understand that the problem is I'm calling the same ID every time in the loop.

I used the last post here to get each ID to be numbered, which works fine, I can now see each link ID is #content1, #content2, #content3 etc.

But how do I change my javascript to work for all the #content numbers?

The base script I have is:

    $('a[href="#content"]').fancybox({
        autoSize : false,
        width : 600,
        wrapCSS : 'inline-content'
    });

And here is my loop that adds numbers to each ID...

    <?php $args = array( 
            'post_type' => 'otherwork',
            'posts_per_page' => -1,
            'orderby'=>'date',
            'order'=>'ASC'
        );
        $loop = new WP_Query( $args ); $i = 0; ?>

            <article>
                <ul class="otherwork">
                 <?php while ( $loop->have_posts() ) : $loop->the_post(); $i++; ?>
                    <li>
                        <a href="#content<?php echo $i; ?>" ><?php the_post_thumbnail( 'otherwork-thumb' ); ?></a>
                        <div id="content<?php echo $i; ?>" style="display:none">
                            <h1><?php the_title(); ?></h1>
                            <?php the_post_thumbnail(); ?>
                            <?php the_content(); ?>
                        </div>
                    </li>
                <?php endwhile; ?>
                </ul>
                <div class="clearfix"></div>
            </article>

HTML output for more info...

    <section id="main" class="span12" role="main">
    <article>
    <ul class="otherwork">
    <li>
    <a href="#content1">
    <div id="content1" style="display:none">
    </li>
    <li>
    <a href="#content2">
    <div id="content2" style="display:none">
    </li>
    </ul>
    <div class="clearfix"></div>
    </article>
    </section>

Thanks for any help!

1

You are using the selector 'a[href="#content"]' in jQuery but the href attribute of the target links is #content<?php echo $i; ?>. Try removing <?php echo $i; ?> in the href attribute.

If you need jQuery code recognise all <a> elements with href starting with the string "content" you can use the ^ modifier: jQuery('a[href^="#content"]'). So your code will look:

jQuery('a[href^="#content"]').fancybox({
    autoSize : false,
    width : 600,
    wrapCSS : 'inline-content'
});

Note that using $ namespace in Wordpress like you are using it can cause javascript errors because in Wordpress jQuery runs in noConflict mode.

3
  • As I understand it... I need to keep the <?php echo $i; ?> in as that is what calls the correct link. Each href ID is output as #content1, #content2 #content3 etc. so just having the href as #content wont work. May 19 '14 at 12:22
  • I've added the HTML output now, I hope that helps to explains it better! I need the javascript to recognise #content1, #content2, #content3 etc. for an undetermined number of #contents May 19 '14 at 12:29
  • That is why it is not working, because the href value of your target links doesn't match the slector you are using in the jQuery code that is always #content and not #content1, #content2, and so on. If you need to recognise all id starting with "content" you can use the suggested code. See edit. Anyway, your question is now jQuery specific, no Wordpress.
    – cybmeta
    May 19 '14 at 14:39
0

Thanks to Jay Blanchard over on here post for the answer!

Use the "begins with" attribute selector -

$('a[href^=#content"]')

http://api.jquery.com/category/selectors/attribute-selectors/

0

For an inline content, you can use fancybox's href="#content1":

<a class="various "href="#content1">Inline</a>
<div id="content1" style="display:none">Your content</div>

And finally width jQuery:

$(".various").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none'
});

Check fancybox website for more information: http://fancyapps.com/fancybox/

Hope that helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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