ほぼ誰でも作れるcolorboxを使った画像の拡大講座

画像をクリックすると拡大されて表示される仕掛けのWebサイトを見たことがある人は多いと思います。
それを自分で実装してみたいと思い、いろんなサイトを参考にして実装しました。
今回はとりあえず動く最低限の仕組みをご紹介。これであなたも作れる(はず)。

【参考】
harublog-elpis.com

ファイルはCドライブの直下に「test」というフォルダでも作って、そこに置けばよいでしょう。

(1)画像を用意します。C:\testにコピーしてファイル名を「test.jpg」にします。

(2)以下のサイトからプラグインをダウンロードします。
www.jacklmoore.com

(3)ダウンロードしたプラグインのうち、必要なファイルをC:\testにコピーします。
・ダウンロードしたアーカイブのフォルダ「colorbox-master」直下に「jquery.colorbox-min.js」というファイルがあるので、これをC:\testにコピーしてファイル名を「jquery-colorbox-min.js」に変更します。
・さらに「example2」フォルダ直下のフォルダ「images」と、colorbox.cssもC:\testにコピーします。

(4)C:\test直下にテキストファイルを新規作成し、ファイル名を「test.html」とします。
ファイルをテキストエディタで開き、以下の内容で保存します。

<html>
  <head>
    <link rel="stylesheet" href="colorbox.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="jquery-colorbox-min.js"></script>
      <script>
          $(document).ready(function(){
              $(".ex").colorbox({rel:'ex'});
          });
      </script>
      <title>テスト</title>
  </head>
  <body>
      <h1>テスト</h1>
      <a href="test.jpg" class="ex" title="">
          <img src="test.jpg" width="800" alt="">
      </a>
  </body>
</html>

ファイル構成は以下のようになっているはず。

(5)C:\test\test.htmlをブラウザで開きます。

(6)画像をクリックします。

ね、簡単でしょ?

これを見ても動かないという人がいたらコメントください。

ただしこれはあくまでとりあえず動くものを作っただけで、必要なファイルは全部同じフォルダに置いていますが、
実際にWebサイトで公開する場合、ファイル構成はきちんとしておきましょう。