6

Slimbox 2を使用していることを除けば、私の問題はこの解決済みのスレッドによく似ています。

マウスのロールオーバーまたはホバーで画像タイトルツールチップポップアップを非表示にする

画像にカーソルを合わせると、「タイトル」属性がポップアップ表示されます。Slimboxの画像タイトルにHTMLが必要です。したがって、もちろん、ホバーしているときは、「タイトル」属性にすべてのHTMLコードが表示されます。Slimboxで画像を表示しているときはコードが完全に機能するため、問題はありません。このHTMLコードを表示しないように、Title属性を非表示/変更する必要があります。

Slimbox.jsのQ.titleを別のもの（captionnameなど）に変更しようとしました。次に、以下を呼び出すようにHTMLを変更しました。

<a href="images/team/large.jpg" title="Joe Smith" captionname="URL" rel="lightbox-team"><img src="images/team/small.jpg" class ="headline" border="1" hspace="2" /></a>

「JoeSmith」がタイトルとして表示されますが、Slimboxで画像を表示すると、captionnameがまったく表示されず、タイトルも表示されません。あるべき場所は空白です。

これを機能させるには、slimbox2.jsで何を変更する必要がありますか？

4

4 に答える 4

6

実際には、スリムボックスの linkMapper オプション (オプションのパラメーターとして渡すことができる関数) を使用して、ボックスのキャプションにハイパーリンクのタイトル属性を使用するスリムボックスのデフォルトの動作をオーバーライドする必要があります。

このようにして、「alt」などの標準属性を使用するか、「slimboxcaption」などのカスタム属性を使用して、ブラウザーがコンテンツを表示しないようにすることができます。一致する属性を定義するには、関数に渡される「el」ノードの getAttribute を使用します

Slimbox .js ファイルのデフォルトの "jQuery(function($)" 呼び出しをこれに置き換えます

jQuery(function($) {
$("a[rel^='lightbox']").slimbox({ /* Put custom options here */ }, function(el) {
        return [el.href, el.getAttribute("slimboxcaption")];
}, function(el) {
  return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
 });
});

次に、これを使用して、リンクの上にカーソルを置いているユーザーに対して非表示にしながら、HTML コンテンツをボックスに渡すことができます。

<a href="/myimage.jpg" title="This is my image" slimboxcaption='<h2>Here you can enter html code for your box caption</h2>...' rel="lightbox"><img src="/myimage_small.jpg"/></a>
于 2009-09-20T15:07:57.333 に答える
1

I would leave the title property alone for accessibility purposes, and modify slimbox.js to read the title attribute immediately on page load, store it in a custom property (called "caption" or something), and them programmatically remove the title attribute to prevent the tooltip. Of course this implies that the rest of the code that references the title property needs to be changed to use the custom property.

于 2009-07-27T02:31:16.293 に答える
0

linkMapperパラメーターを使用して、表示されるキャプションをカスタマイズできます。

圧縮されたslimbox2.jsを使用している場合は、そこに自動ロードコードが含まれているため、JoshStodolaが説明したとおりにコードを変更できます。

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
jQuery(function($) {
    $("a[rel^='lightbox']").each(function(){
        //Set caption and remove title attributes
        this.caption = this.title;
    }).slimbox({/* Put custom options here */}, function(el){
            //Custom linkMapper to grab the description from the caption attribute
            return return [el.href, el.caption];
        }), function(el) {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    });
});
于 2009-09-04T07:42:03.910 に答える
0

Slimbox2 の縮小版の Q 関数を次のように変更しました。

function (Q) { return [Q.href, Q.title] };

これに：

 function (Q) { return [Q.href, $(Q).attr("data-captionname") || Q.title] };

このようにして、リンク要素の通常のタイトルが保持され、モーダル ウィンドウ (または必要に応じてライトボックス) に表示されているリンクの "data-captionname" と呼ばれる属性の場合。

于 2014-07-10T12:05:10.193 に答える