Wordpress изображение Описание ссылка

Question

Я изменил этот код, который отображает описание изображения:

function the_post_thumbnail_caption() { 
    global $post; 
    $thumbnail_id = get_post_thumbnail_id($post->ID); 
    $thumbnail_image = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment')); 

    if ($thumbnail_image && isset($thumbnail_image[0])) { 
    echo '<p>'.$thumbnail_image[0]->post_content.'</p>'; 
    } 
} 

Что мне нужно о том, как отобразить описание изображения на всплывающем окне, как только она была нажата. Что мне не хватает? Любая помощь приветствуется! Благодаря!

файл выглядит следующим образом:

<?php get_header(); ?> 
    <div id="primary"> 
    <!-- <div id="content" role="main"> --> 
     <!--</div><!-- #content --> 
     <?php if($_SERVER['REQUEST_URI'] == '/wordpress/?page_id=5'): ?> 
      <!--<div style="float:right">--> 
      <div style="width:640px; float:left;min-height:290px;word-wrap: break-word"> 
       <?php 
        $myposts = get_posts(''); 
        foreach($myposts as $post) : 
         setup_postdata($post); 
       ?> 
       <div class="post-item"> 
        <div class="post-info"> 
         <h2 class="post-title"> 
          <!--<a href="<?php //the_permalink() ?>" title="<?php //the_title_attribute(); ?>"><?php //the_title(); ?></a>--> 
          <b><?php the_title(); ?></b> 
         </h2> 
         <!--<p class="post-meta">Posted by <?php the_author(); ?></p>--> 
        </div> 
       <div class="post-content"> 
        <?php the_content(); ?> 
        <div style="margin:25px 0px;border:1px dotted #ccc; width: 640px;"></div> 
       </div> 
       </div> 
       <?php //comments_template(); ?> 
       <?php endforeach; wp_reset_postdata(); ?> 
      </div> 
      <div style="float:left; width:319px; min-height:200px; border-left:1px solid #ccc"> 
       <div style="float:left; margin-left:5px"> 
        <h2 style="font-family:Mybold; font-size:14pt">Categories</h2> 
        <?php 
        the_post_thumbnail_caption(); 
        $categories = get_categories(); 
        foreach ($categories as $cat) { 
         $category_link = get_category_link($cat->cat_ID); 
         ?><p><a href="<?php echo esc_url($category_link); ?>" title="Category Name"><?php if($cat->parent < 1) echo $cat->cat_name; //echo $cat->category_nicename; ?></a></p><?php ; 
        } 
        ?> 
       </div> 
      </div> 
     <?php endif;?> 
    </div><!-- #primary --> 

<?php get_footer(); ?> 

Answer 1

Очень быстро мысль - посмотрите на https://github.com/mikezahno/jPicDetail - плагин JQuery для наложения текста на изображениях. На этой странице есть демонстрационная ссылка jsFiddle.

Answer 2

Только так я могу думать, как решить это: Добавьте ваш образ титульный, а затем вы можете сделать что-то вроде этого:
Fiddle here

$('img').click(function(){ 
var getTitle = $(this).attr('title'); 
alert(getTitle); 

}); 

Конечно, вы должны включить JQuery в вашу страницу см Wordpress codex как сделать.