2013-02-15 60 views
0

我修改這個代碼顯示圖像的描述:WordPress的圖像原文鏈接

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(); ?> 
+0

你能張貼包含圖像的每個段落生成的最終html嗎? – Raad 2013-02-15 16:31:49

+0

我剛剛發佈了該文件。 – 2013-02-15 16:42:28

+0

這就是您的原始PHP + HTML - 我真的在尋找最終的HTML - 即在瀏覽器中看起來像什麼樣的HTML。 – Raad 2013-02-15 16:48:40

回答

0

非常快的思想 - 看看https://github.com/mikezahno/jPicDetail - 一個jQuery插件,在影像上疊加文本。 該頁面上還有一個jsFiddle演示鏈接。

+0

我是新的WordPress。感謝您的插件。但是我怎麼能夠顯示被點擊的圖像的描述? – 2013-02-15 15:51:28

+0

這個jQuery插件的一點是,你不必點擊 - 你只需鼠標懸停並顯示描述。 – Raad 2013-02-15 16:05:07

+0

感謝您的插件。但我仍然有同樣的問題。 – 2013-02-15 16:16:02

0

只有我能想到怎麼解決這個辦法是:添加您的圖片標題,然後你可以做 是這樣的:
Fiddle here

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

}); 

當然,你必須包括jQuery的到您的網頁看Wordpress codex如何做到這一點。