解説
| キーワード |
使い方 |
| append() |
- 要素の挿入
- 引数で指定した要素を、セレクタで指定した要素内の末尾に挿入します。
|
| fadeIn() |
- 要素のフェードイン
- セレクタで指定した要素をフェードインさせます。
|
| fadeOut() |
- 要素のフェードアウト
- セレクタで指定した要素をフェードアウトさせます。
|
| remove() |
- 要素の削除
- 要素を削除します
|
- コンテンツのつくりかた
-
- サムネールクリック時に実行する
- 背景と拡大画像をフェードイン表示する
- 画像を元に戻す
HTML
ここには、HTMLのコードを入れる
<ul>
<li><a href="../../../images/moving_logo.png"><img src="../../../images/moving_logo.png" alt="動くロゴ"></a></li>
<li><a href="../../../images/actionscript.png"><img src="../../../images/actionscript.png" alt="ActionScript3.0の使い方"></a></li>
<li><a href="../../../images/character_animation.png"><img src="../../../images/character_animation.png" alt="キャラクターアニメーション"></a></li>
<li><a href="../../../images/lesson_room.png"><img src="../../../images/lesson_room.png" alt="キャラクターアニメーション"></a></li>
</ul>
CSS
ここには、CSSのコードを入れる
#bg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
}
#photo {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 50%;
height: auto;
margin: 0;
padding: 0;
}
JS
ここには、JSのコードを入れる
// Lightbox風モーダルウィンドウ
$(function(){
$("#test_display a").click(function(){
//クリック時の処理
$("#wrapper").append('<div id="bg">');
$("#wrapper").append('<div id="photo">');
/*それぞれ非表示にする*/
$("#bg").hide();
$("#photo").hide();
//#photoの中にimg要素を追加
$("#photo").html("<img>");
//img要素にsrc属性を設定,
$("#photo img").attr("src", $(this).attr("href"));
//img要素にwidth,height,alt属性を設定
$("#photo img").attr("width", 640);
$("#photo img").attr("height", 360);
$("#photo img").attr("alt", "Photo");
/*#bgと#photoをフェードイン*/
$("#bg").fadeIn();
$("#photo").fadeIn();
/*背景をクリックします*/
$("#bg").click(function(){
/*背景をフェードアウト*/
$(this).fadeOut(function(){
$(this).remove();
});
/*拡大画像をフェードアウト*/
$("#photo").fadeOut(function(){
$(this).remove();
});
});
return false;
});
});
