画像ポップアップ・スライドショーjQueryプラグイン「colorbox」を紹介します。
jQueryプラグイン「colorbox」
jQueryプラグイン「colorbox」は、画像をクリックするとその画像がページ遷移することなく大きくポップアップとして表示され、さらに設置した矢印をクリックするとスライドショーが実現できるという便利プラグインです。「Lightbox 2」とどっちがいいかな。
画像をクリックすると画像が切り替わります。まずは、デモで実感してみてください。
「colorbox」のデモ
デモのソース（HTML + jQuery）
<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> |
$(document).ready(function(){ |
$(".group1").colorbox({rel:'group1'}); |
$(".group2").colorbox({rel:'group2', transition:"none", width:"75%", height:"75%"}); |
$(".group3").colorbox({rel:'group3', slideshow:true}); |
<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> |
<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> |
その他、さまざまなオプションや詳細はこちらからどうぞ。
» Colorbox - a jQuery lightbox