見出し画像
Photo by heart1g

写真の拡大表示・画像ギャラリー～プログラミング学習【土曜日】(有給取得翌日の火曜日)

K.S

写真をクリックすると拡大写真が浮き出るようなサイトを作りたいと思うことはないでしょうか。

MagnificPopupを利用するとそれが実現できます。

適用後、適用前ではこんな違いがあります。

まず適用前。HTMLのコードだけです。

<body>
  <a class="popup" href="img1.jpg"><img src="img1-small.jpg" width="200" height="200" alt="画像1"></a>
</body>

小さい写真をクリックすると、確かにリンク先に設定した拡大写真は表示されるのですが、ブラウザにある前のページに戻る「矢印」をクリックしないと元のページに戻ることができません。

一方MagnificPopupを適用してみると、

$('.popup').magnificPopup({
  type:'image',
});

拡大写真を表示させた後、写真以外のどこかの場所をマウスクリックするだけで元の小さい写真が表示された画面に戻ることができます。

更にMagnificPopupには、画像を拡大表示させたまま、次の画像にスライドさせたり、ふわっと浮き出るような演出をCSSで組み合わせることもできます。

プログラミングの中でも珍しく色々な機能を試して楽しく覚えられそうな分野です。

【有給取得翌日の火曜日】

休んだ分のメール、仕事の蓄積は若干あります。
また休日明け出社初日ということもあり帰宅後は体力、メンタル回復を要し時間を消費することもあり。

但し朝方の月曜独特の感覚は日曜日の時点から軽減されます。


この記事が気に入ったらサポートをしてみませんか？