Shadowbox.jsの使い方(画像ポップアップ)

最近はレスポンシブでサイトを作ることが多く、
その際に画像をクリックしたらポップアップしたいと
要望がおおい。

ポップアップ条件

  • レスポンシブ対応
  • 簡単

こういう条件のを探すと何個でてきます。
photoSwipeがよさそうだったが、
設置方法がわからず挫折。
英語が読めたら・・・と何回も思う。
また挑戦したいと思う。

今回は設置が簡単そうな
「Shadowbox.js」とつかって実装します。

ダウンロード

ダウンロードはこちら

正式なHPはなぜかアフィリエイトサイトになってしまっている。。

使い方

ダウンロードしたフォルダの中のファイルをリンクさせる。

そして次の1行を入れる。

上のだと

とエラーがでてしまうので

を入れる。

imgタグに rel=”shadowbox” を入れる

タイトルを入れたい場合

を入れれば設定できます。

複数の画像のギャラリー化

imgタグに同じ 

を入れればOk!

※○○○○は何か入れてくださいね。

画像をcssに適用させる

ダウンロードしたファイルに
・shadowbox-controls.png
・shadowbox-icons.png

があるのでアップして、

shadowbox.cssの
backgroundで使用しているので
階層を合わせてください。

結論

ファイル2つで簡単に設置できて
いいと思います!

結構ポップアップって使うこと多いので
使いやすいものを常に探しています。

あればいいのに

aタグで囲まなくてもimgタグだけで
画像ポップアップできたら超いいんですけどね。

参考にさせていただいたサイト

サンクス!
こちら

ad