画像ポップアップ・スライドショー「Lightbox 2」
当ページのリンクには広告が含まれています。
スポンサーリンク
画像ポップアップ・スライドショーを簡単に導入できるjQueryプラグイン「Lightbox 2」を紹介します。
jQueryプラグイン「Lightbox 2」
jQueryプラグイン「Lightbox 2」は、新しいページを開かずに画像ポップアップを表示してくれます。さらにスライドショーまでも簡単に作成できます。これは便利！そして、かっこいい！
スポンサーリンク
デモ画面の画像をクリックするとポップアップが表示されるので、画像左右にある矢印をクリックするとスライドショーが楽しめます。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="Lightbox 2のデモでーす。">
<title>Lightbox 2 - jQuery Plugin Demo</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
jQuery(document).ready(function($) {
$('a').smoothScroll({
speed: 1000,
easing: 'easeInOutCubic'
});
$('.showOlderChanges').on('click', function(e){
$('.changelog .old').slideDown('slow');
$(this).fadeOut();
e.preventDefault();
})
});
</script>
</head>
<body>
<h1>Lightbox 2のデモでーす。</h1>
<p>画像をクリックするとポップアップが表示されます。さらに画像の左右にある矢印をクリックするとスライドショーが！</h3>
<div class="imageRow">
<div class="set">
<div class="single first">
<a href="images/01-red.png" rel="lightbox[plants]" title="赤だよー。"><img src="images/thumb-01-red.png" alt="Plants: image 1 0f 7 thumb" /></a>
</div>
<div class="single">
<a href="images/02-orange.png" rel="lightbox[plants]" title="橙だよー。" ><img src="images/thumb-02-orange.png" alt="Plants: image 2 0f 7 thumb" /></a>
</div>
<div class="single">
<a href="images/03-yellow.png" rel="lightbox[plants]" title="黄だよー。"><img src="images/thumb-03-yellow.png" alt="Plants: image 3 0f 7 thumb" /></a>
</div>
<div class="single">
<a href="images/04-green.png" rel="lightbox[plants]" title="緑だよー。"><img src="images/thumb-04-green.png" alt="Plants: image 4 0f 7 thumb" /></a>
</div>
<div class="single">
<a href="images/05-blue.png" rel="lightbox[plants]" title="青だよー。"><img src="images/thumb-05-blue.png" alt="Plants: image 5 0f 7 thumb" /></a>
</div>
<div class="single">
<a href="images/06-indigo.png" rel="lightbox[plants]" title="藍だよー。"><img src="images/thumb-06-indigo.png" alt="Plants: image 6 0f 7 thumb" /></a>
</div>
<div class="single last">
<a href="images/07-purple.png" rel="lightbox[plants]" title="紫だよー。"><img src="images/thumb-07-purple.png" alt="Plants: image 7 0f 7 thumb" /></a>
</div>
</div>
</div>
</body>
</html>
スポンサーリンク