Wordpress dynamic gallery

Question

I'm building a single page website in Wordpress, as I stated in my previous question (I'm stepping on new grounds in this one). The tutorial that I followed worked and it's pulling content from the database neatly. But a new challenge unfolded itself when I needed to make a set of dynamic galleries in a page.

So here what needs to happen: There is a list of post-titles with galleries inside each one. When I click one of the links the post with the thumbnails appears right below it. I managed to do just that just fine, but when a thumbnail is clicked, the bigger version should appear at the right side. I applied the same code but it just doesn't work! It just goes to the image page (image.php).

Here's what's happening now: x marks the spot

And here's the code I have 'til now:

index.php (the gallery section)

have_posts()) : $recent->the_post();?>

        <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 (bringing up the thumbnails. Working.)

$(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 (addapted thumbnails to bring the image. Not working)

$(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 (the image page from the gallery)

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

Wow, this was long. thank you if you had the patience to follow 'til here.

PS: The js should also make history work, but it isn't. It's not a priority right now but if you guys know anyway to fix it it'll be much appreciated.

Digger Digger · Accepted Answer · 2014-01-16T14:17:42

I've found the problem!

Since the content that is being watched for event is only loaded after the first ajax kicks in, the second ajax doesn't know where to look for it. The thing is there are new ways to watch for events in jQuery that completely solves this problem. the on('click'... handler watches for any element that is inside the parent specified. So the second js file (galeria.js) should look like this:

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

});

The parent, however needs to be in the page when it loads (can't be dynamic too) so I had to change #itens to #thumbnails.

Wordpress dynamic gallery

2 Answers