レスポンシブWebデザインのライトボックス(画像拡大表示)

「すぐ使えるCMS」にライトボックスを導入して、サムネイル画像をクリックした時にホームページ上で画像を拡大表示する方法をご紹介します。

ライトボックスの種類

「ライトボックス」は、サムネイル(サムネイル、縮小版)で表示されている画像を、同じWebページ上で拡大表示する方法です。ポップアップウィンドウの動作に近いですが、JavaScript と CSS を利用して表示を調整します。このため、実サイズと異なるサイズでも拡大画像の表示が可能です。

この動作の事を「ライトボックス(lightbox)」と呼びこのためのツールはたくさんありますが、このページでは、以下のURLで公開されているレスポンシブWebデザインのライトボックスの使い方を紹介します。

Responsive jQuery Lightbox Plugin(外部サイト)

レスポンシブWebデザインのライトボックスとは

ライトボックスは画像を拡大しますが、PC画面で適当な拡大サイズと、スマートフォンなどの小さい画面で適当な拡大サイズは異なります。スマートフォンがまだ主流で無かった頃には、画像を適当な大きさに調整しておいた上で固定サイズで表示するライトボックスが主流でしたが、これだとスマートフォン等小さな画面では見にくくなってしまう場合がありました。

一方、レスポンシブWebデザインのライトボックスは画面(ブラウザのウィンドウ)に収まるように画像サイズを調整して表示してくれます。最大表示サイズは画像のピクセルサイズです。

モバイルでライトボックスが不要な場合

なお、細かい点を見せたい商品写真などの場合、スマートフォンなどの小さな画面のサイズに収めると逆に画像掲載の目的が達成できない場合があります。このような場合に、閲覧者がピンチ操作(画面を複数の指でこする操作)で画像を拡大できるように、スマートフォンでは画像を別ウィンドウで開くこともできます。

PC用 固定サイズ版 ライトボックス

このページでご紹介するライトボックスはPC専用Webサイトでも使えますが、固定サイズ表示でよい場合は、別の種類のライトボックスの選択肢もあります。詳しくは下記ページをご覧下さい。

jQuery lightBox の使い方(PC用 固定サイズ版)

レスポンシブWebデザイン ライトボックスの表示パターン

ライトボックスでの拡大画像表示は、<iframe> からの拡大表示をしたり、また、グループ化の違いによって、下記の通りいくつか方法があります。設定をする際は、どのパターンで画像を表示したいかを予め決定して下さい。

Webページ上の全ての画像を拡大表示

一つのサムネイル画像をクリックした時に、そのページ内にある画像を全て拡大画像の前後リンクで表示します。

「すぐ使えるCMS」の詳細ページでの利用は主にこの形式になります。

Webページ上の画像をグループ化して拡大表示

一つのWebページページ内に多数の画像が掲載されている場合は、画像のグループを作り、拡大画像が表示された時にはそのグループ内だけで前後リンクする事もできます。

「すぐ使えるCMS」の場合は「全一覧」にサムネイル画像を表示し、記事ごとに画像をグループ化して表示したい場合にこの方法を使います。

インラインフレーム内に表示しているサムネイル画像を親ページ内に拡大表示

インラインフレーム(アイフレーム、<iframe>)内のページにあるサムネイル画像を親ページ内にライトボックス表示させる事もできます。

「すぐ使えるCMS」の場合は、画像付の短い一覧(新着情報)をホームページに表示している場合などに使用できます。

準備:レスポンシブWebデザイン ライトボックス関連ファイルダウンロード

ご自身でレスポンシブWebデザインのライトボックスを製品に組込む場合は、関連ファイルをダウンロードして設定して下さい。

なお、いずれの製品も既に何らかのライトボックス表示が組み込まれている場合があります。編集する際は、ファイル内に既に同じ表示が無いか確認しながら行って下さい。

準備1:「すぐ使えるCMS」の設置

使用する「すぐ使えるCMS」製品をダウンロードし、設置して下さい。

テスト登録

テストデータとして記事を1件登録して、管理画面が正常に動作する事を確認して下さい。画像のアップロードも試して下さい。

準備2:ライトボックスファイルのダウンロード

下のボタンから、レスポンシブWebデザイン ライトボックスのデモ製品をダウンロードして下さい。この中に、レスポンシブWebデザイン ライトボックス組込みに必要なファイルが含まれています。

解凍

ダウンロードした ZIP ファイルを解凍ソフトで解凍して下さい。parts/ というディレクトリにレスポンシブWebデザインのライトボックス用のファイルが入っています。

parts/
|-- css/
|   `-- jquery-lightbox.css
`-- img/
    |-- close.png
    |-- loading.gif
    |-- next.png
    `-- previous.png

これらのファイルは後でサーバにアップロードしますが、アップロードする場所を決めておいて下さい。なお、css/ ディレクトリと img/ ディレクトリは同じ場所にアップロードして下さい。この2つのディレクトリの相対パスがずれると動作しません。

ライトボックス設定方法

ライトボックスが使えるように「すぐ使えるCMS」のテンプレートを編集していきますが、編集する内容は以下の4点です。

  1. 画像を<a> タグで囲い、class属性に「image-link」を追加、キャプション(画像の説明)表示用の属性を設定
  2. ライトボックス用の CSS の読み込み
  3. ライトボックス用の JavaScript の設定
  4. グループ化のための設定(オプション)

順番に説明します。

1. 画像タグの編集

まずは画像タグに拡大画像へのリンクを付け、class属性とキャプション(画像のタイトル)表示用の属性を追加していきます。画像タグはページが書き出された時に以下のようなるようにします。このHTMLコードの要件はどの書き出しページでも同じです。

コピー
<a href="(拡大画像のURL)" target="_blank" class="image-link" data-caption="(画像の説明)">
<img src="(サムネイル画像のURL)" alt="(画像の説明)"></a>

キャプション(画像のタイトル)表示用の属性とは

data-caption 属性は今回採用したレスポンシブWebデザインのライトボックスの独自属性で、拡大画像の表示時に画像のキャプションとしてウィンドウの下に帯状に表示されます。なお、キャプションの表示が不要であれば data-caption属性は追加不要です。

画像タグ編集対象ファイル

どのページにライトボックスを設定するかによって、画像タグの編集対象ファイルや具体的なテンプレート変数が違います。それぞれ以下のように編集して下さい。

ページ 編集するテンプレートファイル ・タグセット
(templates/article 内)(#は画像番号に対応する数字)
詳細ページ webdir/1.html、2.html、... article_image_#.txt article.html 内 image_#
全一覧(目次) webdir/index.html article_list.txt article_list.html 内 list_item
短い一覧(新着情報) webdir/index_short.html short_list.txt short_list.html 内 list_item

詳細ページ用の設定例

詳細ページの画像の編集例は下記の通りです。これ以外にクラス設定やサイズ指定などの必要なHTMLコードがあれば追加して下さい。対象ファイルは templates/article/article_image_#.txt(#は画像番号に対応する数字)または article.html (Ver. 6.0 以上でタグセットを使っている場合) です。

コピー
<a href="%_d_%/%_filename_escaped_%" target="_blank" class="image-link" data-caption="%_imagetext_%">
    <img src="%_d_%/%_thumbnail_escaped_%" alt="%_imagetext_%">
</a>

全一覧と短い一覧用の設定例

全一覧(目次)と短い一覧(新着情報)の画像の編集例は下記の通りです。これ以外にクラス設定やサイズ指定などの必要なHTMLコードがあれば追加して下さい。コード内の#(赤字部分)は画像番号に対応する数字です。対象とする画像番号に応じて変更して下さい。

コピー
<a href="%_d_%/%_imagename_escaped_#_%" target="_blank" class="image-link" data-caption="%_imagetext_#_%">
    <img src="%_d_%/%_thumbnail_escaped_#_%" alt="%_imagetext_#_%">
</a>

2. ライトボックス用のCSS の読み込み

次に、ライトボックス用のCSSファイルを読み込みます。以下のコードを編集対象ファイル(後述)の </head> (終了タグ)の直前に追加して下さい。なお、既にファイル内にこのタグがある場合があります。その場合は追加は不要です。

追加の後、「調整内容」の調整をして下さい。

ライトボックス用のCSS のタグ

コピー
<!-- ライトボックスによる画像拡大をする場合、以下の1行を追加 -->
<link rel="stylesheet" type="text/css" href="./parts/css/jquery-lightbox.css">
 
<link rel="stylesheet" type="text/css" href="(任意のパス)/jquery_lightbox-0_5.css">
調整内容
  • 青字の部分は先ほどダウンロードしたファイルにあった parts/css/jquery-lightbox.css の設置予定場所に変更して下さい。
  • もし編集するファイル内に赤字のコードが含まれていれば、削除して下さい。

CSS用 <link> タグ編集対象ファイル

上記のコードの追加場所は、サムネイルのあるページではなく「拡大画像を表示するページ」です。通常は「すぐ使えるCMS」のテンプレートファイルですが、もし「短い一覧(新着情報)」などでインラインフレームでの読み込みを予定しているのであれば、編集対象は <iframe> タグを設定する親ページです。下表を参考にして下さい。

CSS用リンクタグ編集対象ファイル
ページ 編集するテンプレートファイル
(templates/article 内)
詳細ページ webdir/1.html、2.html、... article.html
全一覧(目次) webdir/index.html article_list.html
短い一覧(新着情報) webdir/index_short.html short_list.html
<iframe>を使う場合 (Webサイト内の任意のページ) (当該ページ)

【注意点】この編集で読み込むCSSファイルは拡大表示された画像のスタイルを指定します。サムネイル画像のスタイルの設定は別途自由に行って下さい。

3. ライトボックス用の JavaScriptの設定

続けて、JavaScript を設定します。編集対象ファイルは上記のCSS編集対象ファイルと同じです。編集内容は以下の2つの部分に分かれます。以下にそれぞれ説明します。

  1. JavaScript ファイルの読み込み(共通)
  2. JavaScript コードの指定(表示方法によって異なる)

I. JavaScript ファイルの読み込み(共通)

JavaScript タグは </body> (終了タグ)の直前に追加の上、調整をして下さい。

コピー
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//lcns2.sugutsukaeru.jp/c803d429b782f84/6.0/a4b94adbcbff24406a11ec647abba536/js/jquery-lightbox-1_4_1-min.js"></script>
<script src="(任意のパス)/jquery_lightbox-0_5.js" type="text/javascript"></script>
調整内容
  • 緑字の部分は、ページ内に既に jQuery が読み込まれていれば不要です。
  • 青字の部分は既にファイル内含まれている場合があります。その場合は追加は不要です。
  • もし編集するファイル内に赤字のコードが含まれていれば、削除して下さい。

II. JavaScript コードの指定

上記で追加した <script> タグの後に ライトボックスの動作用のコードを追加します。以下の表示パターンにより、必要なタグを追加して下さい。

  1. Webページ上の全ての画像を拡大表示
  2. Webページ上の画像をグループ化して拡大表示
  3. インラインフレーム内に表示したサムネイル画像を拡大表示
a. Webページ上の全ての画像を拡大表示

一つのサムネイル画像をクリックした時に、そのページ内にある画像を全て拡大画像の前後リンクで表示するパターンです。

詳細ページや、一覧ページでも全て記事の画像を全てまとめて拡大表示したい場合は以下のコードを追加して下さい。

コピー
<script type="text/javascript">
$(document).ready(function(){
    /* ライトボックス */
    $('.image-link').lightbox(); 
});
</script>
b. Webページ上の画像をグループ化して拡大表示

全一覧(目次)や短い一覧(新着情報)上で1件分の記事の画像ごとに拡大画像を表示したい場合は以下のコードを追加して下さい。

コピー
<script type="text/javascript">
$(document).ready(function(){
    /* ライトボックス */
    //記事ごとにライトボックスによる拡大画像の表示をグループ化
    $('.sugu-entry').each(function(){
         $('.image-link', this).lightbox(); 
    });
});
</script>

緑字の部分は、後で説明する「グループ化のための設定」で指定するクラス名と一致させて下さい。

c. インラインフレーム内に表示したサムネイル画像を拡大表示

インラインフレーム(アイフレーム、<iframe>)で短い一覧(新着情報)を表示させていたり、インラインフレーム内に記事ページを表示させていたりする場合に、まとめて拡大画像を表示する場合は以下のコードを追加の上、「調整内容」の調整を行って下さい。

コピー
<script type="text/javascript">
/* ライトボックス */
var NoticeCtl = {
    NoticeID:    "notice"     //インラインフレームのid属性
    ,imageClass: "image-link" //画像のリンクに付けたクラス
    ,entryClass: "sugu-entry" //記事1件に付けたクラス(グループ化する場合)
    ,CalledSrc:  ""
    ,LoadedSrc:  ""
};
function set_frame_lightbox(F){
    var myF = document.getElementById(F);
    var fDoc = myF.contentDocument || myF.contentWindow.document;
    if (
        NoticeCtl.CalledSrc!='' && NoticeCtl.CalledSrc == NoticeCtl.LoadedSrc && NoticeCtl.CalledSrc == fDoc.location.href
    ){
        return;
    } else if (NoticeCtl.CalledSrc=='' && NoticeCtl.LoadedSrc!='' && NoticeCtl.LoadedSrc == fDoc.location.href){
        setTimeout(function(){
            set_frame_lightbox(F);
        }, 400);
    }
    if (fDoc.location.href != 'about:blank' && fDoc.readyState == 'complete') {
        $('#'+F).contents().find('.'+NoticeCtl.imageClass).each(function(){
            $(this).attr("href", $(this).get(0).href);
        });
 
        //一覧(全一覧・短い一覧)を組み込み、記事ごとにライトボックスによる拡大画像の表示をグループ化
        /*
        $('#'+F).contents().find('.'+NoticeCtl.entryClass).each(function(){
            $('.'+NoticeCtl.imageClass, this).lightbox();
        });
        */
 
        //全ての記事の画像をまとめて拡大画像の表示を循環させる場合(全一覧・短い一覧・詳細ページ)
        //この場合は読み込むページのテンプレートからはライトボックス設定を削除しておく必要があります。
          $('#'+F).contents().find('.'+NoticeCtl.imageClass).lightbox();
 
        NoticeCtl.CalledSrc = fDoc.location.href;
        NoticeCtl.LoadedSrc = fDoc.location.href;
 
        $('#'+F).contents().find('a:not([class~="'+NoticeCtl.imageClass+'"])').bind("click", function(){
            if (NoticeCtl.CalledSrc == $(this).get(0).href){
                return false;
            }
            NoticeCtl.CalledSrc = '';
            set_frame_lightbox(F);
        });
    } else {
        setTimeout(function(){
            set_frame_lightbox(F);
        }, 400);
    }
}
$(document).ready(function(){
    set_frame_lightbox(NoticeCtl.NoticeID);
});
</script>
調整内容
  • インラインフレームには id属性を付け、そのid属性を赤字部分に設定して下さい。
  • 拡大画像へのリンクに付けるクラスを変更していたら、それに合わせて青字部分を変更て下さい。
画像をグループ化する場合

拡大する画像をグループ化して表示したい場合は、追加で以下の調整も行って下さい。

  • 上記に記載したコードの冒頭の緑字の部分を、後で説明する「グループ化のための設定」で指定するクラス名と一致させて下さい。
  • コードを切り替えるため、上記で追加したコードの中から下記の様に緑の取り消し線部分を削除して下さい。
コピー
//一覧(全一覧・短い一覧)を組み込み、記事ごとにライトボックスによる拡大画像の表示をグループ化
/*
$('#'+F).contents().find('.'+NoticeCtl.entryClass).each(function(){
    $('.'+NoticeCtl.imageClass, this).lightbox();
});
*/
 
//全ての記事の画像をまとめて拡大画像の表示を循環させる場合(全一覧・短い一覧・詳細ページ)
//この場合は読み込むページのテンプレートからはライトボックス設定を削除しておく必要があります。
$('#'+F).contents().find('.'+NoticeCtl.imageClass).lightbox();

4. グループ化のための設定

全一覧(目次)や短い一覧(新着情報)で拡大画像の表示を記事ごとにグループ化したい場合は、以下の編集も行って下さい。

グループ化編集対象ファイル

インラインフレームを使っている場合も、使っていない場合も同じファイルが編集対象です。

ページ 編集するテンプレートファイル・タグセット
(templates/article 内)
全一覧(目次) webdir/index.html article_list.txt article_list.html 内 list_item
短い一覧(新着情報) webdir/index_short.html short_list.txt short_list.html 内 list_item

編集のポイント

記事1件分のコードがファイル内に記載されていますので、一番外側のタグに「sugu-entry」というクラスを追加して下さい(下記例緑字部分)。

もし1件分のコードが一つのHTMLタグ内にまとまっていなかったら一番外側を <div class="sugu-entry"> と </div> で囲って下さい。なお、具体的なHTMLコードは下記例に限りません。クラス追加の部分のみ編集して下さい。

コピー
<div class="pure-g sugu-entry">
    <div class="pure-u pure-u-1 sugu-entry-left">
        <h3 class=""><a href="%_to_article_%">%_subject_%</a> <small>(%_yyyy_%-%_mm_%-%_dd_%)</small></h3>
        <p>%_body_%</p>
    </div>
    <div class="pure-u pure-u-1 sugu-entry-left">
        <a class="image-link wrapper-h80" href="%_d_%/%_imagename_escaped_1_%" data-caption="%_imagetext_1_%" target="_blank">
        <img src="%_d_%/%_thumbnail_escaped_1_%" alt="%_imagetext_1_%">
        </a>
         : (省略)
    </div>
</div><!-- /sugu-entry -->

もし一番外側のタグに既に class属性が設定されていれば、スペースに続けて「sugu-entry」を追加して下さい。class属性が複数あるとどちらかが無効になってしまうので注意して下さい。

また、このクラスは「すぐ使えるCMS」のバージョンによっては既に設定されている場合があります。設定されていれば追加する必要はありません。

アップロードと動作確認

全てのファイルの編集が終わったら、編集したファイルをサーバに上書きアップロードして下さい。

アップロード後「すぐ使えるCMS」の管理画面一覧から「再構築(テンプレート変更反映)」を行い、ブラウザのキャッシュを一旦クリアしてから動作確認を行って下さい。

スマートフォンではライトボックス表示をしない設定

スマートフォンではライトボックス表示をせずに別ウィンドウに画像だけを開きたい場合、以下のように JavaScript コードを変更して下さい。

コピー
$('.image-link').lightbox({minSize: 480});

変更のポイント

JavaScript のコードサンプル中で「.lightbox()」となっている部分を見つけて、カッコ内に「{minSize: 480}」を足します。「480」はピクセルでの幅を表し、「これ以下のサイズだったらライトボックス表示をせずに別ウィンドウに画像を開く」という境界点になります。適宜変更して下さい。