grayishスキン適用中

Cocoonの画像拡大効果(Lightbox)ライブラリ各々お勧めの使いどころ

投稿・固定ページ
この記事は約3分で読めます。

Cocoon設定「画像」タブには、画像拡大効果の設定項目があります。

リンク画像をクリックしたときの拡大効果の設定です。

現在この画像拡大効果(Lightbox系効果)は4種類になったので、それぞれの使いどころを説明しておこうと思います。

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

画像拡大効果を使用できる画像の前提条件

この画像拡大効果を使用できるのは「メディアファイルにリンクされている画像」のみです。

具体的な設定方法を書くと、まずは画像ブロックでアップロードするなり、メディアライブラリから選択するなりしてエディターに画像を挿入します。

画像を挿入したらツールバーの「リンクを挿入」ボタンを押してください。

「リンク挿入」メニューが表示されるので「メディアファイル」を選択してください。

この「メディアファイルへのリンク」がある画像のみ拡大効果が適用されます。

Spotlight

とにかく、高解像度の画像のギャラリーを作成したいのであれば、Spotlightがお勧めです。

ズーム機能があるので、写真の細かいところを訪問者に見てもらいたい場合にも重宝するかと思います。

spotlight

またスライドショー機能もあるので、「写真や画像を魅せたい」という方向けです。

高機能でありながら、動作も軽快、スワイプにも対応という優れものです。

ただ、画像以外の余白をクリック(タップ)してもギャラリー画面は閉じないので、閲覧者はしっかりと「×(閉じるボタン)」を押す必要があります。

使用しているライブラリはこちら。

GitHub - nextapps-de/spotlight: Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.
Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performanc...

デモページはこちら。

Spotlight.js - Modern HTML5 Image Gallery
WinBox is the web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding ...

baguetteBox

とにかく軽快に連続してコンテンツ内の画像が見れて、スワイプにも対応したものがよければ、baguetteBoxがおすすめです。

baguettebox

画像以外の部分をクリック(タップ)することで、閉じることも出来るので使い勝手は良いです。

使用ライブラリはこちら。

GitHub - feimosi/baguetteBox.js: :zap: Simple and easy to use lightbox script written in pure JavaScript
:zap: Simple and easy to use lightbox script written in pure JavaScript - GitHub - feimosi/baguetteB...

デモページはこちら。

baguetteBox.js | Demo

Lity

Cocoonが採用している中では最も軽量な画像拡大効果ライブラリがこのLityです。

とにかくクリック(タップ)した画像が、背景が暗転して拡大表示ができれば良いという場合はこれが最も手軽かと。

lity

画像以外をクリック(タップ)することで暗転は解除されます。

使用ライブラリはこちら。

GitHub - jsor/lity: Lightweight, accessible and responsive lightbox.
Lightweight, accessible and responsive lightbox. Contribute to jsor/lity development by creating an ...

デモページはこちら。

Lity - Lightweight, accessible and responsive lightbox
Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframe...

Lightbox

ちょっと昔なら、画像拡大ライブラリならコレというくらいの老舗のライブラリ。

Cocoonが採用している画像拡大ライブラリの中では、多少重めかもしれません。

ただ、画像拡大時にアニメーションで動きがあるので、ちょっと違った見せ方はできるかもしれません。

lightbox

画像以外をクリック(タップ)することで暗転は解除されます。

使用ライブラリはこちら。

GitHub - lokesh/lightbox2: THE original Lightbox script (v2).
THE original Lightbox script (v2). Contribute to lokesh/lightbox2 development by creating an account...

デモページはこちら。

Lightbox2
Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on a...

まとめ

今回これら4つの画像の拡大効果が揃ったことで、大体の仕様目的にかなう画像の見せ方ができるようになったのではないかと思います。

  •  Spotlight(軽量・連続表示・拡大・スライドショー・スワイプ対応)
  • baguetteBox(軽量・連続表示・スワイプ対応)
  • Lity(軽量・1枚ずつ表示)
  • Lightbox(有名ライブラリ・アニメーション有り)

特に写真メインのサイトでない限りは、個人的にデフォルトで設定してある「baguetteBox」が最も使い勝手が良いのではないかと思っています。

投稿・固定ページ

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

\WordPressの情報を発信中!/

わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99%以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。

まずは無料お試し10日間。

サービス運営期間:20年

Cocoon
タイトルとURLをコピーしました