Question

我在二十二岁儿童主题制作的wordpress网站中使用花式盒子2。我想要它，这样当你将鼠标悬停在图像上时，它会说出人物名称，当你点击图像时，它会有几段描述。除了悬停部分外，我的一切都在工作，当你悬停时，它显示了整个大的描述。

Here is a link to the page.（密码是boogiebop）

这是JavaScript：

jQuery(document).ready(function() {
 jQuery(".fancybox").fancybox({
  beforeshow: function(){
  this.title = $(this.element).next('.newTitle').html();
  },
  helpers: {
    title : {
    type : 'inside'
   }
   }
 }); // fancybox
}); // ready

我尝试添加此内容：

<a class="fancybox" href="images/01.jpg" title="only show this on hover"><img src="images/01t.jpg"  /></a>
<div class="newTitle" style="display: none;"><p>hello, visite my site <a href="http://fancyapps.com/fancybox/">http://fancyapps.com/fancybox/</a></p></div>

但无济于事我得到的是标准标题。

Answer 1

您的描述在title属性中，并且它将显示孔内容。你可以添加另一个描述，如des="blablabla"，一旦你点击图像，屏幕上会显示一个modal box，其中包含des属性将被传递给模态框的整个内容。

示例：

$("#image").click(function(){

var des = $(this).attr("des");

$("#modalbox").html(des);
//done :D
})

注意：我使用了Jquery。

单独悬停到fancybox 2中的图像描述

1 个答案: