title: Dynamically load post with ajax in wordpress
body: <p>Hi I've gone through a lot of tutorials also questions on here but the subjects seems really unclear.</p>
  
  <p>This is the best tutorial I could find <a href="http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress" rel="nofollow">5-tips-for-using-ajax</a></p>
  
  <p>I have my custom post thumbnails being displayed in a grid on my index page. 
  I’m trying to create a click event to load the linked post via ajax into a div on the same page instead of being taken to the post. I’ve seen this method being used on lots of websites but just cant find the correct tutorial/method to do it.</p>
  
  <p>here are some examples:
  <a href="http://themetrust.com/demos/reveal/" rel="nofollow">Reveal</a>,<a href="http://themewich.com/aware/" rel="nofollow">aware</a>, <a href="http://demo.themezilla.com/garnish/" rel="nofollow">garnish</a>, <a href="http://onioneyethemes.com/yin-and-yang/" rel="nofollow">ying+yang</a></p>
  
  <p>Hope someone can clarify this as 2 weeks down the line I'm no clearer on the subject :(</p>
  
  <p>Script I'm using so far:</p>
  
  <pre><code>&lt;ul id="og-grid" class="og-grid"&gt;
              &lt;?php query_posts( array( 'post_type' =&gt; array('portfolio') ));?&gt;&lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;
              &lt;li&gt;&lt;a class="ajax-click" href="#" &gt;&lt;?php the_post_thumbnail('thumbnail', array('class' =&gt; 'thumb', 'alt' =&gt; ''.get_the_title().'', 'title' =&gt; ''.get_the_title().'')); ?&gt;&lt;/a&gt;&lt;/li&gt;&lt;?php endwhile; ?&gt;&lt;?php endif; ?&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>index.php</p>
  
  <p>.</p>
  
  <pre><code>wp_register_script( 'loadajax', get_stylesheet_directory_uri() . '/library/js/loadajax.js', array( 'grid-js' ), false , true );
  wp_localize_script( 'loadgrid', 'MyAjax', array( 'ajaxurl' =&gt; admin_url( 'admin-ajax.php' ) ) );
  </code></pre>
  
  <p>Register my script and admin-ajax</p>
  
  <pre><code>add_action ( 'wp_ajax_nopriv_cmdv_load', 'cmdv_load_ajax' );
  add_action('wp_ajax_cmdv_load_ajax', 'cmdv_load_ajax' );
  
  function cmdv_load_ajax () {
  
  $the_slug = $_POST['slug'];
  $args=array(
    'name' =&gt; $the_slug,
    'post_type' =&gt; 'projects',
    'post_status' =&gt; 'publish',
    'showposts' =&gt; 1,
  );
  $my_posts = get_posts($args);
  if( $my_posts ) :
  
      global $post;
      $post = $my_posts[0];       
  
      // generate the response
      $response = json_encode( "Success" );
  
      // response output
      header( "Content-Type: application/json" );     
      ?&gt;
  
      &lt;div id="ajax-project-&lt;?php the_ID(); ?&gt;" &lt;?php post_class('project main ajax clearfix'); ?&gt; &gt;
  
          &lt;div class="projectHeader"&gt;
              &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt;
  
              &lt;div class="projectNav clearfix"&gt;                   
                  &lt;?php
  
                  $prev_post = get_previous_post();
                  if($prev_post) $prev_slug = $prev_post-&gt;post_name;
                  $next_post = get_next_post();
                  if($next_post) $next_slug = $next_post-&gt;post_name;
                  ?&gt;                  
                  &lt;div class="next &lt;?php if(!$next_slug) echo 'inactive';?&gt;"&gt; 
                      &lt;?php if(isset($next_slug)) : ?&gt;
                          &lt;a href="#&lt;?php echo $next_slug;?&gt;" onClick="nextPrevProject('&lt;?php echo $next_slug;?&gt;');"&gt;Next&lt;/a&gt;
                      &lt;?php endif; ?&gt;
                  &lt;/div&gt;
                  &lt;div class="previous &lt;?php if(!$prev_slug) echo 'inactive';?&gt;"&gt; 
                      &lt;?php if(isset($prev_slug)) : ?&gt;
                          &lt;a href="#&lt;?php echo $prev_slug;?&gt;" onClick="nextPrevProject('&lt;?php echo $prev_slug;?&gt;');"&gt;Previous&lt;/a&gt;
                      &lt;?php endif; ?&gt;
                  &lt;/div&gt;  
                  &lt;div class="closeBtn"&gt;  
                      &lt;a href="#index"&gt;Close Project&lt;/a&gt;
                  &lt;/div&gt;              
              &lt;/div&gt; 
          &lt;/div&gt;
      &lt;div class="entry"&gt;
          &lt;?php the_content(); ?&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;?php endif; ?&gt;
  &lt;?php die();?&gt;
  &lt;?php } ?&gt;
  </code></pre>
  
  <p>function.php</p>
  
  <p>The jquery is where I'm really struggling so this is where I need direction! I'm using <a href="http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/" rel="nofollow">thumbnail grid with expanding preview</a> to align the thumbnails but adding the click function and response I just cant work out :(</p>
  
  <p>Thanks</p>