0

テーブルに含まれるサムネイルからの写真のスライドショーに Lightbox2 を使用しています。私のページは、スライドショーとキャプションに必要な機能を正確に実行しています。ただし、最初のページでサムネイルをクリックしてスライドショーを開始する前に、テーブルのサムネイル写真にマウスを合わせると、小さなボックス (ツールチップ ボックスのようなもの) が開き、テーブルの HTML コード、ライトボックス オプション、写真などが表示されます。 . この表示を抑制するにはどうすればよいですか?

ちなみに、Milkbox では同様のコードでは発生しません。

最後に、サムネールをクリックするとそのサムネールのフル サイズの画像が開くようにライトボックス コードを削除すると、この動作は発生しません。

イントラネットにページが存在するため、変更したサンプル コードを次に示します。

<table><tr>
<td id="mb1" align="center"><a id="mb1a" href="Photo1.jpg" data-lightbox="ga1" 
title="<table style='width:100%'><tr><td  style='width: 50%; border: 1px solid  #FFFFFF'<center>IGN Map</center></td><td style='width: 20'></td><td style='width:     50%; border: 1px solid #FFFFFF'><center>Carte IGN</center></span></td></tr>
<tr><td style='width: 50%; border: 1px solid #FFFFFF'>Right Click and choose 'Save Picture as...' to download this photo</td><td style='width: 20'></td>
<td style='width: 50%; border: 1px solid #FFFFFF'>Cliquer droit et choisir 'enregistrer l'image sous...' pour telecharger cette photo</td></tr></table>">
<img border="0" src="/thumbnail/Photo1.jpg" height="135" width="227" align="middle"/></a><br/>Map</td>

<td id="mb1" align="center"><a id="mb1a" href="Photo2.jpg" data-lightbox="ga1" 
title="<table style='width:100%'><tr><td  style='width: 50%; border: 1px solid #FFFFFF'><center>Google Earth</center></td><td style='width: 20'></td>
<td style='width: 50%; border: 1px solid #FFFFFF'><center>Google Earth</center></td></tr>
<tr><td style='width: 50%; border: 1px solid #FFFFFF'>Right Click and choose 'Save Picture as...' to download this photo</td><td style='width: 20'></td>
<td style='width: 50%; border: 1px solid #FFFFFF'>Cliquer droit et choisir 'enregistrer l'image sous...' pour telecharger cette photo</td></tr></table>">
<img border="0" src="/thumbnail/Photo2.jpg" height="96" width="227" align="middle"/></a><br/>Map2</td>

<td id="mb1" align="center"><a id="mb1a" href="Photo3.jpg" data-lightbox="ga1" 
title="<table style='width:100%'><tr><td  style='width: 50%; border: 1px solid #FFFFFF'><center>Profile</center></td><td style='width: 20'></td>
<td style='width: 50%; border: 1px solid #FFFFFF'><center>Profil</center></td></tr>
<tr><td style='width: 50%; border: 1px solid #FFFFFF'>Right Click and choose 'Save Picture as...' to download this photo</td><td style='width: 20'></td>
<td style='width: 50%; border: 1px solid #FFFFFF'>Cliquer droit et choisir 'enregistrer l'image sous...' pour telecharger cette photo</td></tr></table>">
<img border="0" src="/thumbnail/Photo3.jpg" height="164" width="227" align="middle"/></a><br/>Profile</td>
</tr></table>

javascript および CCS ファイルは、Web からダウンロードしたとおりです。

4

1 に答える 1

1

問題が解決しました。私の問題は、このリンクの問題と非常によく似ていましたjavascript/jqueryでマウスをホバーすると、リンクからタイトル属性を非表示にします

その答えを少し変更すると、問題が解決しました

<script src="jquery.js"></script>
<script>
$(function(){

$('a').hover(function(e){

    $(this).attr('data-title', $(this).attr('title'));
    $(this).removeAttr('title');

},

function(e){

    $(this).attr('title', $(this).attr('data-title'));

});
$('a').click(function(e){
    $(this).attr('title',$(this).attr('data-title'));});

});

于 2013-11-09T18:20:28.163 に答える