レスポンシブなLightboxの作り方!画像ギャラリーウィジェット

サムネイルが並んだ写真をクリックすると大きい画像をLightboxで表示。

よく使いますよね。

ただ今までの作り方だとまず

  • LightboxのjQueryライブラリさがし?
  • <head>〜</head> 内に、コードを記述?
  • <body>〜</body> 内の組み込みたい箇所のアンカー要素?

になってたと思いますがElementorを使うと、5分ぐらいで作れます。

冗談でもなくまじ本気です。

では行ってみましょう。

ウィジェット>一般エレメント>画像ギャラリー

「画像ギャラリー」ウィジェットを「新しいセクションの追加」へドラッグします。追加されたウィジェットを選択すると左のパネルから「画像の追加」を選択します。



複数の画像をアップロードして図のようになります。

「UPDATE」ボタンをクリックして左側の「Preview Changes」ボタンをクリックしてプレビューします。

おそろしいですね。5分かかってないです。しかもレスポンシブ対応。凄すぎます。。


画像ギャラリーのコラム数も自由自在!!

 

デフォルトではLightbox表示時の背景は黒ですが変更できます。

左上のアイコンから>Global Setting>Lightboxタブを選択。

背景色を変更します。

 

DEMO

Elementorカテゴリ

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.