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而不是使用的$符号。

点击图片在弹出窗口中显示图像和内容

1 个答案: