jQuery lightBoxで、PREV/NEXTボタンを常に表示する。

画像の拡大表示に、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ボタンを常に表示させることができました。

This entry was posted in ホームページ制作メモ and tagged . Bookmark the permalink. Follow any comments here with the RSS feed for this post.

コメントをどうぞ

Your email is never published nor shared. Required fields are marked *

*

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>