Javascriptをカスタマイズし overlayを成功させた

Javascriptをカスタマイズし overlayを成功させる方法

先週からjavascript → jQueryと進んでいるのですが、やはりJavascriptカスタマイズですから、

.(ドット)をスタイルシートのclassの意味かとカン違いするスタートです。

しかしやってるうちに、Overlayができてしまいました。すごい!自画自賛!

われながらすごすぎる! とは言ってもこれは周りの仲間からポイントを教えてもらったからなんですけどね。

そこで今後の備忘録として 残しておきます。

デモページはこちら。実際に動かしてみましょう。

Overlayデモサイトを作りましたので、こちらのデモページで、サムネイルを実際にクリックしてみてください。

▶︎ 上のサムネイル画像をクリックするとOverlayします。

・サムネイルをクリック時に 画像がFadein/outする

・その時同時に、拡大画像の背景色が白からグレーに変わります。つまり指定色に変化する Overlayです。

Javascriptをカスタマイズしoverlayを成功させた。Fadein/out + Overlay

それでは上のOverlayを、実装するjavascript他のコードセットはこちら。

それではOverlayの組み込み方法です。

▶︎ 先にHTMLコードを準備します。

【 HTML 】

lightboxの下あたりにoverlayのdivを作ります。

 

▶︎ 次にCSSコードでデザインスタイルを指定します。

【 CSS 】

CSS側でoverlayのスタイルを作ります

 

▶︎ 最後にJavascriptスクリプトをカスタマイズします。

【 Javascript 】

こちらがBEFORE

修正前が下記です。 最後のアラートのところにそれぞれoverlayを追記するわけです。

こちらがAFTER

下がカスタマイズ後です。上のBeforeとの違いは、

fadeIn #overlay とfadeout #overlayの修正追記 した部分で、ここがキモになります。

追記した分、閉じタグの数もあわせる必要があります。

最後に外部js もしくは内部jsにスクリプトを入れ、フォルダに各コードを入れて読ませ検証します。

通常はこんなoverlayを、長いコンテンツページの中に実装し、他と連携して動かします。
 

ピックアップ記事

  1. ・ Macスリープ再起動エラーがおこった環境 ・ スリープ再起動エラーメッセージの内容…
  2. 2020年もすばらしい年になるはずでした。もう半年以上が過ぎました。2020年のお正月はいつも通り、…
  3. ・ 決済文書に押印するために出社しなければならない国・ 電子印鑑は、Photoshopでこんな…
  4. ・ 最終デットラインはあと数日今年2月末までくらいです ・ SSL対応していないと何が…
  5. ほとんどの人が経験するよく失敗する事の一つが、Wordpressのバージョンアップです。以…
PAGE TOP