現在デフォルトスキンとして「COLORS(ブルー)」を適用中。

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

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

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

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

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

スポンサーリンク

Spotlight

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

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

spotlight

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

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

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

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

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

デモページはこちら。

Spotlight.js Demo

baguetteBox

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

baguettebox

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

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

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

デモページはこちら。

baguetteBox.js | Demo

Lity

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

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

lity

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

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

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

デモページはこちら。

Lity - Lightweight, accessible and responsive lightbox
Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content out of the box.

Lightbox

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

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

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

lightbox

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

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

lokesh/lightbox2
THE original Lightbox script. Contribute to lokesh/lightbox2 development by creating an account on GitHub.

デモページはこちら。

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

まとめ

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

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

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

投稿・固定ページ
スポンサーリンク
わいひら

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

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年3ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年1ヶ月

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

コメント テーマの質問はフォーラムへ

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