Question

I have a similar problem to How do I use colorbox to show hidden divs on my page without hardcoding? but the solution there is not working for me.

Am using a custom WP_Query to return a set of thumbnails from a custom post type, on click I’d like to activate colorbox and display the post info in the overlay.

Javascript:

$(document).ready(function() {
$(".colorbox").colorbox
({
innerWidth: "660px",
transition: "fade", 
href:function(){
var elementID = $(this).attr('id');
return "#" + elementID; }
})
});

WordPress code:

<?php
        $clientInfo = new WP_Query();
        $clientInfo->query('post_type=Clients&orderby=date&order=ASC');
        ?>
        <?php $i = 0; ?>
        <?php while ($clientInfo->have_posts()) : $clientInfo->the_post(); ?>
        <?php $i++; ?>
        <a href="#post-<?php the_ID(); ?>" class="colorbox client-logo<?php if ($i == 4 || $i == 8 || $i == 14 || $i == 16 || $i == 20) { echo ' row-last'; } ?>">
        <?php the_post_thumbnail('client-logo'); ?>
        </a>
        <div class="hidden-content">
            <div id="post-<?php the_ID(); ?>">
            <?php the_title(); ?>
            <?php the_content(); ?>
            </div>
        </div>
    <?php endwhile; ?>  

I’m displaying the thumbnails fine, returning the whole page in my overlay 🙂 There’s something wrong with the function I’m using in my colorbox JS I would guess, but it seems to be working for others.

I just need to be able to return the contents of each .hidden-content (dynamic content of each entry) in my overlay, hence why I’m trying to use the function instead of simply setting a div ( setting href: “.hidden-content” returns every .hidden-content in each individual overlay)

Thanks!

Answer 1

Instead of this:

$(".colorbox").colorbox
({
innerWidth: "660px",
transition: "fade", 
href:function(){
var elementID = $(this).attr('id');
return "#" + elementID; }
})

I think you intend to do this:

$(".colorbox").colorbox
({
inline:true,
innerWidth: "660px",
transition: "fade", 
href:function(){
var elementID = $(this).attr('id');
return "#post-" + elementID; }
})