Question

我遇到与How do I use colorbox to show hidden divs on my page without hardcoding?类似的问题，但那里的解决方案对我不起作用。

使用自定义WP_Query从自定义帖子类型返回一组缩略图，点击后我想激活彩盒并在叠加层中显示帖子信息。

使用Javascript：

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

WordPress代码：

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

我正在显示缩略图，在我的叠加层中返回整个页面:)我在我的颜色框中使用的函数有问题我会猜测，但它似乎适用于其他人。

我只需要能够在我的叠加层中返回每个.hidden-content（每个条目的动态内容）的内容，因此我尝试使用该函数而不是简单地设置div（设置href： “.hidden-content”返回每个单独叠加层中的每个.hidden-content）

谢谢！

Answer 1

而不是：

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

我想你打算这样做：

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

Colorbox在WordPress中动态显示隐藏的div

1 个答案: