Javascript in wordpress

Question

I have featured images shown for different posts of same category in a page in a specific div. I need to show the whole post related to this image in the same page in another div. I know i must use JavaScript in this. But i need some reference which i can use for this. Can anyone help me with this? I am using the following code to show the images

<?php
/*
Template Name: Meet The Team Template
*/
?>
<?php get_header(); ?>
<div id="meet_posts" class="narrowcolumn">
<?php 
    $recent = new WP_Query("cat=6&orderby=title&order=ASC"); 
    while($recent->have_posts()):$recent->the_post();
    $desc_values = get_post_custom_values("description");

?>
<div id="meetteam_featured_image">
    <a href="<?php the_permalink() ?>" rel="title">
        <?php
            if ( has_post_thumbnail() ) 
            { 
                the_post_thumbnail();
            }
        ?>
    </a>
</div>
<?php endwhile ?>
</div>

<?php get_footer(); ?>

Thanks in advance

Answer 1

Replace your above code with this following code :

<?php /*
Template Name: Meet The Team Template
*/
?>
<?php get_header(); ?>
<div id="meet_posts" class="narrowcolumn">
<?php 
$recent = new WP_Query("cat=6&orderby=title&order=ASC"); 
while($recent->have_posts()):$recent->the_post();
$desc_values = get_post_custom_values("description");

?>
<div id="meetteam_featured_image" class="<?php the_ID(); ?> team_featured_image_<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="title">
  <?php
    if ( has_post_thumbnail() )  { 
            the_post_thumbnail();
        }
    ?>
</a>
</div>
<?php endwhile ?>
<div id="image-post-info"></div>
</div>

<?php get_footer(); ?>

Add this following code in functions.php file :

add_action( 'wp_ajax_ajaxified_function', 'ajaxified_function' );
add_action( 'wp_ajax_nopriv_ajaxified_function', 'ajaxified_function' );
function ajaxified_function() {   
   $temp = get_post($_POST['post_id']);
   echo $temp->post_title.'<br/><br/>'.$temp->post_content;   
   die();
}   

Add this following code in your custom js file :

jQuery(document).ready(function (){       

 jQuery('#meetteam_featured_image a').on('click',function(event){         
 event.preventDefault();

 var post_id = jQuery(this).parent().attr('class');            
 post_id = post_id.split(" ");
 post_id = post_id[0];
 jQuery.ajax({  
   type: "POST",                  
   url:  'http://www.yoursitename.com/wp-admin/admin-ajax.php',  
   data: 'action=ajaxified_function&post_id='+post_id,    
   success: function (msg) {                                        
      jQuery('#image-post-info').html(msg);
   },
   error: function () {                  
      alert('Error');                    
   }  
  });           
  });       
});

Add custom js file by including following code in functions.php file :

function add_custom_scripts() {
wp_enqueue_script( 'custom-script',  get_stylesheet_directory_uri() .'/js/custom-scripts.js' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );