title: Wordpress dynamic gallery
body: <p>I'm building a single page website in Wordpress, as I stated in <a href="https://stackoverflow.com/questions/20940141/bring-a-wordpress-post-dynamically">my previous question</a> (I'm stepping on new grounds in this one). <a href="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jQuery/" rel="nofollow noreferrer">The tutorial</a> 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.</p>
  
  <p>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).</p>
  
  <p>Here's what's happening now:
  <img src="https://i.stack.imgur.com/1SsUe.png" alt="x marks the spot"></p>
  
  <p>And here's the code I have 'til now:</p>
  
  <ul>
  <li><p>index.php (the gallery section)</p>
  
  have_posts()) : $recent->the_post();?>
      
  
  <pre><code>        &lt;div class="controle"&gt;
              &lt;h1&gt;A Galeria&lt;/h1&gt;
              &lt;nav id="galerias"&gt;
              &lt;?php $args = array('post_type'=&gt;'galeria');
  
              $myposts = get_posts( $args );
              foreach ( $myposts as $post ) : setup_postdata( $post ); ?&gt;
                  &lt;li&gt;
                      &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;
                  &lt;/li&gt;
              &lt;?php endforeach; 
              wp_reset_postdata();?&gt;
              &lt;/nav&gt;
  
              &lt;div id="thumbnails"&gt;
  
              &lt;/div&gt;
  
  
          &lt;/div&gt;
  
              &lt;div id="conteudo-galeria"&gt;
                  &lt;div id="texto-galeria"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  </li>
  <li><p>thumbnails.php (bringing up the thumbnails. Working.)</p>
  
  <pre><code>$(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('&lt;span id="carregando"&gt;Carregando...&lt;/span&gt;');
          $('#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;
      });
  
  });
  </code></pre>
  
  <p>galeria.php (addapted thumbnails to bring the image. Not working)</p>
  
  <p>$(document).ready(function() {</p>
  
  <pre><code>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('&lt;span id="carregando"&gt;Carregando...&lt;/span&gt;');
      $('#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;
  });
  </code></pre>
  
  <p>});</p></li>
  </ul>
  
  <p>iamge.php (the image page from the gallery)</p>
  
  <pre><code>&lt;?php get_header(); ?&gt;
  
      &lt;!-- Main --&gt;
      &lt;div class="main"&gt;
  
      &lt;div id="conteudo-galeria"&gt;
      &lt;div id="texto-galeria"&gt;
  
      &lt;?php if (have_posts()): while (have_posts()) : the_post(); ?&gt;
  
          &lt;!-- imagem --&gt;
  
              &lt;?php if ( wp_attachment_is_image( $post-&gt;id ) ) : $att_image = wp_get_attachment_image_src( $post-&gt;id, "full"); ?&gt;
                  &lt;img src="&lt;?php echo $att_image[0];?&gt;" width="&lt;?php echo $att_image[1];?&gt;" height="&lt;?php echo $att_image[2];?&gt;" alt="&lt;?php $post-&gt;post_excerpt; ?&gt;" /&gt;
              &lt;?php else : ?&gt;
                  &lt;a href="&lt;?php echo wp_get_attachment_url($post-&gt;ID) ?&gt;" title="&lt;?php echo wp_specialchars( get_the_title($post-&gt;ID), 1 ) ?&gt;"&gt;&lt;?php echo basename($post-&gt;guid) ?&gt;&lt;/a&gt;
              &lt;?php endif; ?&gt;
  
          &lt;!-- /imagem --&gt;
  
      &lt;?php endwhile; ?&gt;
  
      &lt;?php else: ?&gt;
  
      &lt;?php endif; ?&gt;
  
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;!-- /Main --&gt;
  
  
  &lt;?php get_footer(); ?&gt;
  </code></pre>
  
  <p>Wow, this was long. thank you if you had the patience to follow 'til here.</p>
  
  <p>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.</p>