Bootstrap jQeuryプラグインサンプル

Bootstrap jQueryプラグインサンプル [Colorbox] Lightbox風画面ポップアップ・スライドショー

Posted 8月 27 2014 by 小野 茂  , , ,

Lightbox風画面ポップアップ・スライドショーを簡単に実装出来るプラグイン Colorbox

Bootstrapで使えるjQueryのプラグインを紹介します。
今回は、イメージギャラリーなどで、スライドショーなどを簡単に実装できるプラグインを紹介します。

Javascriptでは、かなり前からLightboxという有名なプラグインがありましたが、jQueryのプラグインでも
Lightbox風なプラグインが多く開発されています。

今回は、Colorboxというプラグインを紹介します。
スタイルが複数用意されており、Bootstrapでも利用しやすいスタイルも提供されています。
私が選択しているのは、「example4」のスタイルです。

白で、シャドーがついていますが、Bootstrapのテンプレートと相性が良いと思います。

Colorbox – a jQuery lightbox

http://www.jacklmoore.com/colorbox/

Colorbox – a jQuery lightbox →

http://github.com/jackmoore/colorbox

GitHub:aishek/jackmoore/colorbox →

使い方

スタイルを確認します。

スタイルはexample1~example5まであります。
サンプルページにてdownloadの上にあるリンクが1~5までありますので、見て確認します。
しつこいようですが、私の好みは4です。
スタイルを決定したら、解凍ディレクトリのexample4/colorbox.cssをコピーします。

言語を設定します。

i18n(internationalization:国際化)フォルダーに「jquery.colorbox-ja.js」がありますので、コピーします。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap jQueryサンプル</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- example4/colorbox.css -->
<link rel="stylesheet" href="colorbox.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- Fixed navbar -->
	<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Boostrap#jQuery.plugin</a>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">active</a></li>
				</ul>
			</div><!--/.nav-collapse -->
		</div>
	</div>

	<div class="container">
		<div class="page-header">
			<h2>
			<span class="glyphicon glyphicon-info-sign"></span>
			Lightbox風画面ポップアップ・スライドショー
			</h2>
		</div>

		<div class="row">
			<div class="col-xs-12 col-md-6 col-lg-3">
				<div class="thumbnail">
					<a href="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc001.jpg" class="gp1" title="loc001.jpgです">
					<img src="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc001.jpg">
					</a>
					<div class="caption">
						<p>loc001.jpgです</p>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6 col-lg-3">
				<div class="thumbnail">
					<a href="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc002.jpg" class="gp1" title="loc002.jpgです">
					<img src="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc002.jpg">
					</a>
					<div class="caption">
						<p>loc002.jpgです</p>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6 col-lg-3">
				<div class="thumbnail">
					<a href="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc003.jpg" class="gp1" title="loc003.jpgです">
					<img src="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc003.jpg">
					</a>
					<div class="caption">
						<p>loc003.jpgです</p>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6 col-lg-3">
				<div class="thumbnail">
					<a href="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc004.jpg" class="gp1" title="loc004.jpgです">
					<img src="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc004.jpg">
					</a>
					<div class="caption">
						<p>loc004.jpgです</p>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6 col-lg-3">
				<div class="thumbnail">
					<a href="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc005.jpg" class="gp1" title="loc005.jpgです">
					<img src="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc005.jpg">
					</a>
					<div class="caption">
						<p>loc005.jpgです</p>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6 col-lg-3">
				<div class="thumbnail">
					<a href="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc006.jpg" class="gp1" title="loc006.jpgです">
					<img src="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc006.jpg">
					</a>
					<div class="caption">
						<p>loc006.jpgです</p>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6 col-lg-3">
				<div class="thumbnail">
					<a href="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc007.jpg" class="gp1" title="loc007.jpgです">
					<img src="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc007.jpg">
					</a>
					<div class="caption">
						<p>loc007.jpgです</p>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6 col-lg-3">
				<div class="thumbnail">
					<a href="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc008.jpg" class="gp1" title="loc008.jpgです">
					<img src="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc008.jpg">
					</a>
					<div class="caption">
						<p>loc008.jpgです</p>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6 col-lg-3">
				<div class="thumbnail">
					<a href="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc009.jpg" class="gp1" title="loc009.jpgです">
					<img src="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc009.jpg">
					</a>
					<div class="caption">
						<p>loc009.jpgです</p>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6 col-lg-3">
				<div class="thumbnail">
					<a href="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc010.jpg" class="gp1" title="loc010.jpgです">
					<img src="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc010.jpg">
					</a>
					<div class="caption">
						<p>loc010.jpgです</p>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6 col-lg-3">
				<div class="thumbnail">
					<a href="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc011.jpg" class="gp1" title="loc011.jpgです">
					<img src="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc011.jpg">
					</a>
					<div class="caption">
						<p>loc011.jpgです</p>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-6 col-lg-3">
				<div class="thumbnail">
					<a href="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc012.jpg" class="gp1" title="loc012.jpgです">
					<img src="http://www.sakc.jp/blog/wp-content/uploads/2014/08/loc012.jpg">
					</a>
					<div class="caption">
						<p>loc012.jpgです</p>
					</div>
				</div>
			</div>
		</div>
	</div><!-- /container -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<script src="jquery.colorbox-ja.js"></script>
<script src="script.js"></script>
</body>
</html>

Javascript(script.js)

$(function(){
	$('.gp1').colorbox({
		'rel': 'slideshow',
		'slideshow': true
	});
	$('img').css({
		'width':'100%',
		'height':'180px'
	});
});

Boostrapのthumbnailを利用しています。ギャラリーの場合はthumbnailのcaptionは別のプラグインなどを利用して表示すると良いかと思います。
また、画像の高さを強制的に180pxとしていますが、リキッド系のプラグインなどを利用して、配置を調整又は画像の高さを自動調整したりします。
optionに指定しているslideshowを設定しない場合は、スライドショーは行いません。
aタグにgp1と指定していますが、画像ではなくaタグがセレクタになります。
Javascriptにrel:xxxの指定がありますが、指定しないとグループ化できずに、単体表示となります。

サンプル

Bootstrapのthumbnailを利用し、example4のスタイルを利用したサンプルです。

http://jsdo.it/Shigeru.Ono/uxvH/fullscreen


jsdoit:Lightbox風画面ポップアップ・スライドショーを簡単に実装出来るプラグイン Colorbox →


Bootstrap CSS3 HTML5 jquery



  未経験OKの仕事 |  上場企業の仕事 |  高待遇の仕事 |  外資系の仕事 |  社内SEで検索 |  自社サービスで検索





メールアドレス
ご質問・問い合わせ等、ご自由にお書きください。