画像をモーダルウィンドウにする「Lightbox」


ブラウザに表示している画像をモーダルウィンドウとして表示するためには「Lightbox」が簡単です。

ダウンロード

こちらからダウンロード

ファイルの設置

以下CakePHPの場合です。
lightbox.jsをjsフォルダに設置、
lightbox.cssをcssフォルダに設置、
画像類をimgフォルダに設置します。

css内の画像のurlにimagesというところがあるのでimgに置換。

ファイルの読み込み

headでcssとjqueryを読み込みます。

lightbox.jsはhead内で読み込むと動きません。
ページの下部でその場に読み込みます。

<?php echo $this->Html->script('lightbox'); ?>

画像の設置

リンク付きの画像を設置します。その時aタグに「data-lightbox="lightbox"」を入れておきます。
「lightbox」の値が同じものは同じグループになり、進む/戻るボタンで移動できます。

<a href="/hoge/hoge.jpg" data-lightbox="lightbox"><img src="/hoge/hoge.jpg"></a>

リンクの自動生成

リンクを入れないで、画像を設置しただけで適応したい場合は、javascriptで事前に画像にリンクを入れましょう。

$(function(){
    $('.imageLinkBody img').each(function(){
        $(this).before('<a href="' + $(this).attr('src') + '" data-lightbox="lightbox"><img src="' + $(this).attr('src') + '" style="' + $(this).attr('style') + '"></a>');
        $(this).remove();
    });
});

 

 


投稿日時:2015年10月27日 17:26  更新日時:2015年10月27日 17:39


新着ブログ

2017年9月10日
NEWS PICKSでLikesをたくさん貰った話

2017年8月19日
人生の勝算

2017年6月14日
目的論が分からない