【コピペでOK】画像をクリックして、スライドショーのポップアップを表示させる

CSS

はじめに

写真をクリックすると、ポップアップが表示されて、ポップアップ内に写真のスライドショーを表示する方法を説明します。

コードと実行結果は以下のようになります。

See the Pen eYOExvQ by Tomomi Hirotane (@hirotane) on CodePen.

写真のカテゴリーごとに、スライドショーを作成すれば、写真の整理ができてとても便利だと思います。

ポップアップを表示する

ポップアップ表示にはチェックボックスを使っています。

画像とポップアップ内の「×(閉じるボタン)」に チェックボックスのidであるpopup-onというラベルを付けています。そうすることで、

  1. 画像をクリック➡ポップアップを表示
  2. ×をクリック➡ポップアップを表示

というように切り替えることができます。

onchange属性にJavascriptの関数を指定おり、チェックされた状態でのみ、Javascriptの関数が実行されるようになっています。

スライドショー

Javascriptファイルの一部です。

checkという変数を定義します。checkにはhtmlのチェックボックスがチェックされている状態を指定しておきます。if文でcheckがtrueとなった時のみ、スライドショーが開始されるようにしている点に注意してください。

コードの詳しい説明は下の参考サイトをご覧ください。

参考サイト

今回参考にしたサイトはこちらです。

タイトルとURLをコピーしました