▼ 2008/03/13(木) LightBOX plus導入
以前から気になっていたLightBOX plusを入れてみたｗ
さしみしょうゆ２．０さんのTipsを丸々参考ｗ
のでadiaryユーザーで導入考えた人は注意してﾁｮｳﾗｨ!щ(ﾟ▽ﾟщ)
対策方法by`worstmanさん
*1 : websnaper、Reflectionは大丈夫
導入
公式からプログラムをDL*2解凍後、中から
lightbox_plus.jsを取り出して「lightbox」等、適当な名前をつけたフォルダーにまとめる
spica.js
lightbox.css
overlay.png
loading.gif
expand.gif
shrink.gif
blank.gif
close.gif
zzoop.gif
prev.gif
next.gif
その中のlightbox_plus.jsをメモ帳なんかで開いて
後ろの方にある上記のgifファイルを指定している部分を『絶対パスとかURL』に書き換える*3
loadingimg:'resource/loading.gif',→loadingimg:'/絶対パスとかURL/loading.gif',lightbox一式の入ったフォルダーはルート直下なりお好みの場所にどぞｗ
みたいな感じ
adiary書き換え
/adiary/diary.user.skel/_frame.htmlのヘッダ部分に<!--Lightbox--> <link rel="stylesheet" href="絶対パスとかURL/lightbox.css" type="text/css" /> <script type="text/javascript" src="絶対パスとかURL/lightbox/spica.js"></script> <script type="text/javascript" src="絶対パスとかURL/lightbox/lightbox_plus.js"></script> <!--Lightbox END-->と書き足す
※『絶対パスとかURL』は、自分の環境に合わせてﾁｮｳﾗｨ!щ(ﾟ▽ﾟщ)
記法
<a rel="lightbox" href="LightBOXで表示する大きな画像のアドレス"><img src="最初に表示されている小さな画像のアドレス"></a>で表示可能になります
UPした画像をLightBOX化するには
/adiary/lib/Satsuki/TextParser/TagPlugin/Tag_image.pmの
return "<a href=\"$link\"$tag->{class}$target><img alt=\"$name\" title=\"$name\"$size src=\"$url\"></a>";
↓
return "<a rel=\"lightbox1\" href=\"$link\"$tag->{class}$target><img alt=\"$name\" title=\"$name\"$size src=\"$url\"></a>";
に書き換える「rel=\"lightbox1\"」を「a href=\"$link\"」の「a h」の間に書き足すだけです*4
以降はUPした画像がLightBOX化されるという寸法(ﾟДﾟ )ｳﾏｰ
「日記の再構築」を済ませば、過去にUPされた画像はLightBOX化されますヾ(ﾟωﾟ)ﾉ゛
やるな、ぎんさんっす( ﾟ∀ﾟ)ﾉ
完全パクリで恐縮です m( __ __ )m
動作画面
上の画像をクリックします
こんな感じに表示されます(｀･ω･´)ｼｬｷｰﾝ
中央に表示された
画像の左上のアイコンをクリックしてから
ホイールを回すと拡大・縮小できます
これが売りとか思うのですよ( ﾟ∀ﾟ)ﾉ
参考
ココを参考に似たようなツールを探してみてるんだけどね、拡大縮小を簡単に使えそうなのはLightBOX plusくらいな気が？
早く本家2.0を軸にバージョンアップされないかしら？
- TB-URL http://nonoya.selfip.com/adiary/adiary.cgi/nonoya/01915/tb/
-
▼
adiary 編集画面の記法入力を支援する adiary_control_text を公開します。
worstman.net/Blog 注：一部修正しました 2008/03/14 追記しました 発端は、ひとぅ氏のadiaryが損をしている点 - ひとぅブログというエントリの中に編集画面で文字の装飾ができない という一文を見かけたのがきっかけです。実は、以前から自分用に編集画面を改造してい...
|
|
|
|
# 最低人間 2008年03月14日(金) 午前10時11分
ご利用、ご報告ありがとうございます。
LightBOX Plus のソースを見てみたところ、adiary_control_text でも使用している prototype.js からいくつか関数を利用していることがわかりました。
当方のスクリプトでは最新の prototype.js をベースにしており、LightBOX Plus は古いバージョンの prototype.js から利用しているようなので、そことどうやら競合するようです。
対処策としては現在のところ二つ考えられます。
１、本家の LightBOX 2.0 を使う
LightBOX Plus は LightBOX 1.0 からの派生のようなので、本家の LightBOX 2.0 なら最新の prototype.js をベースにしているので競合しません（確認済みです）。ただ、再導入が面倒なのと、読み込むJavaScriptファイルのサイズが大きいのが難点です。
２、閲覧モードとシステムモードで JavaScript を切り分ける
LightBOX をシステムモード（編集画面など）で使うことは無いだろう、adiry_control_text を閲覧モード（一般訪問ユーザーが見る画面）で使うことはないだろう、と割り切ってしまえば、それぞれを切り分ければ同居が可能です。
<@ifexec(v.system_mode, begin)>
<script src="設置ディレクトリ/prototype.js"></script>
<script src="設置ディレクトリ/control.textarea.js"></script>
<script src="設置ディレクトリ/control.textarea.markdown.js"></script>
<link type="text/css" rel="stylesheet" media="all" href="設置ディレクトリ/control.textarea.css">
<$end>
<@ifexec(!v.system_mode, begin)>
<link rel="stylesheet" href="設置ディレクトリ/lightbox.css" type="text/css" />
<script type="text/javascript" src="設置ディレクトリ/spica.js"></script>
<script type="text/javascript" src="設置ディレクトリ/lightbox_plus.js"></script>
<$end>
のように記述すれば、切り分けが可能になります。暫定的な対処ですが、ご検討下さい。
# nonoya 2008年03月14日(金) 午後0時53分
策を授けていただき
とても感謝しておりますｗ
･･･ソフト名違っていてすいませんでした；
# 最低人間 2008年03月14日(金) 午後2時51分
お、動きましたか。それはよかった。
今後もバージョンアップなど続けていく予定でおります。
# nonoya 2008年03月14日(金) 午後3時06分
お世話になりました
今後のバージョンアップを楽しみにしてます( ﾟ∀ﾟ)
# ぎん 2008年04月05日(土) 午後11時25分
役に立ったようで良かったです。
最近ブログ放置気味だったので反応遅れてしまったｗ
最新のadiaryでは「日記帳の設定（詳細）」の「パーサー関連の設定」にある
「画像記法のリンク」の「rel」に、「lightbox1」と記載するだけで
さつき記法でのLightBox対応ができるみたいですよ
あと「lightbox1」の「1」を削ると、ページ内の前後の画像へ移動しなくなるので、不要なら削ったほうがいいかもしれません。
# nonoya 2008年04月14日(月) 午後7時04分
これはご丁寧にｗ
もう少しいじってみます( ﾟ∀ﾟ)ﾉ