Colorboxの色んな利用方法

ホーム > ブログカスタマイズ > プラグイン > Colorboxの色んな利用方法

Colorboxの色んな利用方法

2014.09.08

「Colorbox」の色んな利用方法と、サンプルをまとめたページです。

■導入方法については下記のページをご覧下さい。
「　 別窓を開かずに拡大画像を表示する方法　」

■「Colorbox」のダウンロード及び、各種説明は こちら
説明については「Colorbox」のページに英語で記載されてます。

【「Colorbox」の利用方法】

1.テキストリンクから画像を表示

テキストリンクをクリックしたら画像を表示する方法
導入方法のページではサムネイルをクリックしたら拡大画像が表示される説明だけだったので
一応、テキストリンクから画像を表示する方法のサンプルです。
※ヘッダー部分（<head> ～ </head>の間）に追記したソースに変更箇所はありません。
（前の記事の「Colorbox」の導入手順の設定のまま）

サンプル１のリンク　　サンプル２のリンク　　サンプル３のリンク

リンク部分の記述

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017.jpg" class="open" 
title="サンプル１のタイトル">サンプル１のリンク</a>

※class="open"だけ指定していれば、あとは通常のリンクと同じで<a>タグで文字を挟めばOKです。（リンク先は画像のURL）

このページのトップへ

2.画像の表示領域を指定する

表示する内容に関わらず、表示領域（枠の大きさ）を指定する。
小さい画像でも大きい画像でも表示する領域の大きさを固定したり、
画像を表示する際に、ウインドウ枠に対して割合で指定する事も可能です。

【サンプル1】
枠固定横628px × 縦512px

原寸：横800px × 縦600px

【サンプル2】
枠変動横50％ × 縦50％

原寸：横800px × 縦600px

【サンプル3】
枠変動横90％ × 縦90%

原寸：横1024px × 縦768px

上記サンプルのヘッダー部分の記述

<script type="text/javascript">
$(function(){
$("a.open").colorbox({maxWidth:"90%", maxHeight:"90%"});
$("a.open600").colorbox({width:"628px", height:"512px"});
$("a.open50p").colorbox({width:"50%", height:"50%"});
});
</script>

■各サムネイルの記述
サンプル１

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0033.jpg" class="open600" 
title="サンプル1"><img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0033s.jpg" 
alt="サンプル1" border="0" /></a>

※リンク先の原画像のサイズに関わらず、表示領域は固定で横628px × 縦512px
※リンク先の原画像が表示領域より小さくても表示領域の大きさは変わりません。
※リンク先の原画像が表示領域より大きい場合は表示領域に合わせて縮小表示になります。

サンプル2

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0032.jpg" class="open50p" 
title="サンプル2"><img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0032s.jpg" 
alt="サンプル2" border="0" /></a>

※ウインドウのサイズに対して横50％ × 縦50％の表示領域になります。
※ウインドウサイズに比例した表示領域になるのでリンク先の原画像が小さい場合は余白が大きくなる。
※リンク先の原画像が表示領域より大きい場合は、表示領域に合わせて縮小表示となります。

サンプル3

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0034.jpg" class="open" 
title="サンプル3"><img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0034s.jpg" 
alt="サンプル3" border="0" /></a>

※表示領域は最大でウインドウサイズの横90％ × 縦90% になります。
※リンク先の原画像の大きさで表示になり、ウインドウサイズの90％より大きい場合は縮小表示。
※ウインドウより大きいサイズの画像を表示しないように、私のブログはこれを基本設定としてます。

このページのトップへ

3.画像の表示方法を変える

画像の表示方法や、画像が開くまでの速度、背景の透明度などを指定出来ます。
デフォルトの設定は下記となります。
({transition:"elastic",speed:350,opacity:0.85})
↑何も設定して無い場合はこのデフォルトの設定値で開きますので、
変更したい場合のみ各設定値を指定して変更します。

transition＝表示方法（"elastic"、"fade"、"none"の3種類）
speed＝表示速度（数字が少ない程表示速度が速く、数字が大きい程表示速度が遅くなります）
opacity＝背景の透明度（0～1で設定する、1に近い程透明度が低くなります。）

【サンプル1】
elastic：デフォルト

【サンプル2】
fade：フェード

【サンプル3】
none：効果なし

上記サンプルのヘッダー部分の記述

<script type="text/javascript">
$(function(){
$("a.elastic").colorbox({transition:"elastic",speed:1500,opacity:0.9});
$("a.fade").colorbox({transition:"fade",speed:1000,opacity:0.6});
$("a.none").colorbox({transition:"none",opacity:0.3});
});
</script>

■各サムネイルの記述
サンプル１

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0033.jpg" class="elastic" 
title="サンプル1">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0033s.jpg" alt="サンプル1" 
border="0" /></a>

※transition:"elastic"はデフォルトなので指定しなくても同じです。
※speed:1500の部分は速度の変化が分かり易いように、あえて遅めにしてます。
※opacity:0.9は背景の透明度が低く、背景色がより強調されます。（背景色自体はCSSで変更可能）

サンプル2

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0032.jpg" class="fade" 
title="サンプル2">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0032s.jpg" alt="サンプル2" 
border="0" /></a>

※transition:"fade"を設定してるのでデフォルトとの印象が違います。
※speed:1000 デフォルト時と、サンプル1との間位の表示速度です。
※opacity:0.6 背景の透明度が分かり易いように0.3ずつ下げてます。

サンプル3

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0032.jpg" class="none" 
title="サンプル3">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0032s.jpg" alt="サンプル3" 
border="0" /></a>

※transition:"none"を指定してるので表示効果は無しです。
※speedの設定は無し、表示効果が無いなのですぐ開く設定になってます。
※opacity:0.3 ここまで下げると、かなり背景が透明になります。

このページのトップへ

4.画像をグループ化してギャラリー表示する

複数の画像をグループ化し、ギャラリー表示する事が可能です。
今までの説明では1枚の画像を単体で開いて閉じるだけでしたが、複数の画像をグループ化する事によって
画像を開いた状態で、次の画像を見たり戻ったりが可能になります。

●グループ化の方法　その１

【サンプル1】
rel="group"

【サンプル2】
rel="group"

【サンプル3】
rel="group"

※上記では各サムネイルの<a>タグに「rel="group"」を追加してグループ化を指定してます。
"group"の名前は任意ですので、グループ化したい物に同じ名前を付ければOKです。
ヘッダー部分への追記は必要ないです。（前の記事の「Colorbox」の導入手順の設定）

■各サムネイルの記述

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0033.jpg" class="open" 
rel="group" title="サンプル1">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0033s.jpg" alt="サンプル1" 
border="0" /></a>

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0032.jpg" class="open" 
rel="group" title="サンプル2">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0032s.jpg" alt="サンプル2" 
border="0" /></a>

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017.jpg" class="open" 
rel="group" title="サンプル3">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017s.jpg" alt="サンプル3" 
border="0" /></a>

※上記サンプルの場合、class指定もrel要素も同じで、違うのは画像のURLだけです。

●グループ化の方法　その2

【サンプル1】
rel="group1"

【サンプル2】
rel="group1"

【サンプル3】
rel="group1"

上記サンプルのヘッダー部分の記述

<script type="text/javascript">
$(function(){
$("a[rel='group1']").colorbox({speed:450,opacity:0.5});
});
</script>

※<a>タグのrel要素を"group1"に指定した物がグループ化されます。
※このパターンではグループ単位でcolorboxの適用と設定値を指定してるのでclass指定は不要です。
※サンプルでは最初のグループ化と差別化する為にあえて違う設定にしてますが、
設定値が不要の場合は.colorbox({speed:450,opacity:0.5});の部分を.colorbox();にすればOKです。

■各サムネイルの記述

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0033.jpg" rel="group1" 
title="サンプル1">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0033s.jpg" alt="サンプル1" 
border="0" /></a>

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0032.jpg" rel="group1" 
title="サンプル2">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0032s.jpg" alt="サンプル2" 
border="0" /></a>

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017.jpg" rel="group1" 
title="サンプル3">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017s.jpg" alt="サンプル3" 
border="0" /></a>

※上記サンプルの場合、rel要素をヘッダー部分に記述した名前と同じ物にする。
class指定は不要で、グループ単位で設定値を指定する。

同じページ内でグループを分けたい場合は、グループ名を分ければOKです。
例えば、"group1"と"group2"で分けてそれぞれをヘッダー部分に記述する。

ヘッダー部分への記述はこんな感じです。

<script type="text/javascript">
$(function(){
$("a[rel='group1']").colorbox({speed:450,opacity:0.5});
$("a[rel='group2']").colorbox({opacity:0.8});
});
</script>

それから、各画像の<a>タグ内のrel要素に付ける名前を分けたいグループに合わせて使い分ける。
グループ化その1の方法の場合はグループ分けをする場合でも、ヘッダー部分への記述は不要です。
但し、class指定もrel要素も付けないといけないので数が多い場合やグループ単位で設定を
必要とする場合はグループ化その2の方法でやる方が楽だと思います。

このページのトップへ

5.画像をグループ化してスライドショーで表示する

グループ化する仕組みは上記の項目と同じですが、
こちらの場合はスライドショーなので自動で画像が切り替わります。
スライドショーを停止するボタンもあるので途中で止める事も可能です。

画像が切り替わる速度のデフォルト設定
slideshowSpeed: 2500（ミリ秒単位で指定可能：1000＝1秒）

【サンプル1】
rel="slide"

【サンプル2】
rel="slide"

【サンプル3】
rel="slide"

上記サンプルのヘッダー部分の記述

<script type="text/javascript">
$(function(){
$("a[rel='slide']").colorbox({slideshow:true,slideshowSpeed: 5000});
});
</script>

※rel要素でグループ化してスライドショーをするようにしてます。
※上記の記述方法の場合、class指定は不要です。
※スライドショーの速度をデフォルトの2倍にしてるので、5秒単位で画像が切り替わります。

■各サムネイルの記述

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0033.jpg" rel="slide" 
title="サンプル1">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0033s.jpg" alt="サンプル1" 
border="0" /></a>

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0032.jpg" rel="slide" 
title="サンプル2">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0032s.jpg" alt="サンプル2" 
border="0" /></a>

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017.jpg" rel="slide" 
title="サンプル3">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017s.jpg" alt="サンプル3" 
border="0" /></a>

このページのトップへ

6.YouTube等の動画を表示する

YouTube等の動画をインラインフレームを使って表示する事が可能です。

通常、YouTube等の動画を表示する場合、動画ページへのリンクを貼るか、表示するページ内に
インラインフレームを使って直接埋め込むかの主に２つの方法になるかと思います。

例．通常の方法はこんな感じです。

・テキストリンクの場合
クリックすると別ウインドウで動画ページが開きます（リンク先で音が鳴ります）

<a href="http://youtu.be/b4VW1H_tcYM" target="_blank" title="リンクのタイトル（任意）">
クリックすると別ウインドウで動画ページが開きます</a>

・動画を埋め込む場合

<iframe width="560" height="315" src="//www.youtube.com/embed/b4VW1H_tcYM" frameborder="0" 
allowfullscreen></iframe>

「Colorbox」を使った場合のサンプル　→
例としてサムネイルを使ってます。（もちろんテキストだけでも可能）

上記の通常通りのやり方とは違い、別ページを開いたり
ページ内に動画を直接表示するスペースを確保する必要が無いので
上手く使うと、ページのレイアウトや動画の見せ方の幅が広がります。

但し、これだけでは動画である事が分からないので、
動画である事を明記するか、サムネイルを使う場合は工夫して

例えば、画像に「」を付けて、マウスを乗せるとその「」の色が変わる等すると動画を開くイメージが伝わり易いかも...　（ここではサンプルなので、そこまでしません＾＾；）

上記サンプルのヘッダー部分の記述

<script type="text/javascript">
$(function(){
$("a.youtube").colorbox({iframe:true, innerWidth:600, innerHeight:400});
});
</script>

※iframe:trueでインラインフレームを使って表示する指定をしています。（デフォルトでは"false "）
※innerWidth:600, innerHeight:400の部分で横幅と縦幅を指定してますので、
ここの数字を変更すれば表示領域を小さくしたり、大きくしたり出来ます。
※"youtube"の部分の名前は任意なので、好きな名前で設定して下さい。（class名）

■サムネイル部分の記述

<a href="http://www.youtube.com/embed/b4VW1H_tcYM" class="youtube" 
title="「Colorbox」を使って動画を表示">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0035.gif" 
alt="サムネイルの画像タイトル" border="0" /></a>

※赤の部分が動画のURLです。
※ヘッダー部分に記述したclass名と同じ"youtube"を指定してます。
※緑の部分はサムネイルの画像URLです。

このページのトップへ

7.Webページを表示する

Webページをインラインフレームを使って表示する事が可能です。

ツールバーやアドレスバーの表示が無く、Webページの内容のみを表示するので
これもアイデア次第で色んな使い方が出来そうです。

下記サンプルでは、このブログの各ページを開くようにして、さらにそれをグループ化してます。

【サンプル1】
トップページ

【サンプル2】
カテゴリ別全記事一覧

【サンプル3】
2014年09月の記事

上記サンプルのヘッダー部分の記述

<script type="text/javascript">
$(function(){
$("a.website").colorbox({iframe:true, width:"80%", height:"80%"});
});
</script>

※iframe:trueでインラインフレームを使って表示する指定をしています。（デフォルトでは"false "）
※width:"80%", height:"80%" 表示領域はウインドウサイズに対して縦横80％の大きさを指定。

■各サムネイルの記述

<a href="http://interest2014.blog.fc2.com/" class="website" rel="group2" 
title="INTEREST（インタレスト） トップページ">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0036.gif" 
alt="サムネイルの画像タイトル" border="0" /></a>

<a href="http://interest2014.blog.fc2.com/?all" class="website" rel="group2" 
title="INTEREST（インタレスト） カテゴリ別全記事一覧">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0036.gif" 
alt="サムネイルの画像タイトル" border="0" /></a>

<a href="http://interest2014.blog.fc2.com/blog-date-201409.html" class="website" 
rel="group2" title="INTEREST（インタレスト） 2014年09月の記事">
<img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0036.gif" 
alt="サムネイルの画像タイトル" border="0" /></a>

※各サムネイルのリンク先URLを変えて、それぞれ違うページを開きます。
※class="website"でヘッダー部分に記述した内容が適用されて、
　rel="group2"でグループ化してます。（上記のグループとは名前を変えて違うグループにしてます）
※サムネイルの画像は手抜きなので、全て同じ画像です...＾＾；

ブログランキングに参加中♪
良かったらポチっとお願いします