掲載:2010年11月25日

★ 以下の「御注意!」問題を”つるてん”さんが解決!:(2012-07-24日追記):

 以下のlightbox_plus作動不良に関し”つるてん”さんからコメントを頂きました。現状、書き換え部分の「$」を取る事で作動する様です。ただ、Seesaaのサーバーに不明瞭な所が多く、何時までこの方法で作動するかは不明ですが、よければお使い下さい。詳細はこの記事のコメントをお読み下さい。”つるてん”さんに深謝。

★ 御注意!:(2012-07-23日追記):

 本日、この記事にコメントを頂きましたが、このSeesaaブログではサーバーの違い?等によりlightbox_plus(多分lightboxも同じ)が働かない可能性があります。原因と対策は現在のところ不明です。現在は、このブログ「忘れられた記憶」の物も動作しません。

※ 未だ作動するSeesaaブログ:「星が好き・・・」:
 http://cococore.seesaa.net/
※ この「忘れられた記憶」が動作不良に成った時には動作したが、今は動作しないブログ:「Jazz scene」:
 http://jazz-scene.seesaa.net/
※ SEESAAブログが叉も困った事に成った???;
 http://m-jun.seesaa.net/article/279286269.html

 ★ この状況では、何れ「星が好き・・・」も動作しなくなる模様です。これ等のJAVAはlightbox以外の物で有っても、今は設置されない方が無難な様です。Seesaaブログは何も触れずにそのまま使え!、そう言われている感じがします。そんな感じが今までの改装で垣間見えます。

 改装すれば使いにくく成る。其れは中の人と使う側の色々な立場の違い。DOBLOGの様に成らなければいいのですが・・・。でも、この状態では、何れ何処かのSNSの様な予感。
ーーーーーーーーーー

 2010年11月現在のlightbox_plusは、アーカイブサイズ 3.8MB (zip format) ・バージョン 20100821と成っている。是には、小生が設置した物より改善され、以下の様に有る。

★ バージョン 20090707 より spica.js が不要になりました。lightbox_plus.js に全ての内容が記述されています。

 そう、ファイル数も少なく成っている。このlightbox_plusは、以下のリンクの記事をお読み頂ければ判る様に、適用指示(rel="lightbox")不要な様に改装してある。以下の記事は、そんな初心者用の記事なので、ファイル数も少ない記事を今回再記載する。

 本当の初心者の方は、以前の記事も合わせてお読み下さい。

★ 他のブログにも同様にセット出来ると思います。

101125-01.jpg@ 先ずは以下のサイトからスプリクトをダウンロードしてくる。ファイルはlightbox_sample.zipで凡そ3.70 MB有る。

※ lightbox_plus:
 http://serennz.sakura.ne.jp/toybox/lightbox/?ja

101125-02.jpg101125-03.jpgA lightbox_sample.zipを解凍する。解凍すれば、sampleと言うフォルダが現れる。このフォルダの中には、index.htmlのHTMLファイルとfile・resource・tinyと言う3個のフォルダが入っている。

B 「lightbox_plus」設置に必要なフォルダは「resource」のみ。是を作業フォルダにコピーする。

101125-04.jpgC この「resource」フォルダを開けると、13個のファイルが入っている。一般のブログ等には、設置場所がデフォルトでは相対パスで指定されているので使えない。

、(ightbox_plus.js" とそれを読み込む html ファイルと画像が全て同じディレクトリに置かれることが前提となっています。)

101125-05.jpg 其処で、不要ファイル3個を消去する。不要なファイルは、

1.jojo.css
2.lightbox_plus_min.js(lightbox_plus.jsの圧縮ファイル)
3.sample.css

 残ったファイルは10個。

1.blank.gif
2.close.gif
3.expand.gif
4.lightbox.css
5.lightbox_plus.js
6.loading.gif
7.next.gif
8.prev.gif
9.shrink.gif
10.zzoop.gif

 である。

101125-06a.jpgD 次に、lightbox.cssをエディタで開き、内部の記載内容をご自分のブログのCSSの末尾に追加して記載、CSSを上書き保存更新する。(2010年11月現在の記載内容は以下)


#lightbox {
background-color: #eee;
padding: 10px;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
}
#lightboxCaption {
color: #333;
background-color: #eee;
font-size: 90%;
text-align: center;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
}
#lightboxIndicator {
border: 1px solid white;
}
#lightboxOverallView,
#overlay {
background-color: #000;
opacity: 0.5;
}
* html #lightboxOverallView,
* html #overlay {
background-color: #000;
filter: Alpha(opacity=50);
}


101125-06.jpgE lightbox.cssはコピーしてブログシステムのCSSに転記したので不要。lightbox.cssも消去する。

 残ったファイルは9個。

1.blank.gif
2.close.gif
3.expand.gif
4.lightbox_plus.js
5.loading.gif
6.next.gif
7.prev.gif
8.shrink.gif
9.zzoop.gif

101125-07.jpg101125-08.jpgF 本体ファイルlightbox_plus.jsをエディタで開き、


if (!anchor.getAttribute("href") || !rel.match('lightbox')) continue;


 を↓↓↓以下の様に書き換え上書き保存する。(上の一行を検索窓に入れれば一発で見つかる)


if (!anchor.getAttribute("href")) continue; if (!anchor.getAttribute("href").match(/.+(jpg|gif|png)$/i)) continue;


ーーーーーーーーーー
★ 2012年07月24日追記: 現在、一部のSeesaaブログサーバーでは上の書き換えでは作動しなく成りました。作動しない方の新しい書き換え方法は、コメントの”つるてん”さん情報から、以下への様に書き換えが必要です。(他のサーバーの方は上の書き換えでいけると思います。) 


if (!anchor.getAttribute("href")) continue; if (!anchor.getAttribute("href").match(/.+(jpg|gif|png)/i)) continue;


ーーーーーーーーーー

101125-09.jpg101125-10.jpgG 次に、lightbox_plus.jsの最下端に有る、以下の記載をご自分のサーバーの絶対パスに変更する。


Spica.Event.run(function() {
var lightbox = new Lightbox({
loadingimg:'resource/loading.gif',
expandimg:'resource/expand.gif',
shrinkimg:'resource/shrink.gif',
blankimg:'resource/blank.gif',
previmg:'resource/prev.gif',
nextimg:'resource/next.gif',
closeimg:'resource/close.gif',
effectimg:'resource/zzoop.gif',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
resizable:true,
animation:true
});
});


 この絶対パスとは、http://から始まる画像・スプリクトへのリンクURLの事であり、seesaaブログの場合は以下の様に成る。ご自分のサーバーに合わせて変更下さい。

 小生は、この最新版を http://jazz-scene.up.seesaa.net/ と言うサーバーに、新しいデレクトリ lightbox_plus を作り、その中にこのlightbox_plus一式をセットしているので、記載方法は以下の様に成る。

 通常の画像ファイルと同様な場所にそのままファイルをアップロードされても当然動く。この場合のURLは、一例を示せば以下の様に成る。

 因みに、小生は、zzoop.gifを使用していないので実際は空欄にしてある。(effectimg:'',)

 以上を変更し、上書き保存する。

101125-11.jpgH 以上のファイルをブログのファイルマネージャーを使い、オプション表示から新しいディレクトリ lightbox_plus を作り、其処に必要なファイル9個をアップロードする。

101125-12.jpgI ご自分のブログのデザイン/HTML編集を開き、</head><body>の上に以下の一行を追加し保存する。


<% /if -%>

<!-- lightbox_plus追加開始 -->
<script type="text/javascript" charset="UTF-8" src="http://jazz-scene.up.seesaa.net/lightbox_plus/lightbox_plus.js"></script>
<!-- lightbox_plus追加終了 -->

</head>
<body>


 また以下の2行


<!-- lightbox_plus追加開始 -->
<!-- lightbox_plus追加終了 -->


 は、説明行で後で追加が判る様に小生は記載、普通無くて良い。

 小生の場合、再編集した lightbox_plus.js を再圧縮したので、実際のファイルは lightbox_plus-min.js と成っている。JSファイルを圧縮したい方は、以下のURL.

※ JS圧縮サイト : http://yui.2clics.net/

 この場合、ファイルネームはlightbox_plus.js ⇒lightbox_plus-min.js と成るため、HTML編集の際にもこのファイル名を記載する必要がある。

101125-13.jpgJ seesaaブログの場合、設定/ブログ設定/最新の情報に更新を更新する。

K seesaaブログの場合、設定/ブログ設定/画像詳細ページ「表示しない」・別ウィンドウ原寸大表示が「表示する」にチェックが入っていれば、是で動く。

101125-14.jpgL 完成チェック下さい。動かし方は以下のサイト(使い方)。

★ jazz-scene.up.seesaa.netは、ご自分のサーバーに合わせ、適宜変更して下さい。

※「lightbox_plus」IE同一画面上の画像再拡大方法(使い方):
 http://m-jun.seesaa.net/article/167861313.html
※ seesaaブログに適用指示(rel="lightbox")不要のlightbox_plusを設置する方法:
 http://m-jun.seesaa.net/article/116655306.html
※ seesaaブログに適用指示(rel="lightbox")不要のlightbox_plusを設置:
 http://m-jun.seesaa.net/article/116180810.html

   (*^‥^*)」 イヨッ
この記事へのコメント
はじめまして。古い記事にコメントすいません。
私のブログに、こちらの記事を参考にして「lightbox_plus」を導入させて頂きました。ありがとうございます。
ですが、最近のseesaaの仕様の変更に(up.d)のせいか、
突然lightbox_plusが動作しなくなってしまいました。
どこか変更すれば、治るのでしょうか?
Posted by つるてん at 2012年07月23日 21:17
 つるてんさん、コメント有難うございます。

実は、小生のこのブログも先日から動きません。
是は、この記事に有る様なCSS内部に命令を書かずに、旧バージョンのままです。

※ SEESAAブログが叉も困った事に成った???

 http://m-jun.seesaa.net/article/279286269.html

 しかし、この記事にも有る様に、ブログによっては同じ内容で設置してある物でも動く物も有るようで、今少し様子をみています。

 このままですと、サーバーが違えば動く物も有ると成ります。何時も何か中の人はプログラム触ったり、サーバー内部触ったりとやられてるみたいで、今まで色々問い合わせしても明快な返答はえられません。

 記事投稿に置いても、記事投稿から返答コールあるまでが長くなりましたし・・・。投稿ミスも多くなりました。。

 もう少しして、このまま、一方が動いて、一方が動かないとなれば、何か解決方があるはずで、時間があれば触ってみたいと思います。すみませんが、もう少しお待ちくださいね。

 上手く行くかどうか判りませんが、また結果報告しますね。

 因みに、今でも動いているブログは以下。。

※ 星が好き・・・:
 http://cococore.seesaa.net/category/6245593-1.html#label-1

 今日見ても動きますね。。。

 ま(*^‥^*)」 イヨッ
Posted by manabe at 2012年07月23日 22:22
返信ありがとうございます!

原因としてはおそらく、今まで画像のリンクが<a href="http://ホスト名.up.seesaa.net/image/画像.jpg">となっていたのが、勝手に<a href="http://ホスト名.up.d.seesaa.net/ホスト名/image/画像.jpg?d=投稿時間?> に全て変わってしまってるところだと思います。そちらの動いてるブログはまだ変わってないようですので動作しているのだと思います。

なので今までlightboxをhrefタグの「ホスト名.up.seesaa.net/image/」にある画像に動作させてたのを、「ホスト名.up.d.seesaa.net/ホスト名/image/」にある画像にも動作するように書き換えれば良いんじゃないかなと思うのですがどうでしょうか。

私はJavaScriptの知識がゼロでその方法が検討もつかないので、お時間がある時にでも検証していただければ幸いです。教えて君で申し訳ありません。

それにしても編集画面で見ても「ホスト名.up.seesaa.net/image/」になってるのに、保存して見てみたら強制的に「ホスト名.up.d.seesaa.net/ホスト名/image/」に変わってるっておかしな仕様ですよね。
Posted by つるてん at 2012年07月24日 09:47
何度もすいません!
うちのブログにlightbox_plusが動作する記事としない記事、両方あることに気づきました。
動作しない記事
http://gush.seesaa.net/article/282456741.html
動作する記事
http://gush.seesaa.net/article/264535582.html
動作する記事はなぜかリンクが変わってないようですので、原因としては間違いないっぽいですね。
Posted by つるてん at 2012年07月24日 12:49
本当に何度もすいません。
もしかしたら.jpgの後にあるd=数字が怪しいかと思い、この記事にあるlightbox_plus.js書き換え部分の$を取ってみたら、動作しました!
他に良い書式があるのだとは思いますが
とりあえず私のブログの場合はこれで大丈夫そうです。
あとすいませんがこの連続のコメント、非表示のままだと助かります。
何か恥ずかしいので^^;
Posted by つるてん at 2012年07月24日 18:00
 コメント有難うございます。

 此方大阪は大変な猛暑、そして凄い湿度、昔に比べ本当にすぎしにくいです。

 コメントを承認、ブログ拝見している途中にコメントを頂きましたね(爆)。一度承認すれば再び表示を非表示にする事は出来ない構造の様で、すみませんがこのままにさせて下さい。

 何故かと言えば、問題を解決された旨、此方でも確認させて頂きました。実際に貴殿のブログで動作しない時と、改装後の状態をリアルタイムで確認させて頂きました。

 その、JAVA prg 素人が問題を解決するための方法論としての考察が素晴らしく、色々な事の参考となる記載と思います。

 其の為にすみませんが、このまま残させて下さい。何も恥ずかしい文章では無いと思います。。

 因みに、小生は丁度、貴殿文章にあるURLの画像を確認していたところです。改装中だったのですね、表示出来ると言うのが此方では確認出来ませんでした。

 ただ、現在は、画像が2つのURLからダウンロード出来る事を発見しました。其れは、貴殿サーバー画像で言えば、

・ http://gush.up.d.seesaa.net/gush/image/03-0c47f.jpg
・ http://gush.up.d.seesaa.net/image/03-0c47f.jpg
 ※ 此処でこのURLを押して見て下さい・・・。

 そう、2つのサーバーまたはURLのエミレートなのかどうかは不明ですが、現在はこのようになります。

 でも、書き換え部分の「$」を取る事で現在のところ一応は動作するのですね、素晴らしい発見と思います。早速、この事を上の記事に記載すると共に、小生も使わせて頂きますね。

 また、一度JAZZミュージシャンのプログラマーに「$」の意味を確認してみたいと思います。

 本当に”つるてん”さん、お疲れさまでした。深謝。

   (*^‥^*)」 イヨッ
Posted by manabe at 2012年07月24日 19:02
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/169264990
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック

デザインにも手を入れています。
Excerpt: ワークスのページが2009年の「記憶の種」以降手を入れてないという状況になってしまっているので、現在作成中です。それにともない、増えた項目に対応するためデザインにも若干の手を入れています。最初のが20..
Weblog: ふくらむ-ブログ
Tracked: 2012-04-30 19:42

このブログの人気記事 (直近24時間)
    最 新 記 事