画像ポップアップ・スライドショー「Lightbox 2」

tags:,

画像ポップアップ・スライドショーを簡単に導入できるjQueryプラグイン「Lightbox 2」を紹介します。

jQueryプラグイン「Lightbox 2」

jQueryプラグイン「Lightbox 2」は、新しいページを開かずに画像ポップアップを表示してくれます。さらにスライドショーまでも簡単に作成できます。これは便利!そして、かっこいい!

スポンサーリンク

デモ画面の画像をクリックするとポップアップが表示されるので、画像左右にある矢印をクリックするとスライドショーが楽しめます。

「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>
スポンサーリンク

関連記事(一部広告含む)