Question

我在Wordpress中构建了一个单页网站，正如我在my previous question中所说的那样（我正在踩这个新的理由）。我跟随的The tutorial工作，并且整齐地从数据库中提取内容。但是，当我需要在页面中创建一组动态画廊时，一个新的挑战展开了。

所以这里需要发生的事情：每个都有一个带有画廊的后期标题列表。当我单击其中一个链接时，带有缩略图的帖子就会出现在其下方。我设法做得很好，但是当点击缩略图时，较大的版本应该出现在右侧。我应用了相同的代码，但它不起作用！它只是进入图像页面（image.php）。

现在正在发生的事情： x marks the spot

这是我现在的代码：

index.php（图库部分）

have_posts（））：$ recent-＆gt; the_post（）;？＆gt;

        <div class="controle">
            <h1>A Galeria</h1>
            <nav id="galerias">
            <?php $args = array('post_type'=>'galeria');

            $myposts = get_posts( $args );
            foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
                <li>
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </li>
            <?php endforeach; 
            wp_reset_postdata();?>
            </nav>

            <div id="thumbnails">

            </div>


        </div>

            <div id="conteudo-galeria">
                <div id="texto-galeria">

                </div>
            </div>

</div>

thumbnails.php（显示缩略图。工作。）

$(document).ready(function() {


    var hash = window.location.hash.substr(1);
    var href = $('#galerias li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length)){
            var aCarregar = 'hash+.html #itens';
            $('#thumbnails').load(aCarregar)
        }
    });

    $('#galerias li a').click(function() {

        var aCarregar = $(this).attr('href')+' #itens';
        $('#thumbnails').hide('fast',carregarConteudo);
        $('#carregando').remove();
        $('#thumbnails').append('<span id="carregando">Carregando...</span>');
        $('#carregando').fadeIn('normal');

        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length);

        function carregarConteudo () {
            $('#thumbnails').load(aCarregar,'',mostrarNovoConteudo);
        }
        function mostrarNovoConteudo () {
            $('#thumbnails').show('normal',esconderCarregando);
        }
        function esconderCarregando () {
            $('#carregando').fadeOut('normal');
        }

        return false;
    });

});

galeria.php（添加缩略图以显示图像。无法正常工作）

$（document）.ready（function（）{

var hash = window.location.hash.substr(1);
var href = $('#itens a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length)){
        var aCarregar = 'hash+.html #conteudo-galeria';
        $('#conteudo-galeria').load(aCarregar)
    }
});

$('#itens a').click(function() {

    var aCarregar = $(this).attr('href')+' #conteudo-galeria';
    $('#conteudo-galeria').hide('fast',carregarConteudo);
    $('#carregando').remove();
    $('#atracoes').append('<span id="carregando">Carregando...</span>');
    $('#carregando').fadeIn('normal');

    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length);

    function carregarConteudo () {
        $('#conteudo-galeria').load(aCarregar,'',mostrarNovoConteudo);
    }
    function mostrarNovoConteudo () {
        $('#conteudo-galeria').show('normal',esconderCarregando);
    }
    function esconderCarregando () {
        $('#carregando').fadeOut('normal');
    }

    return false;
});

}）;

iamge.php（图库中的图片页面）

<?php get_header(); ?>

    <!-- Main -->
    <div class="main">

    <div id="conteudo-galeria">
    <div id="texto-galeria">

    <?php if (have_posts()): while (have_posts()) : the_post(); ?>

        <!-- imagem -->

            <?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "full"); ?>
                <img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>" alt="<?php $post->post_excerpt; ?>" />
            <?php else : ?>
                <a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars( get_the_title($post->ID), 1 ) ?>"><?php echo basename($post->guid) ?></a>
            <?php endif; ?>

        <!-- /imagem -->

    <?php endwhile; ?>

    <?php else: ?>

    <?php endif; ?>

    </div>
    </div>

    </div>
    <!-- /Main -->


<?php get_footer(); ?>

哇，这很长。谢谢你，如果你有耐心跟随'直到这里。

PS：js也应该让历史工作，但事实并非如此。这不是现在的优先事项，但如果你们知道无论如何要解决这个问题，我们将非常感激。

Answer 1

我发现了问题！

由于事件正在监视的内容仅在第一个ajax启动后加载，因此第二个ajax不知道在哪里查找它。事情是有新的方法来监视jQuery中的事件，完全解决了这个问题。 on('click'...处理程序监视指定父级内的任何元素。所以第二个js文件（galeria.js）应如下所示：

$(document).ready(function() {


    $('#thumbnails').on('click','a', function(event) {

        var aCarregar = $(event.target).attr('href')+' #texto-galeria';
        $('#texto-galeria').fadeOut('fast',carregarConteudo);
        $('#carregando').remove();
        $('#conteudo-galeria').append('<span id="carregando">Carregando...</span>');
        $('#carregando').fadeIn('normal');

window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

        function carregarConteudo () {
            $('#texto-galeria').load(aCarregar,'',mostrarNovoConteudo);
        }
        function mostrarNovoConteudo () {
            $('#texto-galeria').fadeIn('normal',esconderCarregando);
        }
        function esconderCarregando () {
            $('#carregando').fadeOut('normal');
        }

        return false;
    });

});

父母在加载时需要在页面中（也不能是动态的）所以我必须将#itens更改为#thumbnails。

Answer 2

如果它只是将您重定向到图像页面，则问题可能是链接上的单击事件。您可以尝试在用户单击链接时阻止默认操作。你可以尝试改变

$('#itens a').click(function() {
    ....

分为：

$('#itens a').click(function(event) {
    event.preventDefault();
    ...

Wordpress动态画廊

2 个答案: