NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

jQueryで動く軽量Lightbox風プラグイン「Colorbox」

2014年5月27日jQueryプラグイン活用

jQueryで動く軽量Lightbox風プラグイン「Colorbox」

個人的にLightbox風プラグインは「Colorbox」を使えばほぼ問題ないと思います。機能も充実していますし、スマホは勿論、古いIE等のブラウザにも対応しています。

デモページ

JavaScript

(function($){
	$(function(){
		$('a[href*="jpg"]').colorbox({
			opacity: '0.7',
			maxWidth:'100%',
			maxHeight:'100%',
			speed:'200',
			rel:'photo'
		});	
	});	
})(jQuery);

HTML

<nav>
	<ul>
		<li><a href="img01.jpg" class="photo" title="photo01"><img src="img01.jpg" width="150" height="99"></a></li>
		<li><a href="img02.jpg" class="photo" title="photo02"><img src="img02.jpg" width="150" height="99"></a></li>
		<li><a href="img03.jpg" class="photo" title="photo03"><img src="img03.jpg" width="150" height="99"></a></li>
	</ul>
</nav>

CSS

nav {
	text-align: center;
}
nav li {
	margin: 0 12px;
	display: inline-block;
}
nav a {
	display: block;
	box-shadow: 0 0 10px rgba(00,00,00,.5);
	background-color: #ffffff;
}
nav a img {
	-webkit-transition: .2s linear;
	-moz-transition: .2s linear;
	-o-transition: .2s linear;
	opacity: 1;
}
nav a:hover img {
	opacity: .5;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. jQueryで動く軽量Lightbox風プラグイン「Colorbox」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com