画像をモーダルウィンドウにする「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();
    });
});

 

 

カテゴリ:jquery 投稿日時:2015年10月27日 17:26  更新日時:2018年4月20日 22:15


コメント

コメントはまだありません。

コメント投稿

ご自由にコメントください!
※一度投稿すると削除できませんのでご注意ください。管理者の独断と偏見で削除する場合があります。コメント機能は予告なく停止する場合があります。

ニックネーム

コメント

カテゴリ

新着備忘録

Font Awesomeでアイコン表示

Font Awesomeでアイコンを表示する方法です。

Safariのボタンが言うこと聞かない!

SafariのボタンにCSSを適用させる方法です。

Formのdateで月選択の0が気になる

Formのdateで月選択の0を消す方法です。

PHPでログインが必要なページを取り込みたい

PHPでログインが必要なページを取り込みたい時の方法です。

さくらインターネットで独自SSLを設定する方法

さくらインターネットで独自SSLを設定する方法の紹介。