jQueryプラグインのColorBoxを試してみる

JavaScript

jQueryプラグインのColorBoxを試してみる

Colorbox - a jQuery lightbox
http://www.jacklmoore.com/colorbox/

設置

ファイルを下記のような感じで設置。
※今回はexample4のcolorbox.cssとimagesを利用した

├ HTMLファイル
├ colorbox.css
├ images
│├ border1.png
│├ border2.png
│└ loading.gif
├ jquery.colorbox-min.js
└ sample.png

基本

基本的にHTMLは下記のような感じで書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="colorbox.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<script>
  $(function(){
    $(".modal").colorbox();
  });
</script>
</head>
<body>
  <a href="sample.png" class="modal" title="Caption">表示</a>
</body>
</html>

デモ

インライン

インラインにも対応している。

・・・
<script>
  $(function(){
    $(".modal").colorbox({
      inline: true
    });
  });
</script>
</head>
<body>
  <a href="#sample" class="modal">表示</a>
  <div  style='display:none'>
    <div id='sample'>
      コンテンツ<br>
      ・・・<br>
      ・・・<br>
      ・・・<br>
      ・・・<br>
      ・・・<br>
      ・・・<br>
      ・・・<br>
      ・・・<br>
    </div>
  </div>
</body>
</html>

デモ

iframe

iframeも表示できる。

・・・
<script>
  $(function(){
    $(".modal").colorbox({
      iframe: true,
      width: "800px",
      height: "600px"
    });
  });
</script>
</head>
<body>
  <a href="http://www.hatena.ne.jp" class="modal">表示</a>
</body>
</html>

デモ