WordPress dynamic gallery

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:

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.