【プログラム雑記】Lityを使ったらこうなった

こんにちは、happa64です。
今回はひょんなことから、静的HPのLityを使うことになりました。

画像をクリックorタップすると画像が拡大表示されるというもので、以下のサイトを見ながら組み込みました。

クールな画像拡大jQueryライブラリ「lity.js」、レスポンシブにも対応! | イリテク
https://iritec.jp/web_service/11134/

まず、公式HPからデータをダウンロードして、対象のhtmlファイルに以下のコードを書き込みました。

<link href=”js/lity.css” rel=”stylesheet”>
<script src=”js/jquery.js”></script>
<script src=”js/lity.js”></script>

そして、各画像にaタグと”data-lity”属性をつけると、対象のファイルをクリックすると画像拡大表示されるとのこと

<a href=”img/image.jpg” data-lity>Image</a>

しかし、実際にやってみても私の方では表示されない…
ナズェダ!!

…あ、jquery入れてないやんけ!

ってことで、急いでjqueryをダウンロードして、対象のフォルダに入れたところ、無事動くようになりました。

最適なバージョンの確認は以下サイトで行いました。
http://phiary.me/jquery-plugin-lity/

んで、スマホでも確認したのですが、画像をタップしてもうんともすんとも言わず、入れるjsを間違えたなと思い、他のjsを探してたところ、私はある重大な事実に気が付いてしまったのです。



そう、スマホで見たURLがテストのものではなかったということ。
こんな基本的なミスをやらかすのかと思いましたが、テストをちゃんと確認したところ、ちゃんとタップして画像拡大したので、無事に本番環境へ公開へとこぎつけられました。

ちなみに試しに入れようとしたjsはこちら
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-simplebox.html

jsに対して結構臆病なところがあったので、一日を棒に振ると覚悟していたのですが、案外あっさりと導入することができました。
ちょっとそそっかしいところがあり、焦らなくてよいところで焦りましたが、今回は結構自身につながりました。

また機会があれば、別のjsを組み込んでいきたいと思います。