このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/colorbox.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.colorbox-min.js"></script>
<script>
	$(window).load(function(){
		$('#Colorbox .colorbox a').colorbox({rel:'group1'});
	});
</script>


//オプション一覧
// data sources
html: false,
photo: false,
iframe: false,
inline: false,

// behavior and appearance
transition: "elastic",
speed: 300,
fadeOut: 300,
width: false,
initialWidth: "600",
innerWidth: false,
maxWidth: false,
height: false,
initialHeight: "450",
innerHeight: false,
maxHeight: false,
scalePhotos: true,
scrolling: true,
href: false,
title: false,
rel: false,
opacity: 0.9,
preloading: true,
className: false,
overlayClose: true,
escKey: true,
arrowKey: true,
top: false,
bottom: false,
left: false,
right: false,
fixed: false,
data: undefined,
closeButton: true,
fastIframe: true,
open: false,
reposition: true,
loop: true,
slideshow: false,
slideshowAuto: true,
slideshowSpeed: 2500,
slideshowStart: "start slideshow",
slideshowStop: "stop slideshow",
photoRegex: /.(gif|png|jp(e|g|eg)|bmp|ico|webp)((#|?).*)?$/i,

// alternate image paths for high-res displays
retinaImage: false,
retinaUrl: false,
retinaSuffix: '@2x.$1',

// internationalization
current: "image {current} of {total}",
previous: "previous",
next: "next",
close: "close",
xhrError: "This content failed to load.",
imgError: "This image failed to load.",

// accessbility
returnFocus: true,
trapFocus: true,

// callbacks
onOpen: false,
onLoad: false,
onComplete: false,
onCleanup: false,
onClosed: false
<ul class="colorbox">
	<li><a class="group1" href="<PATH>/img01.jpg" title="img01"><img src="<PATH>/img01.jpg" alt=""></a></li>
	<li><a class="group1" href="<PATH>/img05.jpg" title="img02"><img src="<PATH>/img05.jpg" alt=""></a></li>
	<li><a class="group1" href="<PATH>/img07.jpg" title="img03"><img src="<PATH>/img07.jpg" alt=""></a></li>
	<li><a class="group1" href="<PATH>/img02.jpg" title="img04"><img src="<PATH>/img02.jpg" alt=""></a></li>
	<li><a class="group1" href="<PATH>/img04.jpg" title="img05"><img src="<PATH>/img04.jpg" alt=""></a></li>
	<li><a class="group1" href="<PATH>/img06.jpg" title="img06"><img src="<PATH>/img06.jpg" alt=""></a></li>
</ul>

Colorboxについて

Colorboxは、簡単にモーダル、ポップアップウィンドウを設置することができるプラグインです。
オプションも非常に豊富に用意されているので、シンプルな使い方から、複雑な使い方まで
また、細かい部分まで設定可能です。
また、5種類のテーマから見た目を選ぶことができます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • custombox

    custombox

    豊富なアクションを持つモーダルを設置できる

  • MagnificPopup

    MagnificPopup

    画像、フォーム、動画などをモーダルで表示できる

  • photobox

    photobox

    とりあえずイケてます

  • Avgrund

    Avgrund

    他とは違った現れ方をするモーダル、ポップアップ

  • popeye

    popeye

    一味違うモーダル・ポップアップ