モーダルウィンドウ - fancyBoxとColorBox

画像の準備

Photoshopのレイヤーを適切な名前に変更しておく

fancyBox

ダウンロード

《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>fancyBox</title>
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/script.js"></script>
<style>
.fancybox-custom .fancybox-skin {
  box-shadow: 0 0 50px #222;
}
#container {
  max-width: 800px;
  margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<h1>fancyBox</h1>
<h2>Simple image gallery</h2>
<ul class="gallery">
<li><a class="fancybox" href="img/01.jpg" data-fancybox-group="gallery" title="写真1"><img src="img/01.jpg" width="150" alt=""></a></li>
<li><a class="fancybox" href="img/02.jpg" data-fancybox-group="gallery" title="写真２"><img src="img/02.jpg" width="150" alt=""></a></li>
<li><a class="fancybox" href="img/03.jpg" data-fancybox-group="gallery" title="写真３"><img src="img/03.jpg" width="150" alt=""></a></li>
<li><a class="fancybox" href="img/04.jpg" data-fancybox-group="gallery" title="写真２"><img src="img/04.jpg" width="150" alt=""></a></li>
<li><a class="fancybox" href="img/05.jpg" data-fancybox-group="gallery" title="写真３"><img src="img/05.jpg" width="150" alt=""></a></li>
</ul>
</div>
</body>
</html>

《script.js》

$(document).ready(function() {
/* Simple image gallery. Uses default settings */
    $('.fancybox').fancybox();

/* Different effects */
    // Change title type, overlay closing speed
    $(".fancybox-effects-a").fancybox({
      helpers: {
        title : {
          type : 'outside'
        },
        overlay : {
          speedOut : 0
        }
      }
    });

    // Disable opening and closing animations, change title type
    $(".fancybox-effects-b").fancybox({
      openEffect  : 'none',
      closeEffect  : 'none',
      helpers : {
        title : {
          type : 'over'
        }
      }
    });

    // Set custom style, close if clicked, change title type and overlay color
    $(".fancybox-effects-c").fancybox({
      wrapCSS    : 'fancybox-custom',
      closeClick : true,
      openEffect : 'none',
      helpers : {
        title : {
          type : 'inside'
        },
        overlay : {
          css : {
            'background' : 'rgba(238,238,238,0.85)'
          }
        }
      }
    });

    // Remove padding, set opening and closing animations, close if clicked and disable overlay
    $(".fancybox-effects-d").fancybox({
      padding: 0,
      openEffect : 'elastic',
      openSpeed  : 150,
      closeEffect : 'elastic',
      closeSpeed  : 150,
      closeClick : true,
      helpers : {
        overlay : null
      }
    });

/* Button helper. Disable animations, hide close button, change title type and content */
    $('.fancybox-buttons').fancybox({
      openEffect  : 'none',
      closeEffect : 'none',
      prevEffect : 'none',
      nextEffect : 'none',
      closeBtn  : false,
      helpers : {
        title : {
          type : 'inside'
        },
        buttons  : {}
      },
      afterLoad : function() {
        this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
      }
    });

/* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked */
    $('.fancybox-thumbs').fancybox({
      prevEffect : 'none',
      nextEffect : 'none',
      closeBtn  : false,
      arrows    : false,
      nextClick : true,
      helpers : {
        thumbs : {
          width  : 50,
          height : 50
        }
      }
    });

/* Media helper. Group items, disable animations, hide arrows, enable media and button helpers. */
    $('.fancybox-media')
      .attr('rel', 'media-gallery')
      .fancybox({
        openEffect : 'none',
        closeEffect : 'none',
        prevEffect : 'none',
        nextEffect : 'none',
        arrows : false,
        helpers : {
          media : {},
          buttons : {}
        }
      });

/* Open manually */
    $("#fancybox-manual-a").click(function() {
      $.fancybox.open('1_b.jpg');
    });
    $("#fancybox-manual-b").click(function() {
      $.fancybox.open({
        href : 'iframe.html',
        type : 'iframe',
        padding : 5
      });
    });
    $("#fancybox-manual-c").click(function() {
      $.fancybox.open([
        {
          href : '1_b.jpg',
          title : 'My title'
        }, {
          href : '2_b.jpg',
          title : '2nd title'
        }, {
          href : '3_b.jpg'
        }
      ], {
        helpers : {
          thumbs : {
            width: 75,
            height: 50
          }
        }
      });
    });

});

Colorbox - a jQuery lightbox

読み込んで利用

<link rel="stylesheet" href="css/colorbox.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>

《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ColorBox</title>
<link rel="stylesheet" href="css/colorbox.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<script>
$(function(){
  $(".colorbox").colorbox({
    rel: 'colorbox',  //colorboxがグループ化されるため、画面に［次へ・戻る］ボタン表示される
    transition: "elastic",  //["elastic","fade","none"]、デフォルト＝elastic
    speed: 400,  //写真表示スピード（切替）
    opacity: 0.85  //背景の透明度[0...1]、デフォルト=0.85
  });
});
</script>
</head>
<body>
<div id="container">
<h1>colorboxライブラリ</h1>
<ul class="gallery">
<li><a class="colorbox" href="img/01.jpg" title="写真１"><img src="img/01.jpg" width="150" alt=""></a></li>
<li><a class="colorbox" href="img/02.jpg" title="写真２"><img src="img/02.jpg" width="150" alt=""></a></li>
<li><a class="colorbox" href="img/03.jpg" title="写真３"><img src="img/03.jpg" width="150" alt=""></a></li>
<li><a class="colorbox" href="img/04.jpg" title="写真２"><img src="img/04.jpg" width="150" alt=""></a></li>
<li><a class="colorbox" href="img/05.jpg" title="写真３"><img src="img/05.jpg" width="150" alt=""></a></li>
</ul>
</div><!-- /"container -->
</body>
</html>

サムネール画像を別に作成せずに、幅指定で小さく見せています

《style.css》

@charset "UTF-8";

h1, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
#container {
  width: 800px;
  margin: 50px auto;
  text-align: center;
}
h1 {
  margin-bottom: 20px;
}
.gallery {
  overflow: hidden;
  width: 800px;
}
.gallery>li {
  float: left;
  margin-left: 10px;
}
.gallery>li:first-child{
  margin-left: 0;  //noneではなく 0であることに注意！
}

「colorbox.css」内の画像のパスを変更することも忘れずに（複数箇所あり）

#cboxOverlay{background:url(../img/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}

スライドショーのように動作させる

プロパティを追加する

<script>
$(function(){
  $(".colorbox").colorbox({
    rel: 'colorbox',  //colorboxがグループ化されるため、画面に［次へ・戻る］ボタン表示される
    transition: "elastic",  //["elastic","fade","none"]、デフォルト＝elastic
    speed: 400,  //写真表示スピード（切替）
    opacity: 0.85,  //背景の透明度[0...1]、デフォルト=0.85
    slideshow: true,  //写真をスライドショーのように動作させる
    slideshowSpeed: 3000  //デフォルト=2500 (2.5秒)
  });
});
</script>