春かと思ったらそう暖かくなりませんね。
でも梅はキレイに咲いてますよねぇ。
今日はLightboxのようなポップアップウインドウを自作したお話。
今更感たっぷりではありますが。
いわゆる、クリックしたら画像をふわっと表示する。ってやつですね。
過去には「Lightbox」から始まって、「prettyPhoto」なんかも使ったりして、最終的には「Colorbox」をよく使っていました。
それでもヘタすれば1年くらいそういうのを使っていなくて、久しぶりにそういう案件があったので、Colorboxでも使おうかなぁ。と思ったんですが、『いや、もしかしたら自作できるんじゃないか？』と思ったので自作してみました。
目次
できあがり
まずは完成のデモから。
自作モーダルウィンドウデモ
もう何も機能はありません。
ただクリックして画像を表示するだけ。
次の画像へ送ることもないし、タイトルを表示することもありません。
シンプルなlightbox。そういう感じ。
HTMLとcssとjQuery
今回のはjQueryを使いますので、事前にjQueryは読み込んでおいて下さい。
デモを見てもわかりますが、あくまでもベースなので、こっからやっていけば、オプションつけたりできるんじゃないかと
HTML
まずは基本的なHTMLですが
<div id="thumb-list">
<ul>
<li id="list01" class="thumb"><img src="img/thumb01.jpg" alt="サムネ1"></li>
<li id="list02" class="thumb"><img src="img/thumb02.jpg" alt="サムネ2"></li>
<li id="list03" class="thumb"><img src="img/thumb03.jpg" alt="サムネ3"></li>
</ul>
<div id="pic01" class="pic"><img src="img/pic01.jpg" alt="写真1"><div class="btn-close">☓</div></div>
<div id="pic02" class="pic"><img src="img/pic02.jpg" alt="写真2"><div class="btn-close">☓</div></div>
<div id="pic03" class="pic"><img src="img/pic03.jpg" alt="写真3"><div class="btn-close">☓</div></div>
</div>
最初にサムネイルを並べています。
そしてその後にクリックした時に表示する要素を並べています。
これは次のcssで非表示にしておきます。
css
#thumb-list ul {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
overflow: hidden;
}
#thumb-list ul li {
margin: 0 20px 0 0;
float: left;
width: 100px;
cursor: pointer;
}
.pic {
border: 10px solid #efefef;
border-radius: 10px;
display: none;
position: fixed;
z-index: 10;
}
.btn-close {
border: 3px solid #efefef;
border-radius: 50%;
width: 25px;
height: 25px;
position: absolute;
top: -15px;
right: -15px;
background: #fff;
font-size: 10px;
cursor: pointer;
text-align: center;
}
.back-layer {
width: 100%;
height: 100%;
position:fixed;
top:0;
left:0;
background: rgba( 255, 255, 255, 0.7);
}
HTMLで使っていない部分をいくつか設定していますが、それは次のJavascriptの方で。
Javascript
$(function(){
//サムネイルをクリックしてポップアップ
$('#thumb-list ul li').click(function(){
//何番目の要素がクリックされたか
var thumb_num = $('#thumb-list ul li').index(this);
//0から始まるので1足しておく
thumb_num = thumb_num+1;
//大きい写真のIDを設定
var p_box = '#pic0' + thumb_num;
//ウィンドウ幅、高さを取得
var w = $(window).width();
var h = $(window).height();
//大きい写真の幅、高さを取得
var pw = $(p_box).outerWidth(true);
var ph = $(p_box).outerHeight(true);
//中央寄せの計算
$(p_box).css({"left": ((w-pw)/2) + "px","top": ((h-ph)/2) + "px"})
//オーバーレイを表示
$('body').append('<div class="back-layer"></div>');
$('.back-layer').fadeIn('slow');
//写真を表示
$(p_box).fadeIn("slow");
//閉じるボタン処理
//ボタンクリック、周りクリックで関数を削除
$('.back-layer,.btn-close').unbind().click(function(){
//写真をフェードアウト
$(".pic").fadeOut("slow",function(){
//フェードアウトしたらオーバーレイをフェードアウト
$('.back-layer').fadeOut('slow',function() {
//フェードアウトしたらオーバレイを消す
$('.back-layer').remove();
});
});
});
});
});
一応コメントのとおりなんで、改めて説明するところもないんですが、outerWidthの部分で若干ハマりました。
あとは閉じる処理とか。
まとめ
これで出来上がりです。
あとは、指定するサムネイルのところとか、画像のaltを取得するとかって部分を付け加えていくと、少し幅が広がると思います。
ただ、ほんと今更感たっぷりで自分で悩んで作るくらいなら、どっかから持ってきたが早いわ。という感じにもなりますね。
HTML5とcss3がだいぶ使える環境になりつつあるので、jQueryに依存していた部分も少しずつそっちに移行するんでしょうかねぇ。
個人的には動きというか、なくても成り立つ部分はJSに任せたいので、まだまだなくならないかなぁ。と思うんですけどね。
もし上のコードで動かないとか、もっと良い書き方があるよ。とかあれば教えていただければありがたいです。
そいぎ～。
Written with StackEdit.
