画像を拡大表示する Swipebox

Blog を書いていたりすると写真をいっぱい配置して華やかにしたいという気持ちはあるのだが、サムネイルの状態であまり大きく配置すると画面と文章が圧迫されて読みにくくなってしまうし、a タグで元画像にリンクするようにしても画面遷移をするので思考が中断されてしまう嫌いがある。

大体このような問題は JavaScript, 昨今では jQuery プラグインで解決されるのだが、 「画像を拡大する」というお題目の jQuery プラグインはいっぱいあってどれを使えばいいのかよくわからない。

そんなわけで筆者も幾つか探してみたのだが、「機能は少なめだが簡単に実装でき、且つスマホで見た時にスワイプできる」という触れ込みの Swipebox という jQuery プラグインを採用してみた。

導入

既に jQuery を使っていれば非常に簡単だった。 まず Swipebox 公式サイトの Download リンク から jQuery プラグインをダウンロードする。ダウンロードした zip ファイルを解凍し、中の source フォルダをそのままコピーする。

swipebox.css の中でアイコンのリソースを参照しているので、ディレクトリ構成を変更すると表示できなくなってしまう。source フォルダをそのままコピーして使えば問題ないはず。どうしても変えたいなら CSS を直接いじると良い。 実際に Swipebox を動作させた時に画面下部のナビゲーションバーにアイコンが正しく参照できていれば表示されるので確認する。

巷の jQuery プラグインと同様に jQuery を読み込んだ後にライブラリの JavaScript を読み込んでやれば良い。付属の CSS も必要なので同時に読み込む。以下の様な感じだ:

<script type="text/javascript" src="/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/swipebox/jquery.swipebox.min.js"></script>
<link rel="stylesheet" type="text/css" href="/swipebox/swipebox.css" />

そして jQuery の例の document.ready イディオムで Swipebox の機能をコールする:

$(function() {
    $('.swipebox').swipebox();  // class="swipebox" 属性のものに対し Swipebox プラグインの処理を実行
});

肝心のサムネイル画像の方は、a タグで囲った img 属性として普通に書けば良いようだ。 swipebox の class 属性は a タグの方に書く。以下のようになる:

<a href="(拡大表示したい画像)" class="swipebox" title="(画像のタイトル)">
    <img src="(サムネイルの画像)" alt="(画像のタイトル)"/>
</a>

swipebox の class 属性を持つ要素を複数配置すれば勝手にグルーピングして拡大表示時にスワイプできるようになる。 個別に細かくグルーピングもできるようだ。

凝った使い方

Swipebox 公式 にも書いてあるのだが、一応紹介。

Use "rel" Attribute (rel 属性を使う)

You can add a rel attribute to your links to seperate galleries. (分割されたギャラリーへのリンクの為に rel 属性を用いる事ができる)

まず Swipebox はデフォルトでそのページの swipebox class 属性を持つ画像を全てスワイプ表示の対象にするのだが、swipebox class 属性を持つ a タグに対し rel 属性を付与することで画像のグルーピングを行うことができる。例えば下記の例だと image1.jpg か image2.jpg を押した時は image1.jpg と image2.jpg のみのギャラリーが表示され image3.jpg か image4.jpg を押した時はそれらのみとなる。

<!-- Gallery 1 -->
<a rel="gallery-1" href="big/image1.jpg" class="swipebox">
    <img src="small/image1.jpg" alt="image">
</a>
<a rel="gallery-1" href="big/image2.jpg" class="swipebox">
    <img src="small/image2.jpg" alt="image">
</a>
<!-- Gallery 2 -->
<a rel="gallery-2" href="big/image3.jpg" class="swipebox">
    <img src="small/image3.jpg" alt="image">
</a>
<a rel="gallery-2" href="big/image4.jpg" class="swipebox">
    <img src="small/image4.jpg" alt="image">
</a>

###Youtube support (YouTube をサポートする)

Simply paste a youtube video URL in your href attribute. The script will automatically check if it's a Youtube URL and open the video in the swipebox. (単純に href 属性に YouTube の URL を貼り付ける。Swipebox は自動的に YouTube の URL かをチェックし、Swipebox 内で動画を開いて表示する)

swipebox-video class 属性を使うみたいだ。

<a class="swipebox-video" rel="youtube" href="http://www.youtube.com/watch?v=XSGBVzeBUbk">My Videos</a>

###Load slides dynamically (動的にギャラリーを読み込んで表示する)

You can set your gallery dynamically by passing an array object to the swipebox. (Swipebox に対し JavaScript 配列を指定することで動的にギャラリーを生成することができる)

例えばページ内に画像を表示してないが何かのイベントで決まった画像群のギャラリーを表示したい時などに有用そう。

// id = 'gallery' の要素を押下時に動的にギャラリーを生成し画面表示する
$("#gallery").click(function(e){
    e.preventDefault();
    $.swipebox([
        {href:'big/image1.jpg', title:'My Caption'}, 
        {href:'big/image2.jpg', title:'My Second Caption'}
    ]);
});