どこでもLightbox Plus - さしみしょうゆ２．０
どこでもLightbox PlusCommentsAdd Star
はてブ情報 はてブに登録 はてブ数 【その他】
■追記
Going My Way: サムネイルをクリックするとlightbox効果で画像を表示してくれるGreased Lightbox
http://kengo.preston-net.com/archives/002867.shtml
これのほうが高機能っぽい、しかも鯖に設置とか不要。
インターフェースは結構違ってるから作ったものがまったく無意味ってことは無いだろうけど。。。orz
インターフェースはLightboxPlus作者さんの仕事で、俺のがなんかしたわけじゃないしｗ
■追記前の部分
『Greasemonkey』でどこでも『あれこれポップアップ』＠あの頃のように…
http://harmony.blog5.fc2.com/blog-entry-236.html
に影響を受けて、どこでもLightboxを作ってみた。ほとんど既存のコードを貼り付けてきただけで、「作った」というレベルじゃないけど。。（あえて言うなら組み立てた？）*1
以前から他のサイトもLightbox入れればいいのにと思ってたけど FireFox + Greasemonkey で、わりと簡単に実現できた。これを入れれば画像へのリンクはなんでもLightboxで表示できます。*2
ただしGreasemonkeyを利用してるので、対応ブラウザはFireFoxのみで、もちろんプラグインとしてGreasemonkeyのインストールが必要。さらに、Lightboxは外部から読み出す必要があるので、インターネット上に配置しないとだめ。*3
試用のため、うちに設置してあるLightboxを使用するように設定したものを置いておく。
FirefoxとGreasemonkey入れてこのスクリプトを導入すると、とりあえず使えるようになるはず。試用専用
動作確認はこことかいいかも。フォクすけかわいい。
ここに来る人は少ないから、たぶんこれをそのままつかっててもらっても問題はないと思う。だけど、もし鯖への負荷が大きいようであれば使えないようにするかもしれない。そんなわけで、それぞれ自分で設置するのを推奨。
コードは下のほうにあります。使用する場合は各自「http://lightbox設置したURL」部を自分でLightbox設置したURLに書き換えてください。
参考にさせてもらったサイト
* 『Greasemonkey』でどこでも『あれこれポップアップ』＠あの頃のように…
http://harmony.blog5.fc2.com/blog-entry-236.html
HTMLヘッダ部にlightboxのスタイルシートとスクリプトを追記するのはこちらで紹介されてたものをそのままパクリです。
* Script 各種 - パソコン遊戯
http://pasokon-yugi.cool.ne.jp/script/#USERJAVASCRIPT
リンク部分に「rel="lightbox"」を追記する部分はこちらで公開されているスクリプト「Add target="_blank"」をほぼそのままパクリです。。
* JavaScript例文辞典：右から指定文字数抜き出す
http://www.openspc2.org/reibun/javascript/string/004/index.html
リンク部分に「rel="lightbox"」を追記するのはいいけど、最初は画像以外の物にも追記されてひどい目にあったので、こちらを参考にさせてもらってリンク先の拡張子でフィルタしました。
インスパイヤしすぎか。。。全部無断なので、怒られたらすぐ公開停止する！
// ==UserScript==
// @name DokodemoLightBox
// @namespace
// @description
// @include *
// ==/UserScript==
(function() {
if(document.all)
document.createStyleSheet('http://lightbox設置したURL/lightbox.css');
else if(document.styleSheets){
var nLink=document.createElement('LINK');
nLink.rel="StyleSheet";
nLink.type="text/css";
nLink.href="http://lightbox設置したURL/lightbox.css";
var oHEAD=document.getElementsByTagName('HEAD').item(0);
oHEAD.appendChild(nLink);
}
var mybody=document.getElementsByTagName("head").item(0);
myjs = document.createElement("script");
mybody.appendChild(myjs);
myjs.setAttribute("src","http://lightbox設置したURL/spica.js");
myjs.setAttribute("type","text/javascript");
var mybody=document.getElementsByTagName("head").item(0);
myjs = document.createElement("script");
mybody.appendChild(myjs);
myjs.setAttribute("src","http://lightbox設置したURL/lightbox_plus.js");
myjs.setAttribute("type","text/javascript");
})();
(function() {
var AnchorAttr = document.body.getElementsByTagName('A');
for(i=0; i < AnchorAttr.length; i++){
str=AnchorAttr[i].href.substr(AnchorAttr[i].href.length-3,3); if( str=='jpg')
AnchorAttr.item(i).rel='lightbox1';
if( str=='JPG')
AnchorAttr.item(i).rel='lightbox1';
if( str=='gif')
AnchorAttr.item(i).rel='lightbox1';
if( str=='GIF')
AnchorAttr.item(i).rel='lightbox1';
if( str=='png')
AnchorAttr.item(i).rel='lightbox1';
if( str=='PNG')
AnchorAttr.item(i).rel='lightbox1';
if( str=='bmp')
AnchorAttr.item(i).rel='lightbox1';
if( str=='BMP')
AnchorAttr.item(i).rel='lightbox1';
};
})();
*1 : しかも、Javascriptの知識はほぼ皆無。プログラムの知識もネット上のハウツーをあれこれ読んだだけなんで、何やってるのかはほとんど理解してない。でも、とりあえず動くようになったので公開ｗ なんかおかしなところがあったら指摘してもらえるとうれしい。
*2 : うちではLightbox Plus使用してます。たぶん本家LightboxJSにも簡単に対応可能
*3 : ローカルに配置しても動くようにもできるかもしれないけど。。俺には無理だったｗ
