[lightbox]titleの属性を変更する方法




画像をクリックしたときに、拡大して表示するJqueryのプラグイン「lightbox」のtitle属性の文字を変更する方法です。
拡大前の画像にマウスを乗せたときにtitle属性の文字がポップアップで表示されてしまうというブラウザの仕様があり、titleの文字が長いと邪魔になります。これを表示されないようにします。

ますはlightboxの簡単な使い方から・・・

[ダウンロードと設置]
こちらのページ「lightbox2」からファイルをダウンロードします。
公開フォルダの「js」「css」にファイルをコピーします。

[ファイルの読み込み]

これで準備は完了です。

[使い方]

「rel」属性に「”lightbox”」を設定すると、画像がクリックされたときにlightboxが開きます。
そして、「title」属性に設定された文字が、拡大された画像の下に出ます。

[title]属性の文字の変更方法。

まず、HTMLのソース側を変更します。

「title」を「titleA」に変更してみます。

次に「lightbox.js」のファイルを変更します。
ソースを触るので「lightbox-2.6.min.js」のような、minが付いているファイルでなく、「lightbox.js」を使います。

ファイルを開いたら検索で「title」を探すと以下のような部分が出てきます。

ここの「$link.attr(‘title’)」の部分を変更します。

これだけで「title」属性を変更することができます。

画像にマウスを乗せても、ポップアップが出なくなって、すっきりしました。

人気記事一覧


関連記事一覧

This entry was posted in JQuery and tagged , , . Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">