画像をクリックすると拡大されて表示される仕掛けの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サイトで公開する場合、ファイル構成はきちんとしておきましょう。