画像をクリックした時にふんわりと拡大表示することができるWordPressプラグイン「jQuery Colorbox」

画像をクリックした時にふんわりと拡大表示することができるWordPressプラグイン「jQuery Colorbox」

画像をクリックした時にふんわりと拡大表示することができるWordPressプラグイン「jQuery Colorbox」

jQuery Colorboxは、画像をクリックした時にふんわりと拡大表示することができるWordPressプラグインです。

jQuery Colorboxのインストール

インストール手順は以下の通りです。

  1. jQuery Colorboxをダウンロードします。
  2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
  3. 管理画面の[プラグイン]ページで、jQuery Colorboxを有効化します。

jQuery Colorboxの設定

jQuery Colorboxをインストールすると、「jQuery Colorbox needs attention: the plugin is not activated to work for all images.」というメッセージが表示されます。これは、「画像に対して、まだjQuery Colorboxの効果が有効に設定されていないよ」という意味で、設定画面からjQuery Colorboxを有効にするための設定を行う必要があります。

WordPress管理画面で[設定] – [jQuery Colorbox]にアクセスして、各種設定を行いましょう。

Plugin settings

Automate jQuery Colorbox for all images in pages, posts and galleries 投稿・固定ページ・ギャラリー内すべての画像に効果を適用
Automate jQuery Colorbox for images in WordPress galleries only ギャラリー内の画像にのみ効果を適用
Automate jQuery Colorbox for all other images テーマ内の画像など、その他の画像に効果を適用
Automate hiding of flash objects フラッシュオブジェクトを非表示
Add Zoom overlay to pictures 画像にマウスホバーした際に拡大できることを示すアイコンを表示
Use jQuery library from Google jQueryをGoogleのCDNからロード
Add JavaScript to footer JavaScriptをフッターに移動
Remove link from Meta-box プラグイン作者へのリンクを削除
Disable warning 警告表示の無効化

Colorbox settings

Theme テーマ
Theme screenshot テーマのプレビュー
Add Slideshow to groups スライドショーグループの有効化
Start Slideshow automatically スライドショーの自動再生
Speed of the slideshow スライドの切り替え速度
Maximum width of an image 画像の最大サイズ(横幅)
Maximum height of an image 画像の最大サイズ(高さ)
Maximum width of the Colorbox 拡大画像の最大サイズ(横幅)
Maximum height of the Colorbox 拡大画像の最大サイズ(高さ)
Resize images 画像のリサイズ
Close Colorbox on overlay click 画像以外の部分をクリックすると拡大画像を閉じる
Preload images 画像のプリロード
Transition type 透過タイプ
Transition speed 透過スピード
Opacity 透過度

Plugin settingsの「Add Zoom overlay to pictures」にチェックが入っていると、画像にマウスホバーした際に以下のようにアイコンが表示されます。

マウスホバーした時の画像

クリックすると、画像が拡大表示されます。

クリックすると、画像が拡大表示されます。

あとがき

以前紹介した、Easy FancyBoxWP jQuery Lightboxと同じようなlightbox系のプラグインです。

おしゃれに画像を拡大表示させたい時は、ぜひ導入を検討してみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

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