つい最近このページで「Thumbnail Viewer」を設置して感動していたのですが・・・・浮気しようと思いますσ(^◇^;)ヒヤアセ さらにステキなものを見つけてしまいました！！ それは、「jQuery lightBox plugin」・・・本当は、WPプラグインの「lightview」に浮気したのですが、ヘッダー部分の書き込みがうまくされないようで、どうがんばっても使えませんでした・・・(T^T) そこで、他にないものかと探した所「jQuery lightBox plugin」を見つけこれは超ステキ～(゜゜)(。。)(゜゜)(。。)ウンウン ・・・と思い、早速設置！！
まずはここからダウンロード。（左にあるZIPとかかれた画像をクリック）
そして解凍後、jsフォルダ、cssフォルダ、imagesフォルダ、photosフォルダ、index.html、を 適当なフォルダ（ここではjquery-lightboxとします）に全て入れてFTPで任意の場所（ここではwp-admin等と同じ最上層にします）にアップロード。
jquery.lightbox-0.4.jsの設定
/jQuery-lightBox/js/jquery.lightbox-0.4.js を開き、28〜32行目を編集します。
先ほどFTP転送したimagesフォルダの各画像ファイルのある場所を設定します。黄色の部分を自分の設定にあわせ書き込んでください。
jquery.lightbox-0.4.jsと関連ファイルの外部リンク設定
次にJavaScriptとスタイルシートを、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。
自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
先ほどFTP転送した各フォルダの各ファイルのある場所を設定します。黄色の部分を自分の設定にあわせ書き込んでください。
lightBox効果を与える指定方法
全てのjpg画像に効果を与える場合
/jQuery-lightBox/js/jquery.lightbox-0.4.js の、最後尾の列に以下のコードを継ぎ足す。
これで、全ての a href タグの全てのjpgファイルが効果を受けます。
こちらの設定方法の場合はこれで完了です。
個別でjpg画像に効果を与えたい場合
/jQuery-lightBox/js/jquery.lightbox-0.4.js の、最後尾の列に以下のコードを継ぎ足す。
これで、lightBox のクラス指定で a タグのファイルが効果を受けます。
ID指定にしたい場合は、赤文字の .lightBox を #lightBox に変更すれば良い。
使用方法
サムネイル画像「test_thumbnail.jpg」をクリックした後、「test.jpg」をlightBoxを使って表示する場合
これで、完了です。
さくら
かえで
どうですか？ ステキな表示方法でしょ？？ (⌒^⌒)ｂ うん
さて、後は細かな設定が出来るらしいのでいじろうと思ったのですが・・・・説明ページが見つからず断念・・・・まぁ～そのうちに・・・
しかし変わりに違うものが見つかった・・・・（￣□￣；）！！
がんばってこれを設置したところで、WPプラグインの wp-lightpop なるものを発見！！
lightview は自分の場合、がんばっても設置できませんでしたが、試してみた所 （￣□￣；）！！
あっさり稼動しました・・・しかも、同じような表示形式・・・・σ(^◇^;)ヒヤアセ しかも設定が楽・・・・(;￣ー￣川 アセアセ
しかし、設定をいじっているうちに問題点が・・・・このプラグインを使うと更新が非常に重くなる・・・jQuery lightBox は全然感じなかったですが・・・
それと、これはまた自分だけだと思うのですが、なぜか背景色が変えられない・・・どんなにいじっても白にしかならない・・・なんで？
結局、重いのは困るので jQuery lightBox に戻しました。（＾∀＾） ・・・しかし、簡単なのがいい人にはおすすめ！！ 表示の仕方は jQuery lightBox と似ていてかっちょいいです。最初のぐにぃ～んって感じは弱いですが、消える時は wp-lightpop の方がステキかな？外枠もいっぱい選べるし そうそう、自分は関係ないけどこのプラグインは画像だけでなく YouTube などの動画サイト、各種動画ファイル、HTMLファイルにも対応してるみたいです！！(゜゜)(。。)(゜゜)(。。)ウンウン
設定方法
まずはここからダウンロード。（左にあるZIPとかかれた画像をクリック）
そして解凍後、jsフォルダ、cssフォルダ、imagesフォルダ、photosフォルダ、index.html、を 適当なフォルダ（ここではjquery-lightboxとします）に全て入れてFTPで任意の場所（ここではwp-admin等と同じ最上層にします）にアップロード。
jquery.lightbox-0.4.jsの設定
/jQuery-lightBox/js/jquery.lightbox-0.4.js を開き、28〜32行目を編集します。
| imageLoading: 'http://example.com/jquery-lightbox/images/lightbox-ico-loading.gif', imageBtnPrev: 'http://example.com/jquery-lightbox/images/lightbox-btn-prev.gif', imageBtnNext: 'http://example.com/jquery-lightbox/images/lightbox-btn-next.gif', imageBtnClose: 'http://example.com/jquery-lightbox/images/lightbox-btn-close.gif', imageBlank: 'http://example.com/jquery-lightbox/images/lightbox-blank.gif', |
jquery.lightbox-0.4.jsと関連ファイルの外部リンク設定
次にJavaScriptとスタイルシートを、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。
自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
| <script type="text/javascript" src="http://example.com/jquery-lightbox/js/jquery.js"></script> <script type="text/javascript" src="http://example.com/jquery-lightbox/js/jquery.lightbox-0.4.js"></script> <link rel="stylesheet" type="text/css" href="http://example.com/jquery-lightbox/css/jquery.lightbox-0.4.css" media="screen" /> |
lightBox効果を与える指定方法
全てのjpg画像に効果を与える場合
/jQuery-lightBox/js/jquery.lightbox-0.4.js の、最後尾の列に以下のコードを継ぎ足す。
| $(function() { $('a[href*="jpg"]').lightBox(); }); |
こちらの設定方法の場合はこれで完了です。
個別でjpg画像に効果を与えたい場合
/jQuery-lightBox/js/jquery.lightbox-0.4.js の、最後尾の列に以下のコードを継ぎ足す。
| $(function() { $('.lightBox a').lightBox(); }); |
ID指定にしたい場合は、赤文字の .lightBox を #lightBox に変更すれば良い。
使用方法
サムネイル画像「test_thumbnail.jpg」をクリックした後、「test.jpg」をlightBoxを使って表示する場合| <div class="lightBox"><a href="test.jpg"><img src="test_thumbnail.jpg" alt="test" /></a> </div> |
サンプル
画像ををクリックしてみてください。
さくら
かえで
どうですか？ ステキな表示方法でしょ？？ (⌒^⌒)ｂ うん
さて、後は細かな設定が出来るらしいのでいじろうと思ったのですが・・・・説明ページが見つからず断念・・・・まぁ～そのうちに・・・
しかし変わりに違うものが見つかった・・・・（￣□￣；）！！
がんばってこれを設置したところで、WPプラグインの wp-lightpop なるものを発見！！
lightview は自分の場合、がんばっても設置できませんでしたが、試してみた所 （￣□￣；）！！
あっさり稼動しました・・・しかも、同じような表示形式・・・・σ(^◇^;)ヒヤアセ しかも設定が楽・・・・(;￣ー￣川 アセアセ
しかし、設定をいじっているうちに問題点が・・・・このプラグインを使うと更新が非常に重くなる・・・jQuery lightBox は全然感じなかったですが・・・
それと、これはまた自分だけだと思うのですが、なぜか背景色が変えられない・・・どんなにいじっても白にしかならない・・・なんで？
結局、重いのは困るので jQuery lightBox に戻しました。（＾∀＾） ・・・しかし、簡単なのがいい人にはおすすめ！！ 表示の仕方は jQuery lightBox と似ていてかっちょいいです。最初のぐにぃ～んって感じは弱いですが、消える時は wp-lightpop の方がステキかな？外枠もいっぱい選べるし そうそう、自分は関係ないけどこのプラグインは画像だけでなく YouTube などの動画サイト、各種動画ファイル、HTMLファイルにも対応してるみたいです！！(゜゜)(。。)(゜゜)(。。)ウンウン
人気度 : 32 %
(1 投票, 平均値/最大値: 5 / 5)
最上階
1階
関係のある記事
No user の書き込みがあります
コメントほしぃ～よぉ～ σ(^◇^;)