0

私は 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>
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")

    });         
}

ファンシーボックスのカスタム スクリプトで、API オプションを使用して変数から次のようtitleFormatにプルします。titlethisTitle

$("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 に答える