Lightbox+を使って画像をその場でポップアップ

このブログに貼り付けられた画像は、クリックすると新しいタブ(ウィンドウ)で原寸大で表示されるようにしていたのですが、最近はページ遷移せずに、その場で拡大画像をポップアップで表示するのが流行っているみたいなので、Lightbox+というのを使って実現させました。

オリジナルの Lightbox と比べると、ウィンドウより大きい画像を表示する際に、ズームができるという特徴があるみたいです。

このモジュールを入れるにあたり、適用させたいイメージのリンクタグに、rel="lightbox" という属性を追加しないといけないのですが、Nucleusでは、/nucleus/libs/BODYACTIONS.php の 90行目 辺りで、画像を表示するためのタグを作っているので、ここを書き換えて対応させます。
僕はこんな風にしています。

$vars['image'] = '<a href="' . $vars['link'] . '" target="_blank" class="image" rel="lightbox"><img class="media" src="' . $vars['link'] . '" width="' . $width . '" height="' . $height . '" alt="' . $vars['text'] . '" title="' . $vars['text'] . '" /></a>';

ポップアップさせずに画像だけを原寸大で表示させたいという方は、画像をホイールクリックで開いて下さい。
そうすると、今まで通り別タブ(ウィンドウ)で画像だけが表示されます。

■ 追記

ホイールクリックしたときに新しいタブで開いてくれるのは Firefox だけでした。:P
あと書き忘れてたんですけど、ズームさせるには、まず画像をクリックしてポップアップさせて、左上のアイコンをクリックしてから、ホイールを回して下さい。

コメントを残す