• ユーザー登録
  • |
  • ログイン


頭脳外部メモリー 「独学で趣味を満喫」 SINCE 2008/3

Linux 自宅サーバー PICマイコン PICC-LITE Windows 車 関係の色々な趣味の記録を脳内では覚えられないので此処に保存!! ・・・って言うか、すでに忘れてしまって書けないかも・・・特に作った時に起きた問題点を書いておきたいのだが・・・ σ(^◇^;)ヒヤアセ

  • Home
  • plugin & js
  • sample
  • site map
  • Home » Archive by category 'Wordpress » プラグイン » jQuery'

2008

5/9

画像表示系のスクリプトの各種サンプル

Last modified: 2008年5月9日 (金)  am 12時38分
Posted by jun  Published in java script, jQuery

▼


画像表示系のスクリプトが非常に増えてきたので、画像系スクリプトのサンプルをまとめた、こんなページを作って見ました。 (^∀^)

どれを設置しようか迷っている人の参考になればと・・・・ ペコリ(o_ _)o))

人気度 : 24 %

no comment

▲


Previous Top

2008

4/19

「jQuery Lightbox Plugin」 (balupton edition) 設置説明

Last modified: 2008年5月9日 (金)  pm 5時40分
Posted by jun  Published in jQuery

▼


しばらく前に、こちらページで「 jQuery Lightbox Plugin 」を設置しましたが・・・なんと、もう1種類 (balupton edition) なるものが存在すると知り早速試してみることに・・・・

続きを読む ≫
追記・・・※「IE」では表示できないようです・・・自分の環境だけでしょうか? ?(゜_。)?


設定方法

こちらからダウンロード

解凍後、ご自分のスクリプト置き場に転送してください。(ここでは /wp-content/js/jquery_lightbox_balupton-edition/ に置いたものとして説明します。)

スクリプトとスタイルシートを、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script src="http://example.com/wp-content/js/jquery_lightbox_balupton-edition/js/jquery.lightbox.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="http://blog.le-coeur.net/wp-content/js/jquery_lightbox_balupton-edition/css/jquery.lightbox.css" media="screen" />
黄色の部分にファイルの設置場所(アドレス)を指定


使用例

<a rel="lightbox" href="画像ファイルのアドレス.jpg"><img src="サムネイル画像のアドレス.jpg" /></a>
  赤文字がポイントです。

以上で終了です・・・簡単ですね~(^∀^)


・・・・しかし、ここで自分の場合は問題発生!! 残念なことに、ノーマルの「 jQuery Lightbox Plugin 」が動作しなくなってしまいました (TOT) (ず~~っと読み込み中になってしまう) 同時には使用できないみたいです・・・別ページ単品なら使いようもありますが・・・・
・・・そして非常に気になることがひとつ!! このページで設定した「jQuery」の特別な設定(「 $( 」を「 j$( 」に変更)・・・すっかり忘れていて、そのまま変更せずに実行したのですが・・・何故か動作してしまいました・・・なんで??・・・不思議です・・・しかも、「prototype.js」系のスクリプトも問題なく使用できました・・・最初から対応策が施してあるのでしょうか?

・・・どちらも素敵で選べないなぁ~ ・・・・( ̄(エ) ̄)ゞ クマッタナー

 

サンプル

上記の理由で、ここでは表示できないのでこちらに置いておきます。
どちらが素敵ですか?

こちらが、ノーマルの「 jQuery Lightbox Plugin 」
kaede_syou.jpg


 
「20点」 まったく役に立たなかったよ 。。。・゚゚・(>Д<;)・゚゚・。。。。「40点」 ちょっとだけ役に立ったかな (T^T)「60点」 まぁ~まぁ~の記事だね v(^∀^)v「80点」 良い記事だけど、あとちょっと・・・ (ノ´▽`)ノオオオッ♪「100点」 探していたのはこの記事だ!! (*゚ o゚*) マジっすか!? ( 参考になったら、評価してねぇ~ (o*。_。)oペコッ
 
≪ 続きを隠す

人気度 : 18 %

no comment

▲


Previous Top

2008

4/13

prototype.js と jQuery の競合(コンフリクト)解決! & 共存方法

Last modified: 2008年4月20日 (日)  pm 11時29分
Posted by jun  Published in java script, jQuery, 解決済&解決法

▼


やったよ!! ついに見つけたよ~~!! 何個かのページに書きましたが、前々から、 「prototype.js」系のスクリプトを入れると「jQuery」シリーズが動作不能に陥る解決方法が判りましたよ!! (*゚ o゚*) オオー!

続きを読む ≫
 な・なんと、答えは「jQuery」の、本家サイトにありました・・・(゜_゜i)タラー・・・ まぁ~英語で判らないんだけどね~
(゚゚;)\(--;)オイオイ 実際は、グルルン先生に「prototype.js jQuery コンフリクト」で質問するといっぱい答えてくれます。
・・・今までは、検索キーワードが良くなかった為見つけられなかった (^∀^2)、

ちなみに原因は詳しくないので詳しく書けませんが、「$」関数が両方でかぶってしまっているのが原因らしい・・・
そこで解決方法は・・・かぶらないように「jQuery」の「$」関数を変更すれば良い・・・らしい・・・

※結果的にはうまく共存できたのですが・・・自分の環境では、多少副作用がありました (TOT)


prototype.js と jQuery 共存方法説明

その前に、自分の環境説明しときますと、「jQuery」シリーズが4個使用中 詳しくはこちら
そして、使いたいのに使えなかった「prototype.js」系のスクリプトが何個かあるのですが、ど~ぅしても諦めきれなかったのが「Scriptaculous」を使ったプラグインなのです。(「Content with show/hide javascript for "more"のカスタマイズ品」 & 「WP-dTree」のエフェクト機能)
それを使えるようにする設定です・・・というか、「prototype.js」系が使えるようになると思うのですが、自分はそれ以外は試していないので・・・(^∀^2)、

<head>~</head>の部分です。(変更前のバックアップは忘れずに~!!)
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
var j$ = jQuery;
</script>
「prototype.js」を使用する場合は「jQuery」より前に記入するようです・・・(自分は使用しないので未確認)
追記・・・その後、自分のソースを見たところ使いたかったプラグインを有効にしたら勝手に「prototype.js」も読み込まれていました。(^∀^2)、・・・・しかも、「jQuery」より後ろに・・・アレ_(・・?..)?アレェ
「jquery.js」を読み込ませたすぐ下に上記の黄色い部分を追記

あとは、自分の使用している(<head>~</head>間で読み込ませている)「jQuery」の「js」ファイルの「$(」部分をすべて「j$(」に置き換えます。
 
それと<head>~</head>間に直接記入してある「jQuery」のスクリプトの「$(」部分もすべて「j$(」に置き換えれば完了です。

※「$(」とは「js」ファイルの中では、「$('ここに文字が入っています')」と書かれている部分の左だけを書いたものです・・・検索置換する時は「$(」で探すといいかも・・・自分の場合はそうしました。
※変更前にちゃんと動いていて、変更後にうまく動かないスクリプトがあったらこちらを参考にしてみてください・・・参考になればいいけど・・・

見事すべてが使えるようになりました~!!!! v(=∩_∩=) ブイブイ!!

・・・しかし喜んだのもつかの間?・・・・自分の場合「firefox」と「safari」と「IE6」・・・たまに「opera」のブラウザで動作確認しているのですが、思わぬ副作用が・・・・
1. 「safari」だけ、「roundcorners canvas」で角丸が表示されない
2. 「safari」だけ、「Sliding Panles」が使用できない
3. 「IE6」だけ、「Content with show/hide javascript for "more"のカスタマイズ品」を有効後、「続きを読む」でページを開かずに下にスライドさせて表示させた場合、「roundcorners canvas」で角丸はできているのだが・・・中の文字が全く表示されない・・・( ̄□ ̄;)!! ページを開けば問題ないのだが・・・
4. 「firefox」だけ、「WP-dTree」のエフェクト機能を有効にするとかなりの確率でツリーが開けなくなる・・・

  う~~ん、これで、完璧だ~・・・と思ったのだが、うまくいかないね・・・人生こんなものさ・・・・(T^T)
いつか解決したいと思います・・・・

追記・・・上記 1. 2. はその後解決しました。
1. 番の解決法 知識のない自分が一応「roundcorners canvas」のファイルを除いてみると、「safari」の文字を発見・・・
if ($.browser.safari && v == 'rgba(0, 0, 0, 0)')
そしてさらに「msie」の文字も・・・
if (jQuery.browser.msie) this.style.zoom = 1; // force 'hasLayout' in IE
・・・あれ? 確か「$」が「jQuery」って意味になってたんだよなぁ??・・・そしてこのページの設定で「j$」が「jQuery」になった・・・これは!! と思い早速
if (jQuery.browser.safari && v == 'rgba(0, 0, 0, 0)')
に変更してみたところ、ばっちり直りました!! それに伴い、2. 番も勝手に直りました!! (笑) ・・・多分「roundcorners canvas」のエラーのせいで表示されなかったのでしょう・・・

※・・・かと言って「$」をすべて変更するのは危険です。うまく動かない時だけ調べましょう~(^∀^)



追記・・・その後、3.は違う理由でスタイルシートの「roundcorners canvas」で使用するクラス名のところに「height: 100%;」って追記したら、偶然直りました・・・何ででしょうか? (^∀^2)、 まぁ~よかった よかった!!

4.はこちらのページにも書きましたが、「Grow」のみ使用出来ることが発覚したので、いんちきカスタマイズをしてとりあえず解決?しました。
「20点」 まったく役に立たなかったよ 。。。・゚゚・(>Д<;)・゚゚・。。。。「40点」 ちょっとだけ役に立ったかな (T^T)「60点」 まぁ~まぁ~の記事だね v(^∀^)v「80点」 良い記事だけど、あとちょっと・・・ (ノ´▽`)ノオオオッ♪「100点」 探していたのはこの記事だ!! (*゚ o゚*) マジっすか!? (2 投票, 平均値/最大値: 5 / 5)
 
≪ 続きを隠す

人気度 : 40 %

1 comment

▲


Previous Top

2008

3/29

「jQuery Sliding Panels」 設置説明

Last modified: 2008年6月8日 (日)  pm 1時49分
Posted by jun  Published in jQuery

▼



その後、環境の変化にともない一部で不具合が発生するため、こちらのページはそっくりそのままこちらに移動しました・・・ペコリ(o_ _)o))


人気度 : 18 %

no comment

▲


Previous Top

2008

3/19

「jQuery Drop Shadow」 設置説明

Last modified: 2008年6月8日 (日)  pm 6時44分
Posted by jun  Published in jQuery, 愛犬

▼


今度は「jQuery Drop Shadow」の設置方法です。
・・・最初に言っておきますと、自分の環境だけかもしれませんが「IE」では綺麗に表示されません。

続きを読む ≫

設定方法

まずはこちらから「Drop Shadow plugin」 「jquery.dimensions.js」 「jquery.js」 をダウンロード
そして、いつものように、すべてのファイルを適当なフォルダ(ここでは、jquery-dropshadow)に入れFTPで任意の場所(ここではwp-admin等と同じ最上層にします)にアップロード。
※ちなみに、「jquery.js」を設置済みの場合は使い回しができるようです。

関連ファイルの外部リンク設定
次にJavaScriptとスタイルシートを、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。
自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="http://example.com/jquery-dropshadow/jquery.js"></script>
<scripttype="text/javascript"src="http://example.com/jquery-dropshadow/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://example.com/jquery-dropshadow/jquery.dropshadow.js"></script>
<script type="text/javascript">
window.onload = function(){
$("p.クラス名").dropShadow({
left: 8,                           // 左からの距離
top: 5,                            // 上からの距離
opacity: 0.8,                      // 透明度
blur: 1,                           // ぼかし
color: "red"                       // 影の色
});
}
</script>
黄色の部分を自分の設定にあわせ書き込んでください。
上記の赤文字の設定を変えて自分好みの設定にしてください。


使用方法

上記の緑の文字を「"p.test"」とした時の例
※もちろん「p」タグじゃなく、「span.クラス名」 「img.クラス名」などなど、他のタグでもOKです。
     <p class="test">
     この場合は、文字に影がつきますが<br />
     画像でもなんでもOKです。・・・・・(⌒^⌒)b うん
     </p>
※付けすぎると非常に重いようです・・・・(T^T)・・・・って言うか自分の場合、色々付けすぎてるからだと思うけど・・・・・・・(゜_゜i)タラー・・・
※IEだとさらに重い・・・そして、影がみんな赤くかすれたのが出るだけになってしまう・・・自分だけ??


サンプル

残念なことに、現在は取り外されてしまったため、こちらになります。 (T^T)



本当の見え方は、こんな感じです・・・「IE」ユーザーで、上記サンプルがうまく表示されない場合は、これで我慢してください・・・σ(^◇^;)ヒヤアセ

※ ← この画像の影は「css」で付けているので違います。紛らわしくてすいません。
ペコリ(o_ _)o))
 



「20点」 まったく役に立たなかったよ 。。。・゚゚・(>Д<;)・゚゚・。。。。「40点」 ちょっとだけ役に立ったかな (T^T)「60点」 まぁ~まぁ~の記事だね v(^∀^)v「80点」 良い記事だけど、あとちょっと・・・ (ノ´▽`)ノオオオッ♪「100点」 探していたのはこの記事だ!! (*゚ o゚*) マジっすか!? (1 投票, 平均値/最大値: 5 / 5)
 
≪ 続きを隠す

人気度 : 23 %

no comment

▲


Previous Top

2008

3/18

「jquery roundcorners canvas」 と 「jquery curvycorners」 の 設置説明

Last modified: 2008年5月16日 (金)  pm 4時26分
Posted by jun  Published in jQuery

▼


・・・なぜか最近 jquery にはまっているようだ?? まぁ~それは置いといて、 角丸を作成できる jquery プラグインを付けてみたいと思った・・・・なんとなく。調べた所、2種類発見、それがタイトルの2種類です。

早速、どちらが良いか試してみた所・・・・う~~~ん、一長一短?2種を比較した感想
jquery.curvycorners は、「角丸が綺麗」 「角丸の角度が選べる」 「ボーダーも付けれる」 「ちょっと重い」 「ブラウザによって表示が違う時がある?設定のせいかも・・・」
jquery-roundcorners-canvas は、「角丸がちょっと荒い」 「角の種類がいっぱいある」 「軽い」 
続きを読む ≫

と、行った所でしょうか?・・・結局、選んだのは jquery-roundcorners-canvas 理由は、こちらの方が軽かったのとIE & Firefox での表示が同じだったからです・・・あくまで、設定のせいかもしれません。ペコリ(o_ _)o))


設定方法


ダウンロード場所 ここから「jquery-roundcorners-canvas」そして、 ここから「jquery.js」を入手してください。
※「jquery.js」はすでにお持ちでしたら、使いまわせると思うので、いりません。

入手したすべてのファイルを適当なフォルダ(ここでは、jquery-corner)に入れFTPで任意の場所(ここではwp-admin等と同じ最上層にします)にアップロード。

jquery.corner.jsと関連ファイルの外部リンク設定
次にJavaScriptとスタイルシートを、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。
自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="http://example.com/jquery-corner/jquery.js"></script>
<script type="text/javascript" src="http://example.com/jquery-corner/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$(".class名").corner("round")      });
</script>
先ほどFTP転送した各フォルダの各ファイルのある場所を設定します。黄色の部分を自分の設定にあわせ書き込んでください。
赤色の部分の1個目にお好きなclass名を記入。(ドットを忘れないでね) 2個目のところは、角の種類です。かなり種類があります。デモページを参考にしてください。

そして、上記のclass名と同じ名前でスタイルシートにもclassを設定して、どんな感じにしたいか設定しておきます。
あとは、指定したclasssでテキストなどを囲めば完成です。


使用方法

ヘッダーの赤い文字の1個目に「".mydiv"」とした時の例
     <div class="mybox">
     適当な文字を書く<br />
     色々書く・・・・・(^∀^2)、
     </div>
すると、こんな感じになります・・・・・↑

以上、いかがでしょうか?? ペコリ(o_ _)o))





・・・一応、おまけの jquery.curvycorners

設定方法


ダウンロードはここ

jquery.curvycorners.packed.jsと関連ファイルの外部リンク設定
次にJavaScriptとスタイルシートを、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。
自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。


     <script type="text/javascript" src="http://example.com/jquery-corner/jquery.js"></script>
     <script type="text/javascript" src="http://example.com/jquery-corner/jquery.curvycorners.packed.js"></script>
     <script type="text/javascript">
     $(document).ready(function(){
     $(’.mybox’).corner(
     {
     tl: { radius: 10 },                        //左上の半径
     tr: { radius: 10 },                        //右上の半径
     bl: { radius: 10 },                       //左下の半径
     br: { radius: 10 },                       //右下の半径
     antiAlias: true,                           //アンチエイリアス
     autoPad: true,                           //オートパディング
     validTags: ["div"] });                  // div タグの中のものに適用
     });
     </script>

 
上記の設定以外は、jquery-roundcorners-canvas と一緒です。
使用方法も、専用のclass名を作ってスタイルシートと div 内のタグに、そのclass名を付けるだけです。
※ちなみに上記の角の能力は「jquery-roundcorners-canvas」です σ(^◇^;)ヒヤアセ

それではごきげんよう~~ (゚゚)(。。)ペコッ


「20点」 まったく役に立たなかったよ 。。。・゚゚・(>Д<;)・゚゚・。。。。「40点」 ちょっとだけ役に立ったかな (T^T)「60点」 まぁ~まぁ~の記事だね v(^∀^)v「80点」 良い記事だけど、あとちょっと・・・ (ノ´▽`)ノオオオッ♪「100点」 探していたのはこの記事だ!! (*゚ o゚*) マジっすか!? (1 投票, 平均値/最大値: 5 / 5)
 
≪ 続きを隠す

人気度 : 21 %

no comment

▲


Previous Top

2008

3/17

「jQuery thickbox plugin」 設置説明

Last modified: 2008年5月9日 (金)  pm 6時00分
Posted by jun  Published in jQuery

▼

このページで設置した jQuery lightBox plugin に続いて今度は、 jQuery plugin の thickbox を設置します・・・・なぜかと言うと、前回の設置ページで試した「wp-lightpop」がHTMLファイルを表示できたのが素敵に思え羨ましかったからです・・・・(;^_^A アセアセ そこで検索してみつけたのが、thickbox でした。 では早速設置・・・・
続きを読む ≫


設定方法 


まずはこちらからダウンロード
ダウンロードする所は 「thickbox.js」 「thickbox.css」 「compressed version of jQuery」 「loadingAnimation.gif」 の4つです。

ダウンロードすると 「thickbox.js」 「thickbox.css」 「jquery-latest.pack.js」 「loadingAnimation.gif」 の4つのファイルができるので、
そのファイルのうちの「jquery-latest.pack.js」を「jquery.js」にリネーム
そして、すべてのファイルを適当なフォルダ(ここでは、jquery-thickbox)に入れFTPで任意の場所(ここではwp-admin等と同じ最上層にします)にアップロード。
※ちなみに jQuery lightBox plugin を設置済みの場合は、「jquery-latest.pack.js」(jquery.js)は使い回しができるようです。それと、「loadingAnimation.gif」も「lightBox」と同じ画像で構わないなら使い回し出来ます。

thickbox.js の設定
8行目に「loadingAnimation.gif」のパスを設定します。
var tb_pathToImage = "http://example.com/jquery-thick-box/loadingAnimation.gif";
黄色の部分を設定してください。

thickbox.jsと関連ファイルの外部リンク設定
次にJavaScriptとスタイルシートを、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。
自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="http://example.com/jquery-thick-box/jquery.js"></script>
<script type="text/javascript" src="http://example.com/jquery-thick-box/thickbox.js"></script>
<link type="text/css" rel="stylesheet" href="http://example.com/jquery-thick-box/thickbox.css" media="screen" />
黄色の部分を設定してください。


HTML表示 使用方法

サムネイル画像「test_thumbnail.jpg」をクリックした後、「test.html」をthick Boxを使って表示する場合
<a href="test.html?width=280&height=150" class="thickbox" title="test"><img src="test_thumbnail.jpg" border="0" width="100" height="100" alt="test" /></a>
黄色い部分がポイントです。
※「?」以降の「width=280&height=150」は、省略できます。(文章が指定した高さを超える場合には、自動的にスクロールバーが表示されます)

・・・・自分の場合は、thick Box はHTML表示のみで、画像は light Boxを使うのでこれで完了です。


サンプル

クリックしてみてください。(画像ではなく文字リンクでもできます)
テストHTML
(※cssファイルをいじって多少デザインを変えてあります)


・・・一応参考までに、
画像表示使用例 (どちらも、実際に試していません (;^_^A アセアセ )
単品バージョン
サムネイル画像「test_thumbnail.jpg」をクリックした後、「test.jpg」をthick Boxを使って表示する場合
<a href="test.jpg" class="thickbox" title="test" rel="test"><img src="test_thumbnail.jpg" border="0" width="120" height="90" alt="test" /></a>

グループバージョン
サムネイル画像「test_thumbnail_1.jpg」~「test_thumbnail_3.jpg」をクリックした後、「test_1.jpg」~「test_3.jpg」をthick Boxを使って表示する場合
<a href="test_1.jpg" class="thickbox" title="scene1" rel="group"><img src="test_thumbnail_1.jpg" border="0" width="120" height="90" alt="scene1" /></a>
<a href="test_2.jpg" class="thickbox" title="scene2" rel="group"><img src="test_thumbnail_2.jpg" border="0" width="90" height="120" alt="scene2" /></a>
<a href="test_3.jpg" class="thickbox" title="scene3" rel="group"><img src="test_thumbnail_3.jpg" border="0" width="120" height="90" alt="scene3" /></a>
と、このように「rel 」に同じ名前を指定すると、グループ化され「next」ボタンが表示されるらしい・・・・

以上、気に入って頂けましたでしょうか?? σ(^◇^;)ヒヤアセ


「20点」 まったく役に立たなかったよ 。。。・゚゚・(>Д<;)・゚゚・。。。。「40点」 ちょっとだけ役に立ったかな (T^T)「60点」 まぁ~まぁ~の記事だね v(^∀^)v「80点」 良い記事だけど、あとちょっと・・・ (ノ´▽`)ノオオオッ♪「100点」 探していたのはこの記事だ!! (*゚ o゚*) マジっすか!? (2 投票, 平均値/最大値: 5 / 5)
 
≪ 続きを隠す

人気度 : 24 %

no comment

▲


Previous Top

2008

3/16

「jQuery lightBox plugin」 設置説明 & 「wp-lightpop」 を 試す

Last modified: 2008年5月9日 (金)  pm 8時19分
Posted by jun  Published in jQuery, プラグイン, 愛犬

▼

つい最近このページで「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行目を編集します。
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',
先ほどFTP転送したimagesフォルダの各画像ファイルのある場所を設定します。黄色の部分を自分の設定にあわせ書き込んでください。

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" />
先ほどFTP転送した各フォルダの各ファイルのある場所を設定します。黄色の部分を自分の設定にあわせ書き込んでください。

lightBox効果を与える指定方法
全てのjpg画像に効果を与える場合

/jQuery-lightBox/js/jquery.lightbox-0.4.js の、最後尾の列に以下のコードを継ぎ足す。
$(function() {
   $('a[href*="jpg"]').lightBox();
});
これで、全ての a href タグの全てのjpgファイルが効果を受けます。
こちらの設定方法の場合はこれで完了です。



個別でjpg画像に効果を与えたい場合
/jQuery-lightBox/js/jquery.lightbox-0.4.js の、最後尾の列に以下のコードを継ぎ足す。
$(function() {
   $('.lightBox a').lightBox();
}); 
これで、lightBox のクラス指定で a タグのファイルが効果を受けます。
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>
これで、完了です。


サンプル

画像ををクリックしてみてください。
小さいさくら
さくら

かえで

小さいかえで

どうですか? ステキな表示方法でしょ?? (⌒^⌒)b うん
さて、後は細かな設定が出来るらしいのでいじろうと思ったのですが・・・・説明ページが見つからず断念・・・・まぁ~そのうちに・・・
しかし変わりに違うものが見つかった・・・・( ̄□ ̄;)!!
がんばってこれを設置したところで、WPプラグインの wp-lightpop なるものを発見!!
lightview は自分の場合、がんばっても設置できませんでしたが、試してみた所 ( ̄□ ̄;)!!
あっさり稼動しました・・・しかも、同じような表示形式・・・・σ(^◇^;)ヒヤアセ しかも設定が楽・・・・(; ̄ー ̄川 アセアセ
しかし、設定をいじっているうちに問題点が・・・・このプラグインを使うと更新が非常に重くなる・・・jQuery lightBox は全然感じなかったですが・・・
それと、これはまた自分だけだと思うのですが、なぜか背景色が変えられない・・・どんなにいじっても白にしかならない・・・なんで?

結局、重いのは困るので jQuery lightBox に戻しました。(^∀^) ・・・しかし、簡単なのがいい人にはおすすめ!! 表示の仕方は jQuery lightBox と似ていてかっちょいいです。最初のぐにぃ~んって感じは弱いですが、消える時は wp-lightpop の方がステキかな?外枠もいっぱい選べるし そうそう、自分は関係ないけどこのプラグインは画像だけでなく YouTube などの動画サイト、各種動画ファイル、HTMLファイルにも対応してるみたいです!!(゜゜)(。。)(゜゜)(。。)ウンウン

「20点」 まったく役に立たなかったよ 。。。・゚゚・(>Д<;)・゚゚・。。。。「40点」 ちょっとだけ役に立ったかな (T^T)「60点」 まぁ~まぁ~の記事だね v(^∀^)v「80点」 良い記事だけど、あとちょっと・・・ (ノ´▽`)ノオオオッ♪「100点」 探していたのはこの記事だ!! (*゚ o゚*) マジっすか!? (1 投票, 平均値/最大値: 5 / 5)
 
≪ 続きを隠す

人気度 : 25 %

no comment

▲


Previous Top

現在の訪問者数

サーチ

注意書き

当ブログの内容は管理人の覚え書がメインです。書き間違い勘違いもあるでしょう。なので、一切の責任を持ちません。各自の責任で行ってください。答えられることは、お答えします。
ペコリ(o_ _)o))

カテゴリ

    open all | close all

アーカイブ

    open all | close all