WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

Colorbox

f:id:mmmmofu:20160830202902p:plain

高機能なモーダルウインドウプラグイン
画像だけでなく、YouTube等iframe読み込み、やインラインhtml、ajaxでファイルの読み込みなどをモーダルウインドウで表示することができる。

Colorbox - a jQuery lightbox

デモはこちら

http://efu.sakura.ne.jp/web/colorbox/


公式サイトからファイルをダウンロードする。
展開したフォルダの中からexample1~5の中で好きなものを選び
ファイルの中にある「jquery.colorbox.js」と「css/colorbox.css」と「css/images/」フォルダを
自分が作った新しいフォルダの中に移動する。
新しく作成したファイルにjQueryと「jquery.colorbox.js」と「colorbox.css」を読みこむ

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.1.min.js"></script>
  <script src="js/jquery.colorbox.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
<ul class="colorbox_cont">
  <li><a href="img/01.jpg" class="image">画像1</a></li>
  <li><a href="img/02.jpg" class="image">画像2</a></li>
  <li><a href="img/03.jpg" class="image">画像3</a></li>
  <li><a href="https://www.youtube.com/embed/U7OFNi17jlQ" class="youtube">YouTube</a></li>
  <li><a href="#inline" class="inline_html">inlineHTML</a></li>
  <li><a href="http://efu.sakura.ne.jp/web/0320/" class="iframe">iframe</a></li>
  <li><a href="http://efu.sakura.ne.jp/web/0318/index5.html" class="ajax">ajax</a></li>
</ul>
<div class="inline_wrapper">
  <div id="inline">
    <h1>inlineHTML</h1>
    <p>同じHTMLに書きました。</p>
  </div>
</div>
</body>
</html>

JS

$(function(){

  $(".image").colorbox({
    rel:'slideshow',
    slideshow:true,
    slideshowSpeed:3000
  });

  $(".youtube").colorbox({
    iframe:true,
    innerWidth:960,
    innerHeight:540
  });

  $(".inline_html").colorbox({
    inline:true,
    width:500,
    height:300
  });

  $(".iframe").colorbox({
    iframe:true,
    width:"80%",
    height: "80%"
  });

  $(".iframe").colorbox({
    iframe:true,
    width:"80%",
    height: "80%"
  });

  $(".ajax").colorbox({
    maxWidth:"80%",
    maxHeight: "80%"
  });

});

同じグループのものは同じclass名にする。

YouTubeのリンク先はembed(共有→埋め込みコード→srcの中のURL)にする。

inlineHTMLは表示するエリアの親要素にdisplay:none;にする。

iframeはwidthとheightを指定する。

ajaxはローカルだと確認できない。

デザインの変更

colorbox.cssを変更してデザインを変更する。

prev(前へ)

#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}

next(次へ)

#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}

close(閉じる)

#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}