まだデータがありません。
画像ポップアップ・スライドショー「colorbox」
当ページのリンクには広告が含まれています。
スポンサーリンク
画像ポップアップ・スライドショーjQueryプラグイン「colorbox」を紹介します。
jQueryプラグイン「colorbox」
jQueryプラグイン「colorbox」は、画像をクリックするとその画像がページ遷移することなく大きくポップアップとして表示され、さらに設置した矢印をクリックするとスライドショーが実現できるという便利プラグインです。「Lightbox 2」とどっちがいいかな。
スポンサーリンク
画像をクリックすると画像が切り替わります。まずは、デモで実感してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Demo - jQueryプラグインまとめのカルマ</title>
<link rel="stylesheet" href="css/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"none", width:"75%", height:"75%"});
$(".group3").colorbox({rel:'group3', slideshow:true});
});
</script>
</head>
<body>
<h1>Colorboxのデモでーす。</h1>
<h2>普通のバージョン</h2>
<p><a class="group1" href="img/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group1" href="img/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group1" href="img/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
<h2>枠が固定のバージョン</h2>
<p><a class="group3" href="img/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group3" href="img/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group3" href="img/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
<h2>スライドショー（右下の▶ボタンで制御できるよ）</h2>
<p><a class="group4" href="img/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group4" href="img/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group4" href="img/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
</body>
</html>
その他、さまざまなオプションや詳細はこちらからどうぞ。
» Colorbox - a jQuery lightbox
スポンサーリンク