Colorbox для динамического отображения скрытых элементов в WordPress - PullRequest
Новая
       17

Colorbox для динамического отображения скрытых элементов в WordPress

0 голосов
/ 13 сентября 2011

У меня проблема, аналогичная Как использовать colorbox для отображения скрытых элементов на моей странице без жесткого кодирования? , но решение там не работает для меня.

Использую пользовательский WP_Query для возврата набора миниатюр из пользовательского типа записи, при нажатии я бы хотел активировать colorbox и отобразить информацию о сообщении в оверлее.

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

Я отлично отображаю миниатюры, возвращая всю страницу в своем оверлее :) Что-то не так с функцией, которую я использую в своем цветном ящикеJS Я бы догадался, но, похоже, работает на других.

Мне просто нужно иметь возможность возвращать содержимое каждого .hidden-content (динамическое содержимое каждой записи) в моем оверлее, поэтому я пытаюсь использовать функцию вместо простой установки div (setting href: ".hidden-content" возвращает каждый .hidden-content в каждом отдельном оверлее)

Спасибо!

1 Ответ

0 голосов
/ 14 сентября 2011

Вместо этого: 

$(".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; }
})
...