Wordpress

画像をポップアップウィンドウで表示する方法

画像を別ウィンドウで表示したい。

商品画像の紹介をクールなポップアップウィンドウで表示するWordPressのプラグインご紹介。
画像をポップアップウィンドウで表示する方法
複数の商品画像を紹介する時など、すべてを大きく埋め込むと、ページが長くなってしまいます。
また、URLリンクを貼るだけでは、ウィンドウが増えるだけでなく、別サイトへ離脱される可能性も増えてしまいます。
そこで今回ご紹介するのが
ページを離脱させることなく、ポップアップウィンドウで動画や画像を表示させるプラグイン
Lightbox Plus ColorBoxです。動画のポップアップはこちらを参考にしてください。

ポップアップウィンドウで表示する

こちらのサンプルをクリックしてご覧ください。
テキストからの画像リンク1 テキストからの画像リンク2

悩んだ時は”セクシー”に考えよう 水着画像をクリックするとポップアップが開きます

Lightbox Plus ColorBox 使い方

プラグイン 新規追加 をクリックし、検索窓に「Lightbox Plus ColorBox」と入力し検索します。以下のようなプラグインが見つかったらインストールします。
Lightbox Plus ColorBox 使い方
インストールが終了したら、[有効」をクリックします。

Lightbox Plus ColorBoxの設定

有効化ができたら、ポップアップウィンドウのデザイン、動きを設定します。
外観をクリックすると、Lightbox Plus ColorBoxのメニューがあります。
Lightbox Plus ColorBox 設定

基本設定一般項目

Lightbox Plus Colorbox - Base Settings項目の「General」タブの設定です。
Lightbox Plus ColorBoxの設定
Lightbox Plus Colorboxでは画像と動画のポップアップ表示ができますが、動画を表示させるためにはUse Secondary Lightboxを使います。チェックを入れておきます。
Hide "About Lightbox Plus Colorbox"にチェックを入れておくとトップに表示されるAbout Lightbox Plus Colorboxが表示されなくなります。

基本設定 スタイル

ポップアップのスタイルを選択します。現在ポップアップスタイルでは×印(Close)ボタンが作動しないものがあります。おすすめは「FancyPants」「Shadowed」「ShadowFax」です。
Lightbox Plus Colorbox 設定

画像ポップアップの設定

画像と動画どちらもポップアップ表示できますが、画像をポップアップさせるためには、Primary Lightbox Settingsで設定を行います。Lightbox Plus Colorbox - Primary Lightbox Settingsを表示します。
pop05
sizeタブ
ポップアップウィンドウの表示サイズです。画像の元ファイルによって縮尺(%)でいれるか固定サイズ(px)で設定するなどお好みで調整可能です。「Resize]にはチェックを入れておきましょう(まずは初期設定でお試しください)。
画像サイズ設定
Postiton タブ
ポップアップウィンドウが表示される位置です。初期設定では元ウィンドウの真ん中に表示されます(まずは初期設定でお試しください)。
Interface タブ
インターフェース
ウィンドウを閉じる時などのインターフェースの設定です。
Close image text サンプルでは 「Close」を「閉じる」に変更してみました。
図のようにチェックを入れておきましょう。
Slideshow タブ
多くの画像をスライドショウタイプで表示させるときはここにチェックを入れておきます。
OTHER タブ
テキストのリンクでポップアップするために、「Auto-Lightbox Text Links:」にチェックを入れておきます
popup07
全ての設定ができたら「Save all Setings」をクリックして保存します。
保存

画像をポップアップ表示する方法

テキストリンクから画像のポップアップウィンドウを作成する テキストからの画像リンク1
コード例(<、>を半角英数にします)
<a href="http://www.webdemo.jp/db/wp-content/uploads/2014/05/415michi.jpg" alt="サンプル画像">テキストからの画像リンク1</a>
このようになります。
<a href="画像のURL">テキストからの画像リンク1</a>

画像からポップアップウィンドウを作成する
サンプル画像
コード例(<、>を半角英数にします)
<a href="http://www.webdemo.jp/db/wp-content/uploads/2015/04/2178.jpg"><img src="http://www.webdemo.jp/db/wp-content/uploads/2015/04/2178-80x80.jpg" alt="サンプル画像" width="80" height="80" /></a>
このようになります。
<a href="ポップアップした画像のURL">画像のURL</a>

いかがでしょうか? 商品画像を大きく見せたい場合時など、このプラグインを使うとページの離脱なしに、画像を大きく見せることができます。おしゃれですね。設定も簡単でした。ぜひお試しください (プラグインのインストールは自己責任でお願いします) Lightbox Plus Colorbox

-Wordpress
-, , , ,

おすすめコンテンツ

1
iPhone動画作成講座 一生使える動画スキルを身につける

仕事で使える動画が誰でも作れるようになります この講座のメリットは短時間で「仕事 ...

2
動画マーケティング 動画で集客 カスタマイズサービス

動画を活用して集客したい方に このサービスは、 動画を使って集客したいけど、何か ...

3
動画マーケティングとは? 第1回 (全4回)

動画マーケティングとは何なのか? 動画マーケティングのカテゴリーには多くの記事を ...

4
動画を使った集客法 メールマガジンのご案内

中小企業のウェブ集客に自社メディアを活用する方法 「他と同じことをやって他よりも ...

5
当社の実績と選ばれる理由

株式会社ウェブデモについて 2003年より海外パソコンソフトの翻訳販売を開始。動 ...