【jQuery】サムネイルで切り替わるギャラリー・発展編
はじめに
どうも、NNCの石上です。
今回の記事は、前回作成したギャラリー機能の発展編となります。そちらに目を通してからチャレンジしましょう。
ギャラリー & モーダル
前回作成したギャラリーに、プラスアルファの機能として「モーダル」を追加したいと思います。（「モーダルって何？」という方は、「モーダルウィンドウ web」とかで検索してみましょう。）
サムネイルをクリックすると上のメイン画像が切り替わり、
さらにメイン画像をクリックすると作品の詳細情報がフェードインして出てくる、といった具合です。（沖縄旅行、楽しかったな〜）
実際のコード
早速実際のコードを見ていきましょう。
「HTMLでモーダルにあたるパーツを用意、CSSで全画面サイズに設定しておいて、最初は非表示にしておく」というのがキーになりますね。
（CSSについて、前回と記述が変わらない部分は省略しています。）
<body>
<main>
<!-- メインエリア -->
<div class="large">
<img class="large__main" src="img/01.jpg" alt="">
<!-- モーダルエリア -->
<div class="large__modal">
<div class="large__modalInner">
<div class="left">
<img src="img/01.jpg" alt="">
</div>
<div class="right">
<div class="text">
<h2>Fly High</h2>
<p>Romancrewの1stマキシシングルへのオマージュ。</p>
</div>
</div>
</div>
<div class="large__modalBtn">
<span></span>
<span></span>
</div>
</div>
</div>
<!-- サムネイルエリア -->
<div class="thumb">
<ul class="thumb__list">
<li class="thumb__item">
<img src="img/01.jpg" alt="">
<h2>Fly High</h2>
<p>Romancrewの1stマキシシングルへのオマージュ。</p>
</li>
<li class="thumb__item">
<img src="img/02.jpg" alt="">
<h2>獣の神経のように赤く</h2>
<p>沖縄旅行で見かけた残波岬の巨大シーサーに触発されて制作。</p>
</li>
<li class="thumb__item">
<img src="img/03.jpg" alt="">
<h2>ULTRA</h2>
<p>憧れの髪型、自分の理想像を描いた。</p>
</li>
<li class="thumb__item">
<img src="img/04.jpg" alt="">
<h2>聖域</h2>
<p>アラビック・カリグラフィーからヒントを得て制作。</p>
</li>
</ul>
</div>
</main>
</body>/* モーダルエリア */
.large__modal {
position: fixed;
display: none;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding-top: 50px;
background-color: rgba(0, 0, 0, 0.7);
}
/* モーダル：インナー */
.large__modalInner {
display: flex;
justify-content: center;
}
/* モーダル：閉じるボタン */
.large__modalBtn {
position: absolute;
top: 50px;
right: 50px;
width: 50px;
height: 50px;
}
.large__modalBtn span {
display: block;
width: 50px;
height: 1px;
background-color: #fff;
}
.large__modalBtn span:first-of-type {
transform: rotate(45deg);
}
.large__modalBtn span:last-of-type {
transform: rotate(-45deg);
}
/* モーダル：左の画像 */
.large__modal .left {
margin-right: 40px;
}
.large__modal .left img {
width: 440px;
height: auto;
}
/* モーダル：右のテキスト */
.large__modal .right {
position: relative;
width: 250px;
}
.large__modal .right .text {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.large__modal .right h2 {
margin-bottom: 30px;
font-size: 2.2rem;
letter-spacing: 1.4px;
line-height: 1;
color: #fff;
}
.large__modal .right p {
font-size: 1.4rem;
letter-spacing: 1.4px;
line-height: 1.4;
color: #fff;
}
/* サムネイル：タイトルと解説文 */
.thumb__item h2, .thumb__item p {
display: none;
}$(function(){
$('.thumb__item').on('click',function(){
var number = $(this).find('img').attr('src');
var title = $(this).find('h2').html();
var text = $(this).find('p').html();
$('.large img').attr('src', number);
$('.large__modal .text h2').html(title);
$('.large__modal .text p').html(text);
});
$('.large__main').on('click',function(){
$('.large__modal').fadeIn();
});
$('.large__modalBtn').on('click',function(){
$('.large__modal').fadeOut();
});
});ポイント
ポイントとなるのが、いかにしてモーダルの開閉を制御するか、という点です。やはり今回も、全体の仕組みをステップ毎に考えてみましょう。
1.サムネイル（.thumb__item）をクリックした時にメイン画像を更新
（前回の記事でここまでは完了しています。問題は次から）
2.各作品のタイトル・解説文の情報を取得して、変数に格納
3.モーダルの内容を、それぞれの変数で上書き
4.メイン画像をクリックすると、モーダルがフェードインで出てくる。
う〜ん、やることが微妙に多いっすね。
簡単なものから解決してしまいましょう！
まずは各作品の情報を変数に格納するところからですが、これは画像のsrc属性をいじったのと同じ発想で実現可能です。
HTMLの構造を確認してもらうと、.thumb__itemの中にh2・pタグが記述されているのが分かると思います。これで各作品に対応するタイトル・解説文は用意出来ている状態なので、あとはクリックしたタイミングでその情報を取得できればOKになります。
それでは早速、htmlメソッドでクリックした作品のテキスト情報を取得、変数に格納してあげましょう！テキスト情報の取得は、【対象.html( ) 】という記述で実行可能です。
var number = $(this).find('img').attr('src'); // 画像
var title = $(this).find('h2').html(); // タイトル
var text = $(this).find('p').html(); // 解説文画像・タイトル・解説文のデータは全て取得できたので、モーダルの内容をそれぞれの変数で上書きしてあげましょう。これも、前回と同じ発想で出来そうですね。htmlメソッドによる上書きは、【 対象.html( 文字列 、もしくは変数) 】で実行可能です。
$('.large img').attr('src', number); // numberという変数で上書き
$('.large__modal .text h2').html(title); // titleという変数で上書き
$('.large__modal .text p').html(text); // textという変数で上書きクリックした作品の情報を反映させる作業はこれまでの記述で全て完了しているので、残すはモーダルの開閉制御だけになります。
そのモーダルの開閉で活躍してくれるのが、fadeIn・fadeOutメソッドになります。それぞれ【対象.fadeIn()】・【対象.fadeOut()】という記述で実現可能です。
該当箇所はこちら。
// モーダル、開けます
$('.large__main').on('click',function(){
$('.large__modal').fadeIn();
});
// モーダル、閉じます
$('.large__modalBtn').on('click',function(){
$('.large__modal').fadeOut();
});まずは開けるところから。
メイン画像(.large__main)をクリックした時、display:noneで非表示にしておいたモーダル(.large__modal)をフェードインさせます。(初期状態で非表示にしておかないと作動しないので要注意！)
閉じる時も、考え方は一緒です。
×ボタン(.large__modalBtn)をクリックした時、全画面で表示されているモーダル(.large__modal)をフェードアウトさせます。
ちょっと長くなりましたが、以上で完成です！
