Lightbox plusのオプションの設定が反映されない

Question

お助けください。Lightbox plusに関するご質問です。

Lightbox plus
http://serennz.sakura.ne.jp/toybox/lightbox/?ja

上記をホームページに設置しました。ポップアップの設定をCSSにてカスタマイズしたのですが、jsのほうで設定されているらしく、私の知識では思い通りに行きません。jsにはカスタマイズできるオプションらしき箇所があるのですが、そこに設定した内容が反映されません。

ご指示頂きやすいよう（初めて）JsBinにて組んでみました。
http://jsbin.com/qunuso/edit?js,output

（1）右上のクローズボタンを他のボタンと同じく、写真の上にカーソルが乗った時だけ表示したい。
（2）PREVボタンとNEXTボタンと枠の間に隙間が空く（初期設定では9pxの枠を7pxにした分隙間が空いてしまいました）
（3）ポップアップの左右のマージンがわずかに違うのを直したい（これは初期状態からのようです）
（4）ポップアップの際に、上下左右の長い方の辺にあわせてかなりギッチリと入ってしまうのですが、上下左右にほどよくマージンを持たせたいです。

下記にスクショに書き込みました。
http://screenshot.net/e2g4vi4.jpg

2日悩んだけれどだめでした。お詳しい方、お知恵をお貸しください。

Answer 1

あまりコード理解せず適当にやってみました

http://jsbin.com/pikidigoza/edit?js,output

結果はそれっぽくなってますが どこかに影響でてるかもしれないです
というかきっとでてるはず
参考程度にしてください

Lightbox plus なんて古いものより新しい Lightbox 2 のほうがカスタマイズ面はいいのかもしれないです

Comments

[mimimax]

ありがとうございます。あげていただいたjsbinすごいです！。このようにしたかったのです。まだ自分の作ったものに反映させていないのですが、jsbinを見させていただいて組み込んでみようと思います。 Lightbox 2も考えたのですが、自分のイラストを載せるページを作りたく、細部ズームできるLightbox plus を選びました。

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

Answer 2

眠たい状態で見て速攻分かる程度のアドバイスを。

＞（1）右上のクローズボタンを他のボタンと同じく、写真の上にカーソルが乗った時だけ表示したい。
JS無しでも付いてるIDとCSSのホバーの条件で何とかなりそうな気がしますが 気のせいですかね。
当然JSで簡単に実装できますが……
＞（2）PREVボタンとNEXTボタンと枠の間に隙間が空く（初期設定では9pxの枠を7pxにした分隙間が空いてしまいました）
まずmarginですが「9px」でソース内検索したらすぐ該当箇所出てきます。
書き換えればいけるかと。
というより外部から変更反映される作りにこれなってるんですかね？
流しでざっと見た感じ汎用性含め、色々微妙な気がしますね
セミコロン省く記法も個人的には気になります
あとグローバル汚染してないですかね？

もっと使い勝手いいの使うか、書き捨てでサイトに特化したの書くのが一番早いような……
凄い乱雑な文で申し訳ないです。

Comments

[mimimax]

いえいえ、お眠い時間帯にありがとうございます。
いろいろお気付きになった部分、ご指摘いただきありがとうございました。jsbinに書いてみたところ、いろいろ赤い文字のエラーは出てまして気になっておりました。サイトに特化したものを書ける知識はないので、ご指示の部分試させていただきます。
『グローバル汚染』という言葉も初めて知りました。勉強になります。
ありがとうございました。