画像 をクリックすると大きな写真が表示されるページを作りながら学習します。
今回はレイアウトなどのベースのCSSはコーディング済ですが、どのように指定しているかチェックしておきましょう。
もちろんレイアウト、カラー、ｈ1など好きなように自由に変えてOKです。
01 lesson.htmlを開きます
ページを開いてマークアップの確認をしましょう。
HTML
<!doctype html>document type
<html>HTML文書であることを宣言
<head>head elements
<meta charset="utf-8">文字コード
<meta name="viewport" content="width=device-width, initial-scale=1">レスポンシブデザイン対応ビューポート
<title>PhotoSwipe</title>ページタイトル
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">各ブラウザの見え方をリセット
<link rel="stylesheet" href="style.css">CSSのリンク
</head>head終わり
<body>ブラウザに表示されるところ
<header>ページ上部ロゴやｈ1などを入れる
<h1>jQuery PhotoSwipe</h1>見出しheading
</header>header終わり
<div class="container">
</div><!-- /.container -->
<footer>ページ下部にある要素。コピーライトやSNSリンクなどを入れる
PhotoSwipe
</footer>footer終わり
</body>body終わり
</html>html終わり
02 PhotoSwipeを動かすためのファイルを確認
jsフォルダー内にはPhotoSwipeを動かすためのCSSやjQueryファイルが入っています。
中に入っているものは削除したりしないでください。
これらのファイルのリンクをhead内にコピー＆ペーストしてください。
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PhotoSwipe</title>
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="js/photoswipe/photoswipe.css" />
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/photoswipe/jquery.photoswipe.js"></script>
<script src="js/swipe.js"></script>
</head>
03 まずは通常の画像リンクを作ってみましょう
POP-UP 01
<h2>～</h2>を作成
画像を入れて表示サイズは240ピクセルにして、画像へリンクさせる。altキーにもテキスト入れましょう。
target="_blank"は別ウインドウが開くようになります。
テキストのリンクも作ってみましょう。
※WEBページへ表示する時は横のサイズを240pxで指定しておきます「width="240"」
HTML
<h2>POP-UP 01</h2>
<p><a href="img/dog.jpg" target="_blank"><img src="img/dog.jpg" alt="" width="240"></a></p>
<br>
<p><a href="img/dog.jpg" target="_blank">Driving!!</a></p>
04 画像リンクにマウスオーバーで明るくする
画像にリンクがあることを知らせるために、CSSへ以下のコードをいれましょう。
CSS
a img:hover {
opacity: 0.6;
}
ふんわりと１秒かけて変える場合
CSS
a img:hover {
opacity: 0.6;
transition: 1.0s ;
}
05 PhotoSwipeを使って作ってみましょう
POP-UP 02
<h2>～</h2>を作成
POP-UP01のコードをコピーしてから変更します。
<p><a href="img/dog.jpg" target="_blank"><img src="img/dog.jpg" alt="" width="240"></a></p>
target="_blank"を消しclassとtitleを入れます。➡ class="swipe" title="ドライブ"
※コードの間は半角スペースを必ず入れてください。
HTML
<h2>POP-UP 02</h2>
<p><a href="img/dog.jpg" class="swipe" title="ドライブ"><img src="img/dog.jpg" alt="" width="240"></a></p>
06 数種類 の画像を並べるレイアウトの確認
POP-UP 03
ここではbigboxという大きな箱にbox240の箱を並べる設定にしてあります。
bigbox、box240の下記のコードを入力しましょう
HTML
<h2>POP-UP 03</h2>
<div class="bigbox">
<div class="box240">
ここへ画像を入れる
</div>
<div class="box240">
ここへ画像を入れる
</div>
<div class="box240">
ここへ画像を入れる
</div>
</div>
07 画像を入れていきます
使用する画像は3枚、拡大表示
(zoom up)にも同じ画像を使います。
veg1.jpg、veg2.jpg、veg3.jpg
CSSで横幅を指定しているのでwidth="240"はDeleteします。
<a href="img/veg1.jpg" class="swipe" title="やさい1"><img src="img/veg1.jpg" alt="" width="240"></a>
画像を２枚以上使用しているのでグループ名を作って互いにリンクさせます。（英数半角のみ）
ここでは「gp1」としました。rel（レル：relation）
<a href="img/veg1.jpg" class="swipe" rel="gp1" title="やさい1"><img src="img/veg1.jpg" alt=""></a>
HTML
<h2>POP-UP 03</h2>
<div class="bigbox">
<div class="box240">
<a href="img/veg1.jpg" class="swipe" rel="gp1" title="やさい1"><img src="img/veg1.jpg" alt=""></a>
</div>
<div class="box240">
<a href="img/veg2.jpg" class="swipe" rel="gp1" title="やさい2"><img src="img/veg2.jpg" alt=""></a>
</div>
<div class="box240">
<a href="img/veg3.jpg" class="swipe" rel="gp1" title="やさい3"><img src="img/veg3.jpg" alt=""></a>
</div>
08 最初に表示している写真とは別の写真を表示する場合
POP-UP 04
今度は画像をクリックして別の画像を表示してみましょう。
使用する画像は bird1.jpg、bird1s.jpg、bird2.jpg、bird2s.jpg、bird3.jpg、bird3s.jpg
グループ名は「gp2」にします（好きな名前でOK) rel="gp2"
リンクする大きな画像とページに表示している小さい画像を入れてください。
HTML
<h2>POP-UP 04</h2>
<div class="bigbox">
<div class="box240">
<a href="img/bird1.jpg" class="swipe" rel="gp2" title="とり1"><img src="img/bird1s.jpg" alt=""></a>
</div>
<div class="box240">
<a href="img/bird2.jpg" class="swipe" rel="gp2" title="とり2"><img src="img/bird2s.jpg" alt=""></a>
</div>
<div class="box240">
<a href="img/bird3.jpg" class="swipe" rel="gp2" title="とり3"><img src="img/bird3s.jpg" alt=""></a>
</div>
</div>
09 マウスオーバー時に動きをつける
POP-UP 05
Mouseover effect CSSを参考にしています。自由に変更OKです。
08のコードをコピー＆ペーストしてから<h2>を変更、グループ名はrel="gp3"
<div class="mo1">～<div>を追加してください。
HTML
<h2>POP-UP 05</h2>
<div class="bigbox">
<div class="box240">
<div class="mo1">
<a href="img/bird1.jpg" class="swipe" rel="gp3" title="とり1"><img src="img/bird1s.jpg" alt=""></a>
</div>
</div>
<div class="box240">
<div class="mo1">
<a href="img/bird2.jpg" class="swipe" rel="gp3" title="とり2"><img src="img/bird2s.jpg" alt=""></a>
</div>
</div>
<div class="box240">
<div class="mo1">
<a href="img/bird3.jpg" class="swipe" rel="gp3" title="とり3"><img src="img/bird3s.jpg" alt=""></a>
</div>
</div>
</div>