Dynamic Gallery

Question

I'm building a single page website and that means that all the links need to call for post content dynamically. I found this tutorial and with the help from some folks from StackOverflow I managed to create pages that do just that.

But a new challenge unfolded itself when I needed to make 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 should show right below it. I managed to do just that just fine, but when a thumbnail is clicked, the bigger version should appear right at the side. I applied the same code but it just doesn't work!

Here's the code I have 'til now:

• index.php (the gallery section)

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

  <div class="main" id="galeria">
  
          <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. Currently, if I click in the thumbnail, I'm directed to the image.php.

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.

Answer 1

You can use Advanced Custom Fields plugin - paid, to to that:

http://www.advancedcustomfields.com/add-ons/gallery-field/

Plase what a video.

Also on lightbox you need this Jquery plugin:

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Create a custom post type with name gallery.

Then create a page-gallery.php and put this code: :

<?php
     $args=array(
           'post_type' => 'gallery',
           'post_status' => 'publish',

           'posts_per_page' => 12,
           'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1 )
                  );
      query_posts( $args ); ?>
<?php if (have_posts()) : while (have_posts()) : the_post();?>

<div class="gallery_item">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(145,96)); ?></a>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<?php endwhile; endif; ?>

Then create single-gallery.php and put code like this, some modification meybee needed.

<?php
                $images = get_field('bildes');
                if( $images ): ?>

                            <?php foreach( $images as $image ): ?>
                                <div class="gal_thumb">
                                <a href="<?php echo $image['sizes']['large']; ?>" rel="prettyPhoto[gallery<?php echo $post_id;?>]"><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['title']; ?>"/></a>                                    </div>
                            <?php endforeach; ?>
                    <?php
                    ?>
                <?php endif; ?>

Answer 2

I (partially) solved 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.

I said partially solved because although the ajax is now working, the image is not being displayed on the div. I've posted a new question here if you can help me out.

Thank you!