FancyBox和自定义工具提示一起使用将不起作用

Question

我正在使用FancyBox和一个非常简单的jQuery工具提示，如果还没有点击图片，工具提示是用来在页面上显示“标题”的。如果单击图像，fancybox将接管标题以显示标题标签"inside“。单击图像后，标题不会显示，但工具提示是正常的。有没有可能让它们一起工作？

以下是工具提示的jQuery：

$(document).ready(function(){
    tooltip();
});

this.tooltip = function(){  
    $("a.tooltip").hover(function(e){                                             
        this.t = this.title;
        this.title = "";                                      
        $("body").append("<p id='tooltip'>"+ this.t +"</p>");
        $("#tooltip").fadeIn("fast");       
    },
    function(){
        this.title = this.t;        
        $("#tooltip").remove();
    }); 
    $("a.tooltip").mousemove(function(e){
        $("#tooltip")

    });         
};

下面是我的FancyBox代码：

<script type="text/javascript">
    $(document).ready(function() {
        $("a#example8").fancybox({
            'titlePosition': 'over'
        });
    });
</script>

这是HTML代码：

<a id="example8" class="tooltip" href="./example/8_b.jpg" title="Sed vel sapien vel sem tempus placerat eu ut tortor. Nulla facilisi. Sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat diam eu consectetur.">
    <img class="last" alt="example7" src="./example/8_s.jpg" />
</a>

Answer 1

在你的javascript上声明一个全局变量，例如

var thisTitle;

然后使用该变量在工具提示脚本(而不是this.t)中克隆title，如下所示

this.tooltip = function(){  
    $("a.tooltip").hover(function(e){                                             
        thisTitle = this.title;
        this.title = "";                                      
        $("body").append("<p id='tooltip'>"+ thisTitle +"</p>");
        $("#tooltip").fadeIn("fast");       
    },
    function(){
        this.title = thisTitle;        
        $("#tooltip").remove();
    }); 
    $("a.tooltip").mousemove(function(e){
        $("#tooltip")

    });         
}

在您的fancybox定制脚本中，使用titleFormat API选项从thisTitle变量中提取title，如下所示

$("a#example8").fancybox({
   "titlePosition": 'over',
   "titleFormat"  : function(){
      return '<span id="fancybox-title-over">'+thisTitle+'</span>'
    }
});

一起吗？

<script type="text/javascript">
var thisTitle;
$(document).ready(function(){
 tooltip();
 $("a#example8").fancybox({
   "titlePosition": "over",
   "titleFormat": function(){
      return '<span id="fancybox-title-over">'+thisTitle+'</span>'
    }
 }); // fancybox
}); // ready

this.tooltip = function(){  
    $("a.tooltip").hover(function(e){                                             
        thisTitle = this.title;
        this.title = "";                                      
        $("body").append("<p id='tooltip'>"+ thisTitle +"</p>");
        $("#tooltip").fadeIn("fast");       
    },
    function(){
        this.title = thisTitle;        
        $("#tooltip").remove();
    }); 
    $("a.tooltip").mousemove(function(e){
        $("#tooltip")
    });         
}
</script>