BootstrapでLightbox風表示を実現する「Bootstrap Lightbox」の簡単な使い方

BootstrapでLightbox風の表示を実現するには「Bootstrap Lightbox」というプラグインを利用するのが便利です。
ですがこちらのプラグインの表示方法は、既存のLightboxに触れていたり、複数の画像がある場合はとても面倒に感じます。
そこで下記のようにJavascriptを追加することで、表記がグンと楽になります。

Bootstrapファイルに加えて、上記サイトからダウンロードした下記のファイルを読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="bootstrap-lightbox.min.js"></script>

<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap-lightbox.min.css" rel="stylesheet">

Javascript

// Custom lightbox event binding
$('[data-toggle="lightbox"]').on('click', function(e){

    // Get the target lightbox id
    target = $(this).attr('href');

    // If the lightbox doesn't exist, create it
    if (!$(target).length) {
        src = $(this).children('img').attr('src');

        $('body').append(
            '<div id="' + target.slice(1) + '" class="lightbox fade"  tabindex="-1" role="dialog" aria-hidden="true">' +
                '<div class="lightbox-dialog">' +
                    '<div class="lightbox-content">' +
                    '<img src="' + src + '" width="100%"/>' +
                    '</div>' +
                '</div>' +
            '</div>'
        );
    }
});

HTML

<a data-toggle="lightbox" href="#openLightbox01">
<img src="sample01.png" alt="" class="thumbnail" />
</a>

<a data-toggle="lightbox" href="#openLightbox02">
<img src="sample02.png" alt="" class="thumbnail" />
</a>

参考：Simple A HREF open #57