画像の拡大表示に、LightBox(系)のライブラリを使うのが定番になってきました。というか、当たり前になってきました。仕事でも、「LightBox使ってください」と言われることが増えてきていますし、こちらから提案する場合も多いです。
仕事で、「PREV/NEXTボタンを常に表示させてください」という要望がありました。「PREV/NEXTボタン」というのは、複数の画像をLightBoxで表示する場合、前/次の画像にナビゲーションするボタンのこと。画像にロールオーバーしたときのみ表示される場合が多いです。
今回の案件で使用しているライブラリ(プラグイン)は、jQuery lightBox plugin。jQueryで動作する、元祖LightBox(prototype.jsの)とほぼ同じデザイン・動作のプラグインです。
要望をいただいたとき、「CSSで、:hoverで表示されているものを常に表示させればいいんだよね、簡単かな」と思いました。が、CSSのソースを見てみたら、:hoverの記述なし。JavaScriptのソースを見てみたら、PREV/NEXTボタンに関するコードがあちこちに。「あれ、これはソース追いかけて試行錯誤しないとダメかな…」と、ちょっと構えてました。
が、意外とあっさり解決。ソースを追いかけているうちに、「fixedNavigation」という値が処理を分けていることに気付いたからです。その「fixedNavigation」をソースで辿ってみると…
// Configuration related to navigation
fixedNavigation: true, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
ナビゲーションを固定(fixed)するかどうかの設定が可能でした。デフォルトでは「false」になっているので、「true」に変更。これで、PREV/NEXTボタンを常に表示させることができました。