画像をクリックしたときに、拡大して表示するJqueryのプラグイン「lightbox」のtitle属性の文字を変更する方法です。
拡大前の画像にマウスを乗せたときにtitle属性の文字がポップアップで表示されてしまうというブラウザの仕様があり、titleの文字が長いと邪魔になります。これを表示されないようにします。
ますはlightboxの簡単な使い方から・・・
[ダウンロードと設置]
こちらのページ「lightbox2」からファイルをダウンロードします。
公開フォルダの「js」「css」にファイルをコピーします。
[ファイルの読み込み]
|
1 2 3 |
<script src="js/jquery-1.×.×.min.js" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> <link href="css/lightbox.css" type="text/css" rel="stylesheet" /> |
これで準備は完了です。
[使い方]
|
1 |
<a href="images/sample.jpg" rel="lightbox" title="サンプル画像の説明です。">サンプル画像</a> |
「rel」属性に「”lightbox”」を設定すると、画像がクリックされたときにlightboxが開きます。
そして、「title」属性に設定された文字が、拡大された画像の下に出ます。
[title]属性の文字の変更方法。
まず、HTMLのソース側を変更します。
|
1 |
<a href="images/sample.jpg" rel="lightbox" titleA="サンプル画像の説明です。">サンプル画像</a> |
「title」を「titleA」に変更してみます。
次に「lightbox.js」のファイルを変更します。
ソースを触るので「lightbox-2.6.min.js」のような、minが付いているファイルでなく、「lightbox.js」を使います。
ファイルを開いたら検索で「title」を探すと以下のような部分が出てきます。
|
1 2 3 4 5 6 |
function addToAlbum($link) { self.album.push({ link: $link.attr('href'), title: $link.attr('data-title') || $link.attr('title') }); } |
ここの「$link.attr(‘title’)」の部分を変更します。
|
1 |
title: $link.attr('data-title') || $link.attr('titleA') |
これだけで「title」属性を変更することができます。
画像にマウスを乗せても、ポップアップが出なくなって、すっきりしました。
人気記事一覧
- MySQL 最大の値・最新の日付データを１つ抽出する方法（MAX）
- [CakePHP] XformHelperの使い方
- Linux: スワップファイル（swp）の削除方法
- HTMLのForm methodとactionについて
- PHPでカンマ区切りデータを配列に入れる方法 （explode）
- [エラー対処] failed to open stream: No such file or directory
- [CSS]ブロック要素（div）の高さを、内部のfloat要素に合わせて自動調整する
- [vsftp] FileZillaから接続できない場合の対処法
- PHP5.1→PHP5.3へバージョンアップする方法（CentOS）
- PHPでテキストを１行ずつ読み込む方法（file_get_contents,explode)