单击弹出窗口中的图像显示图像和内容

Question

我有一个wordpress网站，我在一个页面上显示图片。当您单击图像时，我希望弹出窗口显示图像和与图像相关的内容。每个图片和内容都是一个帖子。我正在尝试使用以下代码：

$post_id = get_the_ID(); 
$post = get_post($post_id, ARRAY_A);
$title = $post['post_title'];

来获取内容的标题。然后，我需要使用jquery，这样当您单击图像时，标题(以及内容)就会显示出来。我应该把jquery代码放在哪个文件中？如何链接图像以便onclick()显示弹出窗口？

Answer 1

将此代码添加到模板的底部。

 <script type="text/javascript">

 jQuery(document).ready(function(){ // wait until all document html loaded 

    jQuery('.unhide').click(function(){ // attach a function to elements with the class "unhide"
       jQuery(this).closest('.holder').find('.hidden').show(); // Look for the closest parent of this item with the class "holder" and find the hidden div, show it
       jQuery(this).closest('.holder').find('.hidden').delay( 800 ).hide(1000); // find the same element and close after delay, take 1000 ms to close. 
    });

 });
 </script>

jsfiddle：http://jsfiddle.net/5hrcsguu/1/

一个简单的示例，该示例假设父项包含隐藏内容和要用作click事件的按钮。http://api.jquery.com/为每个函数都提供了示例。除此之外，您需要知道的就是对js使用脚本标记，并使用jQuery而不是使用$符号。