レスポンシブlightbox jQuery「Strip 」の使い方

おしゃれなデザインを作りたい。

浦島です。今回は、かっこよく画像を表示させる、lightbox系のjquery「strip」を紹介します。
lightboxとは、画像表示機能のことを言います。

まずは、公式サイトでサンプルをご覧ください。

必要なファイルをダウンロードしよう

公式サイトからダウンロードしてきたフォルダを解凍してください
今回必要なフォルダはdistの中にある「css」「js」この二つです。

適当な画像を2枚用意しましょう

jpgの画像を2枚用意しましょう。

jQuery、css、プラグインを読み込もう

これをhead内に書き込みましょう

htmlを書いていこう

jQueryを適用させたいところにclass=”stripをつけましょう

全コードはこちら

画像のサイズが大きすぎたのでcssで調節しました。

以上、レスポンシブlightbox jQuery「Strip 」の使い方の紹介でした。
今回のプラグインは書くコードが少なく非常に簡単にできます。
他にもyoutube の動画を埋め込むことが可能なので、オプションは公式サイトで確認してください。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)