Home > WEB & DEV > NextGen Gallery + Lightbox

NextGen Gallery + Lightbox

ESQUISSEではWordPress用のGallery Plugin “NextGen Gallery“を使っています(Thanks, Alex!).

NextGenは写真の拡大表示をデフォルトでTickBoxというライブラリを用いてやっているのですが,
この度似た様なスライドショーライブラリーがたくさんあることに気がつきました.
(そういえばNextGenのOptionにも設定項目があった様な…)
Ref : Lightbox.js のような写真のスライドショーするライブラリ沢山

というより元祖のそれがLightBoxなのでした.
プログラムサイズが大きくロードに時間はかかるのですが表示の仕方が気に入ったのでこちらに切り替えてみました.

  1. Downloadしたlightboxを適当な場所に置く
  2. lightboxの使い方に従い,自分のWP Templateとかwp-blog-header.phpを書き換える(どこがベストプレイスかは知らない…).自分の場合はlightboxというフォルダをルート直下に作ったので

    Java Script

    <script type="text/javascript" src="/lightbox/js/prototype.js"></script>
    <script type="text/javascript" src="/lightbox/js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="/lightbox/js/lightbox.js"></script>

    Style Sheet

    <link rel="stylesheet" href="/lightbox/css/lightbox.css" type="text/css" media="screen" />
  3. closelabel.gifがきちんと読み込める様にlightbox/js/lightbox.jsをちょっと書き換える.

    Line 65付近

    var fileLoadingImage = "/lightbox/images/loading.gif";
    var fileBottomNavCloseImage = "/lightbox/images/closelabel.gif";
  4. 最後にNextGen GalleryのEffectをThickboxからLightboxに変更.(Gallery>Option>Effects)

LightboxはThickboxと比べてやや大きめなスクリプトの様なので,ダウンロードが終わらないうちに焦って写真を開くとうまく動いていない様に見えます.最初,設定失敗したかと思いました.

Tags: ,

Comments:0

Comment Form
Remember personal info

*
To prove that you're not a bot, enter this code
Anti-Spam Image

Home > WEB & DEV > NextGen Gallery + Lightbox

Search
Feeds
Meta

Page Top