Wordpress动态图库

Question

正如我在我以前的问题中所说的那样，我正在用Wordpress构建一个单一页面的网站(我在这个网站上迈出了新的步伐)。我遵循的本教程很好地从数据库中提取内容。但是当我需要在一个页面中创建一组动态的图库时，一个新的挑战出现了。

所以这里需要做的是:每一篇文章里都有一张贴有画廊的帖子列表。当我点击其中一个链接时，带有缩略图的帖子就会出现在它下面。我成功地做到了这一点，但是当点击缩略图时，更大的版本应该出现在右边。我应用了相同的代码，但它就是不起作用！它只会转到图像页面(image.php)。

现在的情况如下：

​

这是我到现在的密码：

• index.php (画廊部分) Have_posts()：$；？>->；？>_post()
• thumbnails.php (打开缩略图)。(工作) $(.ready)(函数(){ var散列= window.location.hash.substr(1)；var href = $('#galerias li a‘).each(函数(){ var href = $(this).attr('href')；if(hash==href.substr(0，href.length)){ var aCarregar = 'hash+.html #itens’)；$(‘#缩略图’).load( aCarregar )}}；$('#galerias li a‘).click(函数(){ var aCarregar= $(this).attr('href')+’#itens'；$(‘#缩略图’).hide(‘fast’，carregarConteudo)；$(‘carregando’).remove()；$(‘#缩略图’).append(‘carregando.’)；$('#carregando').fadeIn('normal')；window.location.hash =$(这个).attr(‘href’).substr(0，$$(这个).attr(‘href’).length)；函数carregarConteudo () {$(‘#缩略图’).load(aCarregar，''，mostrarNovoConteudo)；}函数mostrarNovoConteudo () {$(‘#缩略图’).show(‘normal’，esconderCarregando)；}函数esconderCarregando () {$(‘#carregando’).fadeOut(‘normal’；}返回false；})； galeria.php (带地址的缩略图以显示图像)。不工作) $(Document).ready(函数(){) var散列= window.location.hash.substr(1)；var href = $('#itens a‘).each(函数(){ 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(函数(){ var aCarregar = $(this).attr('href')+’#conteudo-galeria'；$('#conteudo-galeria').hide('fast'，carregarConteudo)；$('#carregando').remove()；$(‘#atracoes’).append(‘carregando.’)；$(‘#carregando’).fadeIn(‘普通’)；window.location.hash = $(this).attr('href').substr(0，$(this).attr('href').length)；函数carregarConteudo () { $('#conteudo-galeria').load(aCarregar，''，mostrarNovoConteudo)；}函数mostrarNovoConteudo () { $('#conteudo-galeria').show('normal'，esconderCarregando)；}函数esconderCarregando () {$(‘#carregando’).fadeOut(‘normal’；}返回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();
    ...