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


コメント

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

コメント投稿

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

ニックネーム

コメント

カテゴリ

新着備忘録

iphoneで入力フォームを選択すると画面が拡大されてしまう問題

iphoneで入力フォームを選択すると画面が拡大されてしまう問題を解決する方法

絵文字をデータベースに保存する

さくらインターネットで絵文字をデータベースの保存する方法です。

CakePHP3 常時https化

CakePHP3で常時https化する方法

画像アップロードフォームで、スマホから画像選択してプレビュー表示すると、画像が横になってしまう問題

画像アップロードフォームで、スマホから画像選択してプレビュー表示すると、画像が横になってしまう問題の解決方法です。

CakePHP(v2)で「https://ドメイン/ユーザーID」で各ユーザーのプロフィールページを作る方法

CakePHP(v2)で「https://ドメイン/ユーザーID」で各ユーザーのプロフィールページを作る方法です。