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

 

 

カテゴリ：javascript 投稿日時：2015年10月27日 17:26

---

コメント

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

コメント投稿

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

ニックネーム

コメント