jQuery006　モーダル「Lightbox」 - ねこきっくぱんちのメモ帳

プラグイン「Lightbox」

f:id:neko_kick_panch:20170605233335p:plain

公式よりDL。
Lightbox
サンプルのindex.htmlがあるため、使いやすい形に修正する。
今回は画像はサムネイルとメインの２つを用意。

■コード
html

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Lightbox Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!-- ★ -->
  <link rel="stylesheet" href="css/lightbox.css"><!-- ★ -->
</head>
<body>

<section>
  <h3>A Four Image Set (jQuery plugin "Lightbox")</h3>
  <div>
    <a class="example-image-link" href="img/tokage_top.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/tokage_sml.jpg" alt="tokage"/></a>
    
    <a class="example-image-link" href="img/frog_top.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/frog_sml.jpg" alt="frog" /></a>
    
    <a class="example-image-link" href="img/taki_top.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/taki_sml.jpg" alt="waterfall" /></a>
    
    <a class="example-image-link" href="img/bird_top.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/bird_sml.jpg" alt="bird" /></a>
  </div>
  </section>

  <section>
    <p>
      For more information, visit <a href="http://lokeshdhakar.com/projects/lightbox2/">http://lokeshdhakar.com/projects/lightbox2/</a>
    </p>
  </section>

<!-- <script src="js/lightbox-plus-jquery.min.js"></script> -->
<script src="js/lightbox.js"></script><!-- ★ -->
</body>
</html>

■参考
その他のプラグイン
・colorbox：http://www.jacklmoore.com/colorbox/
・fancybox：商用利用は有料