トップ «前の日記(2007-09-27) 最新 次の日記(2008-03-02)» 編集

Scrapcode@tDiary

2007|09|
2008|02|03|

2008-02-10

_ Liteboxプラグイン

絵日記プラグイン等で表示する画像にLiteboxを適用するプラグインです。

(2008-12-03追記)image-exプラグインを使うか、imageプラグインでthumbnailを指定するなどして、画像がリンクになっている必要があります。thumbnail指定なしでimageプラグインを使ったり、画像URLを直接書いたりしてもリンクにならないので、効果はありません。

ダウンロード → litebox.rb

動作サンプル

サンプル1 サンプル2 サンプル3

同じ日の日記に複数の画像がある場合、「NEXT」「PREV」で切り替えられるようにグルーピングされます。

設置例

DOCUMENT_ROOT/
 |-- litebox/
 |    |-- css/
 |    |    `-- lightbox.css
 |    |-- images/
 |    |    |-- blank.gif
 |    |    |-- closelabel.gif
 |    |    |-- loading.gif
 |    |    |-- nextlabel.gif
 |    |    `-- prevlabel.gif
 |    `-- js/
 |         |-- litebox.js    ← litebox-1.0.js をリネーム!
 |         |-- moo.fx.js
 |         `-- prototype.lite.js
 |     
 `-- tdiary/
      |-- misc/
      |    `-- plugin/
      |         `-- litebox.rb  ← プラグインを設置
      |-- index.rb
      |-- update.rb
      |-- tdiary.conf
      `-- (その他、略)

DOCUMENT_ROOT/litebox/ の中は、ダウンロードしたlitebox-1.0.zipを展開してできるディレクトリをそのままアップロードで構いません。 上記は、サンプル用の不要なファイルは削除しています。

ただし、litebox-1.0.js をリネームするかシンボリックリンクを張るかして litebox.js を用意してください。

litebox.rbプラグインは、@options['sp.path'] で設定されているプラグイン用ディレクトリに設置してください。

tdiary.confの設定

tdiary.conf に以下の設定を追記します。

@options['litebox.url']         = '/litebox/'
@options['litebox.resizeSpeed'] = 8
@options['litebox.borderSize']  = 10
@options['litebox.url']
(任意)設置したLiteboxの基準ディレクトリへのURL。デフォルトは'./litebox/'。
@options['litebox.resizeSpeed']
(任意)Liteboxのリサイズ速度(1-10)。デフォルトはLiteboxのデフォルトである6。
options['litebox.borderSize']
(任意)枠の太さ(px)。デフォルトはLiteboxのデフォルトである10。

@options['litebox.url']で指定したURLを使って、以下のように<head>内に埋め込まれます。

<link rel="stylesheet" href="/litebox/css/lightbox.css" type="text/css" media="screen">
<script type="text/javascript" src="/litebox/js/prototype.lite.js"></script>
<script type="text/javascript" src="/litebox/js/moo.fx.js"></script>
<script type="text/javascript" src="/litebox/js/litebox.js"></script>

ここまでの設定で、パスに間違いが無ければ動作するはずです。

備考

このLiteboxプラグインはadd_header_procとadd_footer_procでHTMLソース(ほとんどはJavaScriptですが)を出力しているだけなので、tDiaryそのものの動作に悪影響を与えることは無いと思います。 ただし、他のプラグインでJavaScriptを使って似たような処理をしている場合には、そのプラグインと競合してしまう可能性があります。

他のプラグインの影響か何かでプラグイン内に記述しているadd_footer_procが正しく動作せず、このプラグインが働かないという報告がありました。

Tags: tDiary plugin

_ Lightboxプラグイン

LiteboxプラグインをLightbox2用に書き換えたものです。

ダウンロード → lightbox.rb

設置方法等はLiteboxプラグインとほとんど同じですが、tdiary.confでの設定項目が多少違います。

tdiary.confの設定

@options['lightbox.url']
(任意)設置したLightboxの基準ディレクトリへのURL。デフォルトは'./lightbox/'。
@options['lightbox.overlayOpacity']
(任意)オーバーレイの不透明度(0.0-1.0)。デフォルトはLightboxのデフォルトである0.8。
@options['lightbox.animate']
(任意)リサイズアニメーションのON,OFFをtrue,falseで指定。デフォルトはLightboxのデフォルトであるtrue。
@options['lightbox.resizeSpeed']
(任意)Lightboxのリサイズ速度(1-10)。デフォルトはLightboxのデフォルトである7。
@options['lightbox.borderSize']
(任意)枠の太さ(px)。デフォルトはLightboxのデフォルトである10。

動作サンプル

Liteboxプラグインと競合するので、Lightboxプラグインの動作サンプルはありません。

Tags: tDiary plugin
本日のツッコミ(全23件) [ツッコミを入れる]
_ gorden (2008-12-03 15:31)

sorry. I can not understand this sample.<br>yes ,I have imported the litebox.<br>but ,how to use this new function.<br>I was confused.<br>how to insert the image when I write the tDiary.

_ gorden (2008-12-03 15:33)

as an example.<br>i think it is not enough.

_ はしもと (2008-12-03 16:25)

Hi! gorden.<br>Please use the "image-ex" plug-in.<br>The "image-ex" plug-in is included in "contrib" package.<br><br>contrib package<br>http://www.tdiary.org/download/tdiary-contrib.tar.gz

_ gorden (2008-12-03 16:40)

Thanks very much.<br>I will try it .

_ いっとく (2008-12-04 01:05)

はじめまして。Liteboxプラグイン使わせていただいております。<br>拙サイトを見ていただきたいのですが、たとえばここの<br>http://www.enthusiast.jp/ittoku/diary/?date=20081203#p04<br>画像を開いていただくと、本来左下に表示される画像の説明文が見えていないのです。<br>選択して反転させると見えるので、恐らくフォントカラーが白になっていると思われます。<br>ここのカラーを変える方法、ご存知ないでしょうか。<br>恐れ入りますが、よろしくお願いします。

_ はしもと (2008-12-04 01:18)

いっとくさん、こんにちは!<br>append-cssプラグインをお使いのようなので、そこに<br>div#imageDetails { color:#000; }<br>を追加すれば見えるようになると思います。

_ いっとく (2008-12-04 09:22)

はしもとさま<br>ありがとうございます! お陰様で上手く行きました!<br>助かりました。<br>素晴らしいプラグインをありがとうございます!

_ gorden (2008-12-04 14:31)

はしもとさま:<br>plugin image_ex.rbについて、 <br>以下のconfigure:@options['image_ex.thresholdsize'] = 160<br>の"160"の単位はなんですか。<br>ご存知ないでしょうか。

_ はしもと (2008-12-04 16:37)

いっとくさん<br>うまく行けてよかったです!<br><br>gordenさん<br>あれ?日本語OKですか?<br>"image_ex.thresholdsize"の単位はピクセルです。この指定は、アップロードした画像ファイルがこのサイズを超えるとthumbnail用の縮小画像を生成する、というものです。<br>画像の縦横の長辺がここで指定したサイズになり、短辺は元のサイズの比率に合わせて自動的に決定されます。

_ gorden (2008-12-04 17:29)

はしもとさま: <br>返事ありがとう。「日本語は少し」<br>また問題が出てきた。<br>thumbnail用の縮小画像を生成することができなったんです。<br>image_ex.rbとimage_size.rbも導入し、ImageMagickもInstallし、以下のhttp://docs.tdiary.org/users/?image_ex.rbを参考して、tdiary.confを配置し、何かできないです。<br>困ったなあ。<br>May be you can give me some advice ,thanks.

_ はしもと (2008-12-04 18:04)

gordenさん<br>thumbnail画像が生成できない原因はわかりませんが、参考にボクが実際に使っている設定を書いておきますね。image.dirのpathはdammyです。<br><br>@options['image.dir'] = "/home/xxxx/public_html/tdiary/images/"<br>@options['image.url'] = './images/'<br>@options['image_ex.previewsize'] = 120<br>@options['image_ex.yearlydir'] = 1<br>@options['image_ex.useresize'] = 1<br>@options['image_ex.converttype'] = 0<br>@options['image_ex.thresholdsize'] = 160<br>@options['image_ex.convertedwidth'] = 160<br>@options['image_ex.convertedheight'] = 120<br>@options['image_ex.convertpath'] = "/usr/local/bin/convert"<br><br>他に思いつく注意点は、次の2つぐらいです。<br>・CGIの実行ユーザーがImageMagickを実行できるか?<br>・CGIの実行ユーザーが画像保存ディレクトリにファイル/ディレクトリを作成できるか?<br><br>がんばって!

_ gorden (2008-12-04 18:53)

はしもとさま: <br>返事ありがとう。<br>はい、頑張ります。<br>tdiary.confの配置は全く同じです。<br>たぶん原因は:<br>”・CGIの実行ユーザーがImageMagickを実行できるか? ”<br>でも、これを”chmod 755 convert”を実行して「正しいかどうか?」、またできないんです。<br><br>教えてくれた第二注意点は、Imageのuploadすることができるので、たぶん大丈夫だと思う。

_ はしもと (2008-12-04 20:08)

gordenさん<br>convertをCGIから使えるかどうかを確認するのに、このようなCGIを実行してみてください。<br><br>------ test.rb --------<br>#!/usr/local/bin/ruby<br><br>print "Content-type: text/plain\n\n"<br>result = `/opt/local/bin/convert -version`<br>puts result<br>--------------------<br><br>rubyとconvertのpathはgordenさんの環境に合わせてください。これでversionが表示されれば、convertは問題無さそうです。

_ gorden (2008-12-04 21:07)

はしもとさま: <br>./ruby rest.rb <br>実行してみた、以下のようなメッセージ<br>”Content-type: text/plain ”<br>”/usr/local/bin/convert -version”<br>を表せしました。<br>なにか問題があるそうですね。<br>解決方法を教えていただけませんか。

_ はしもと (2008-12-04 21:23)

gordenさん<br>あれ?そのような表示になりますか?それはtest.rbが正しく実行できていないように見えます。<br>http://www.scrapcode.net/tdiary/test.txt<br>これをdownloadして、test.rb or test.cgiにファイル名を変更して、もう一度試してください。<br><br>こちらでは http://www.scrapcode.net/tdiary/test.rb を実行すると<br><br>Version: ImageMagick 6.2.9 09/09/06 Q16 http://www.imagemagick.org<br>Copyright: Copyright (C) 1999-2006 ImageMagick Studio LLC<br><br>と表示されます。

_ gorden (2008-12-04 22:28)

はしもとさま: <br>返事ありがとう。<br>橋本様の言う通りに実行しました。rest.rbをウェブで訪問して、<br>結果は:<br>http 500エラーが出て:<br>”Web サイト側でページを表示できません”<br>でも直接で、Linux側で、./convert -version を実行すると<br>Version: ImageMagick 6.4.6 2008/12/03 Q16 http://www.imagemagick.org <br>Copyright: Copyright (C) 1999-2009 ImageMagick Studio LLC <br>と表示されます。<br>悩み ...

_ はしもと (2008-12-05 09:57)

gordenさん<br>http 500エラーですか。うーん…。Apacheのerror_logに何かhintは出ていませんか?

_ gorden (2008-12-05 11:28)

はしもとさま: <br> 返事ありがとう。<br> Apacheのerror_logが何もエラーが出て来なかったんです。<br> 僕はLinux側でVI Editorを利用して、test.rbを作ったんです、これは大丈夫ですか?<br> でも、どうして、index.rbファイルの色はrest.rbファイルのと違いますか。<br> ご存知ないでしょうか。<br> 

_ はしもと (2008-12-05 11:32)

gordenさん<br>入力ミスがなければ、viで作っても大丈夫です。<br>ファイルの色が違うというのは、lsで表示したときですか?それなら、permittionが違うのではないでしょうか?

_ gorden (2008-12-05 12:02)

はしもとさま: <br> そうですね、permissionのせいですね。<br> 直して、rest.rbを実行すると、<br> <br> Version: ImageMagick 6.4.6 2008-12-03 Q16 http://www.imagemagick.org<br>Copyright: Copyright (C) 1999-2009 ImageMagick Studio LLC<br> <br> が表示されます。<br> でも、また、thumbnail画像が生成できない。<br> また、なにか欠かせるかなあ?

_ はしもと (2008-12-05 12:16)

gordenさん<br>CGIからでもconvertは実行できたということですね。<br>となると、何だろう?<br>何とか解決のお手伝いはしたいのですが…ごめんなさい、今は他に調べ方が思いつかないです…。

_ gorden (2008-12-05 13:47)

はしもとさま: <br> 今まで、手伝ってくれた、本当にありがとうございました。<br> CGIの実行ユーザーが画像保存ディレクトリにファイル/ディレクトリを作成できるか? <br> どうやってチェックしますか?

_ はしもと (2008-12-06 00:34)

gordenさん<br>前にImageのuploadはできる、と書かれていたので問題ないと思います。<br><br>他には、プラグイン選択の設定で、imageがoff、image-exがonになっているかを確認してください。

[]

2007|09|
2008|02|03|
トップ «前の日記(2007-09-27) 最新 次の日記(2008-03-02)» 編集