Lightbox JS v2.0 導入しつつ改造

はじめまして。
v2.0の改造版を探していて辿りつきました。
ちょこっとだけ改造して使わせて頂きました。
ありがとうございます。

from TAN : 2006-06-22 14:30

TANさん
しょぼい改造で恐縮してしまいますが、遠慮なく使ってください。
LightBoxの作者さまに感謝です。

from Fsiki : 2006-06-23 1:04

はじめまして！

大きい画像がはみ出しちゃうのがイヤで、改造版を探していてここにたどり着きました。
めちゃくちゃいい感じですね。

私は、PukiWikiMod という XOOPSのWikiモジュールを配布しているのですが、ぜひこちらの改造を取り入れて配布したいと思っているのですが、ライセンスは、「オリジナルの lightbox JS と同じ」ということで、よろしいのでしょうか。

よろしくお願い致します。

from nao-pon : 2006-06-26 10:13

nao-ponさん、はじめまして。
Lightbox JSはCreative Commonsの2.5 Licenseに帰属していますので、とくにそれ以上のライセンスはありませんし、主張することもできませんので使っていただいて問題ありません。

拙い改造ですが、何卒よろしくお願いします。

from Fsiki : 2006-06-26 22:35

Fsiki さん、早速のお返事ありがとうございます。
ライセンスの件了解しました。
----
こちらのサイト、綺麗にまとまっていてカッコよくて、見やすいですね。
今風に言うと「カッコ見やすい」かな。
色々と参考にさせていただきます。今後ともよろしくお願い致します。

from Anonymous : 2006-06-27 8:24

light boxに大変興味がありたどり着きました。
うちだマンと申します。

light box ！かっちょいいですよね！

愚問かもしれませんが、一つだけ質問させてください。
light box内のレイアウトも簡単に変えられるのでしょうか？
今は上部に画像、下にテキストとなっておりますが
例えば、左側に画像右側にテキストとか？

よろしくお願いします！

from うちだマン : 2006-09-13 14:47

うちだマンさん
はじめまして。

Lightboxのレイアウトを変更することは可能だと思います。
実際細かく触っていないのではっきりしたことは言えないのですが、CSSだけでもある程度は可能だと思います。
更に、直接JavaScriptをいじり回せば要素の入れ子構造などを変更できるので、自由にカスタマイズできるかと思います。

「こうすればこうなる！」みたいな回答じゃなくて申し訳ないです。

一応参考までに。

from Fsiki : 2006-09-15 3:31

はじめまして。いきなりの質問失礼いたします。

JavaScriptに詳しそうなので、
解ればご回答いただけないでしょうか。

Flashから起動しようとする場合、「javascirpt：」タグを利用しなければなりません。

<a>タグをクリックした時に呼び出される関数
もしくは、javascript:()を利用した呼び出し方法を
教えていただけないでしょうか。

from 2ADV : 2006-10-25 20:52

2ADVさん、はじめまして。
お返事遅くなってしまい申し訳ありません。

ご質問の件ですが、今までJavaScriptとFlashの連携操作をしたことがないので、実際のところさっぱりわかりません。

<a href="javascript:xxxxx">でFlashに何らかの操作を加えるということならば、下記のページあたりが参考になるかと思います。(実際試したわけではないのでご期待に添えるかわかりませんが…)

• Flash / JavaScript Integration Kit の使い方 - yoshiweb.NET

JavaScript→Flashの連携はかなり面倒なようです。

逆のFlash→JavaScriptの場合は下記のような感じでいけるみたいです。

getURL("javascript:xxxx")

あまりお力になれず申し訳ないのですが、参考までに。

from Fsiki : 2006-11-01 4:21

はじめまして。カッコ良いサイトですね。MTネタ調査中に、こちらのサイトに漂着しました。

恐れ入ります、どなたかMT4.1で実装された方はいらっしゃいますか？注意点などありましたら、ご伝授願います。MT4.1ネタが少なく、私にはプログラムの知識が無いので・・・・コピペの人生です。(涙）でもカッコ良くしたいです。

よろしくおねがいします。

from flan : 2008-02-01 11:31

Mt4.1でもできました。お騒がせしました。

from flan : 2008-02-02 21:43

はじめまして、画像がはみ出るのを解消するための方法を探してたどり着きました。
オリジナルを開くボタンもCloseボタンも凝っていてステキですね。

要望なのですが、オリジナル画像をDownloadするという機能（ボタン）の追加は可能でしょうか？
自作壁紙の配布サイトを作ろうと思っているのですが、そういう機能があったらステキだなと思います。
この記事の掲載から１年以上経ち、新しいバージョンも出ているので、再びLightboxを検証していただけたらと思います。

from AR : 2008-03-09 21:45

はじめまして。
Lightboxを導入したは良いが、rel="lightbox"の自動挿入、大きい画面の場合の見づらさから困っていたのですが考えていたことと全く一緒でして、使わせていただきました。
ありがとうございます。

from 義経 : 2008-05-29 18:12

lightboxで拡大画像の位置を上にもって行きたくどのようにしたらよいか教えてくださるようお願いいたします。

from マサユキ : 2008-07-21 12:37

はじめまして。
大きい画像の表示でつまづいていました。
かっこいいCLOSEボタンとともに
使わせていただきました。
ありがとうございます。

from ko : 2009-01-07 0:19

皆様
拙い改造ですが御利用いただきありがとうございます。

マサユキさん、
画像位置を変えるには、
ソース285行目の位置指定部分を修正することで可能となります。

var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 30)

↓

var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 30) - 30;

よろしくお願いいたします。

from Fsiki : 2009-01-31 10:37

初めまして。
綺麗なサイトですね。

Lightboxｖ２．０を使おうと思っておりますが、
画像リンクの時のリンクの時に枠が付いてしまいます。
枠の消し方を教えていただけますか。

クローズボタン
使いたいと思いますが、CSSを書き換えて、画像をアップすれば
いいのでしょうか？
画像の指定をXXXX.gifにすればいいですか
現在は、正規版のままです。

from HARU : 2009-02-20 11:50

HARUさん、はじめまして
おそらく画像のリンクに枠が付いてしまう件は以下のスタイル指定で解消すると思います。

img {border:none}

ボタンの書き換えですが私がカスタマイズした方はちょっとややこしいので、
下記の画像からボタン部分を切り出して、正規版のボタン画像と差し替えた上で、
http://www.fsiki.com/image/lightbox/buttons.png

lightbox.jsの中にある images/closelabel.gif の指定を切り出した画像のファイル名に書き換えるのが一番簡単だと思います。
（ただし本家同様、ボタンにマウスオーバーした際に画像の切り替えはできません）

from Fsiki : 2009-02-22 6:01

リンクに枠が付いてしまう件は、解決しました。
ありがとうございます。

クローズボタンですが、ボタンにマウスオーバーした際に画像の切り替えるようにするには、サイトにアップして頂いてる。
ｃｓｓ/js/画像をダウンロードして、新しくCSS差し替えてｊｓと画像えをimagesにアップロードすれば、ボタンにマウスオーバーした際に画像の切り替えできますか。

その時正規のｊｓは、 imagesから削除すればいいですか。

すみません。
突っ込んだ質問してしまってm(__)m

from HARU : 2009-02-22 9:26

HARUさん
以下にサンプルを作成してみました

http://www.fsiki.com/archive/sample/lightbox/index.html

このサンプルで使用しているのは現在本家で公開されているlightbox2です。
これに対して、以下の画像ファイルを画像ディレクトリにアップし

http://www.fsiki.com/archive/sample/lightbox/images/closelabel_custom.gif

CSSファイルに修正を加えています。

http://www.fsiki.com/archive/sample/lightbox/css/lightbox.css

JavaScript自体には手は加えていません。
Windows IE6、7、Firefox3、Mac Safari3で動作確認しました。

ご確認よろしくお願いします。

from Fsiki : 2009-02-22 14:07

わざわざ　スタイルシートを作って頂いて　
ありがとうございます。

CSSを書き換えました。

ボタンの画像も指定の場所にアップロードしました。
/images/closelabel_custom.gif
/images/closelabel.gif

CSSは機能しています。
でも・・オーバーの時の/images/closelabel.gif
画像が消えています。

CSSの何処の場所に書き込めばいいですか？

もう少しですのでよろしくお願いします。^_^;

from HARU : 2009-02-22 17:08

無事できました。
ありがとうございます。
http://www.fsiki.com/archive/sample/lightbox/images/closelabel_custom.gif
書き換えるだけなんですね。

ボタンのデザインの変更は、できないのでしょうか？
方法があるのでしたら、教えてもれえますか
お願いします。

from HARU : 2009-02-23 1:39

無事できたようで良かったです。
ボタンのデザイン変更に関しては、別途ボタン画像を用意していただき、
lightbox.cssの#bottomNavCloseに対して背景指定している部分で、
幅、高さを画像に合わせて変更してください。

今回はマウスオーバー時と通常時のボタン画像をひとつの画像で位置をずらして作成しましたが、ボタン画像を別々に作成し、

#imageData #bottomNavClose:hover {
background-image: url(../images/closelabel_custom_2.gif)
}

のような形で指定してあげれば、別々の画像を使用することが可能です。

from Fsiki : 2009-02-23 2:03

ありがとうございました。

バッチリできましたよ。^^

丁重に教えて頂いてホントに良かったです。
今後もよろしくおねがいします。

from HARU : 2009-02-23 11:19

旧Ver. Lightbox JS を使っています。
2008-07-21 の方と同様の質問なんですが、旧Ver.では

var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);

となっていて 一行目に - 35 を加えてみたりしたものの上手くいっているのか （キャッシュが邪魔して） 確認できません。 現在は 元ソースに戻しました。

JavaScript + Ajax 実践サンプル集 - サムネイルビューアー
http://jsajax.com/ThumbnailViewerArticle727.aspx

にあったのでテストしてみたところ、ちょっとだけ位置がずれましたが、合っているのか判断できませんでした。

長めの画像があるブログ記事は
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-65.html

などです。もし判かるようなら教えていただけるとありがたいです。

from paruparu : 2009-03-11 23:26

先日コメントした者です。旧バージョンで

var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
↓
var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 20) - 20;

としたところ、意図したように表示できるようになりました。
これであっているのかは不安もありますが、とりあえず出来たので。。。

from paruparu : 2009-03-13 21:31

皆様お返事遅くなってしまい申し訳ありません。

HARUさん
改造うまくいったようで何よりです。
こちらこそよろしくお願いします。

paruparuさん
MTのフィルタに引っかかって最初のコメントが公開されないようになっていましたが表示されるように設定させていただきました。

差しあたって問題ないとのことなので良かったです。
お返事が遅くなり力になれず申し訳ない限りです。

from Fsiki : 2009-03-14 20:48

はじめまして。
こちらの「Lightbox JS v2.0（改）」を使わせて頂いております！

こちらに質問していいことなのか、とても迷いましたが、もし分かるようなら教えて頂けませんか。。。？

「Lightbox JS v2.0（改）」を使っている同じページで別のJavaScriptもいくつか利用しているのですが、これらがコンフリクトを起こしているようで、上手く動きません。。。

他に利用しているスクリプトは小粋空間さんの「追記文章の折りたたみ Web2.0」や「Accordion によるサイドメニューの折りたたみ」なのですが、「Lightbox JS v2.0（改）」を導入する前は

http://yadokari.yakushima-nature.jp/2009/03/post.php

のように特に問題なく、折りたたみ系は動いていたのですが、「Lightbox JS v2.0（改）」のスクリプトを入れると、

http://flower.yakushima-nature.jp/2009/03/post-1.php

のように折りたたみ系のスクリプトがうまく動きません。。。（特にページの最後で使っているサイドメニューの折りたたみ）

コンフリクトの原因は何だと思いますか？
こちらに質問するようなことではないと思うのですが、分かりましたらご教授願えませんでしょうか。。。
よろしくお願いします。

from しげる : 2009-04-06 10:02

しげるさん、はじめまして

ページを確認させていただきました。
エフェクト用のscriptaculous.jsやprototype.jsが異なるバージョンで複数読み込まれているようです。
もしかするとこれが原因かもしれません。

正常に動作しているページでは既にprototype.jsとscriptaculous.jsが読み込まれているようなので、
lightbox.jsだけ読み込めばLightboxは機能すると思います。
ぜひ試してみてください。

from Fsiki : 2009-04-11 6:44

度々質問で申し訳ありません。
Lightboxを使っている 元のテキストや画像のアンカー に下線（border）を付けているのですが、Lightboxで表示すると a:visited は反映されません。 これは当然なことなのかもしれませんが、通常は（Lightbox を使わなければ） a:visited の状態になるので、Lightboxで表示した場合もこれが反映できるようにならないのかな...と。
判りにくい文章で申し訳ありませんが、もし方法をご存知でしたらと思い質問させていただきました。

from paruparu : 2009-04-15 22:31

paruparuさん

これは、たとえば下記のようなURLの画像でLightboxを使っているとして、

http://www.example.com/hoge.jpg

リンクをクリックしてLightboxが起動した場合、実際リンクのhrefに移動しているわけではないので、
ブラウザが認識せずにa:visitedが効かないのではないかと思っています。
（直接画像のURLを叩いた場合はa:visitedが効くはずです）

恐らくこればっかりは、ちょっと難しいかなというのが率直な感想です。
Lightboxで画像を表示させる処理の中に、
「iframe内にダミーで画像を読み込む」見たいな処理を入れてあげると効くようになるかもしれません。
（実際に試したわけではありませんが）

お力になれず申し訳ありませんです。

from Fsiki : 2009-04-18 13:50

Fsiki さん、お忙しい中 回答ありがとうございました。
やはり、こればっかりは仕方がないということですよね。「iframe内にダミーで・・・」 というのは、試してみたいけど 私の実力では多分無理だと思うので。。。 素直に諦めます。

ところで、こちらのLightbox ブラウザのzoomで拡大表示している場合でもきちんと画面中央に表示されるようになっているんですね！

通常はこのバージョンだと下の方にずれるようだし、私の使っている旧バージョンでは右にずれます。 改めて 「凄いなぁ」 と。 お年寄りにも優しい!? Lightboxですね！

from paruparu : 2009-04-19 0:12

Fsiki様
はじめまして
できれば教えていただきたいのですが・・よろしくお願い致します。
Lightboxのtitleの文字をクリックすると他のページにハイパーリンクする設定方法を探していますが、なかなか探し出せないです。
お分かりになるようでしたら教えてください。
よろしくお願い致します。

from tetsuya : 2009-08-02 15:17

自己解決いたしました。
ご迷惑をおかけいたしました。

from tetsuya : 2009-08-02 23:51