WEBデザインの勉強

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

モーダルウインドウjQueryプラグインFancyBox

f:id:mmmmofu:20160814210043p:plain

FancyBoxはモーダルウィンドウのjQueryプラグイン
googlemapや動画等の外部コンテンツも読み込める

Fancybox - Fancy jQuery lightbox alternative

デモはこちら

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>FancyBox</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<style>
  html, body, div, ul, li, img, a {
    margin:0;
    padding: 0;
    line-height: 1.0;
    font-family:
      "Hiragino Kaku Gothic ProN",
      Meiryo,
      sans-serif;
      ;
  }
  ul, li {
    list-style: none;
  }
  img {
    vertical-align: bottom;
  }
  body {
    background: #000;
  }
  a {
    text-decoration: none;
    color: #FFF;
  }
  a:hover {
    opacity: 0.6;
  }
  #container {
    width: 980px;
    margin: 50px auto 0;
  }
  #container ul {
    overflow: hidden;
  }
  #container ul li {
    float: left;
    width: 320px;
    height: 210px;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  #container ul li img {
    width: 100%;
  }
  #container ul li#right {
    margin-right: 0;
  }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script>
$(function() {

  $(".fancybox").fancybox({
    openEffect  : 'none',
    closeEffect : 'none'
  });

  $(".various").fancybox({
    maxWidth  : 800,
    maxHeight : 600,
    fitToView : false,
    width   : '70%',
    height    : '70%',
    autoSize  : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none'
  });

});
</script>
</head>

<body>
<div id="container">
<ul>
<li><a class="fancybox" data-fancybox-group="gallery1" href="img/01.jpg" height="651" width="980" title="snow1"><img src="img/01.jpg" alt="画像1"></a></li>
<li><a class="fancybox" data-fancybox-group="gallery1" href="img/02.jpg" height="649" width="980" title="snow2"><img src="img/02.jpg" alt="画像2"></a></li>
<li id="right"><a class="fancybox" data-fancybox-group="gallery1" href="img/03.jpg" height="683" width="980" title="snow3"><img src="img/03.jpg" alt="画像3"></a></li>
<li><a class="various fancybox.iframe fancybox" data-fancybox-group="gallery1" href="https://www.youtube.com/embed/ivBvq2e5ZpY" title="動画"><img src="http://i.ytimg.com/vi/ivBvq2e5ZpY/mqdefault.jpg" alt=""></a></li>
<li><a class="various fancybox.iframe fancybox"  data-fancybox-group="gallery1" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6998121.233992953!2d17.136297025223882!3d64.64525976191551!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4681cadf4b32f6dd%3A0x146d63c75a810!2z44OV44Kj44Oz44Op44Oz44OJ!5e0!3m2!1sja!2sjp!4v1471172129456" title="MAP">Google maps (iframe)</a>
  </li>
</ul>
</div><!-- /#container -->
</body>
</html>

jquery.mousewheel-3.0.6.pack.jsはスクロールで縦スライドの動きができる。

GoogleMAPの埋め込み方はaタグにiframeのURL