[ jQuery ] Lightbox風モーダルウィンドウ - テキスト p217~222 -
画像をクリックすると下記のように拡大表示する。
<body>
<div id="container">
<h1>jQueryを利用したモーダルウィンドウの作成</h1>
<ul>
<li><a href="img/01.jpg" class="modal"><img src="img/th01.jpg" alt="シャンデリア"></a></li>
<li><a href="img/02.jpg" class="modal"><img src="img/th02.jpg" alt="バラ"></a></li>
<li><a href="img/03.jpg" class="modal"><img src="img/th03.jpg" alt="海"></a></li>
<li><a href="img/04.jpg" class="modal"><img src="img/th04.jpg" alt="門"></a></li>
<li><a href="img/05.jpg" class="modal"><img src="img/th05.jpg" alt="海"></a></li>
<li><a href="img/06.jpg" class="modal"><img src="img/th06.jpg" alt="あじさい"></a></li>
<li><a href="img/07.jpg" class="modal"><img src="img/th07.jpg" alt="空"></a></li>
<li><a href="img/08.jpg" class="modal"><img src="img/th08.jpg" alt="建物"></a></li>
</ul>
<div id="glayLayer"></div>
<div id="overLayer"><img src="img/05.jpg"></div>
</div>
</body>
<link rel="stylesheet" href="css/style1.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function( ) {
$("body").append("<div id='galayLayer'></div><div id='overLayer'></div>");
$("#glayLayer").click(function( ) {
$(this).hide( );
$("#overLayer").hide( );
});
$("a.modal").click(function( ) {
$("#glayLayer").show( );
$("#overLayer").show( ).html("<img src='"+$(this).attr("href")+"'>");
return false;
});
});
</script>
@charset "utf-8";
/* reset */
html, body, div, h1, ul, li, img {
margin: 0;
padding: 0;
line-height:1.0;
font-family:
"Hiragino Kaku Gothic Pro N",
meiryo,
sans-serif;
}
ul {
list-style: none;
}
/* layout */
html, body {
height: 100%;
}
#container {
margin: 10px 10px;
}
#glayLayer {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: black;
opacity: 0.60;
filter: alpha(opacity=60);
}
#overLayer {
display: none;
position: fixed;
top: 50%;
left: 50%;
margin-top: -244px;
margin-left: -325px;
}
h1 {
margin: 10px 0 10px 0;
padding: 0 0 5px 10px;
border-left: solid 10px #999;
border-bottom: solid 1px #999;
}
li {
float: left;
}
img {
margin: 2px;
}
出来た時は嬉しかったが、サムネイル画像のサイズ大きかったですね。
学校で作った時は ２×４ で画像表示していたが私のPCでは ２×３＋２ になってしまった、画面サイズの事も気にして作らなければならないと気付かされました。
テキストを丸写しなので何度か復習しないと出来ないと思いました。
