0

我正在同时使用 FancyBox 和一个非常简单的 jQuery 工具提示，如果尚未单击图像，则工具提示用于在页面上显示“标题”。如果单击图像，fancybox 将接管标题以在“内部”显示标题标签。单击图像后，标题不会显示，但工具提示是可以的。有没有可能让他们一起工作？

这是用于工具提示的 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>
4

1 回答 1

1

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

var thisTitle;

然后使用该变量title在您的工具提示脚本中克隆（而不是this.t），例如

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 自定义脚本中，使用titleFormatAPI 选项title从thisTitle变量中提取

$("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>
于 2012-07-27T01:20:38.620 回答