モバイルにも対応!完璧なLightBox「PhotoSwipe」をjQueryプラグイン化しました。

2016年2月14日
JavaScript, Web制作

一言まとめ LightBoxは時代にそぐわなくなってきた。その最有力候補として浮かび上がってきた PhotoSwipe だが、導入する作業が煩雑なため、jQueryプラグインにした。 JavaScriptのギャラリーライブラリといえば「LightBox」です。むしろ「LightBox」が一種の代名詞にもなったくらい一世を風靡したのです。 しかし、時は2016年。もっとモダンな「Lightbox」はないのか… と、誰もが願うものです。 そして、そんな願いを完璧に応えてくれるライブラリが現れた… それが「PhotoSwipe」です。百聞は一見にしかず、まずはPhotoSwipeの公式サイトのデモをご覧下さい。 圧倒的な人気度 GitHubで言語をJavaScriptに絞って、「gallery」で検索した後、さらにソート順を「Most stars」にした結果。 「PhotoSwipe」のスター数が10000個超えとるよー!(あのLightboxですら2000台なのに) 人気の理由 実際に使ってみて、デザインの良さ、機能の豊かさ、動きのスムーズさ、どれをとっても「これだ!」と言わんばかりの完成度を感じました。 ざっくり機能を列挙しますと モバイル対応(タッチジェスチャーで拡大縮小などができる) Browser history API(開いた画像に固有のURLが付く) 画像の自動ローディング(自動的に前後の画像をロードする)

jQuery のセレクタをキャッシュしてみたら180倍くらい早くなった。 キャッシュすべし!

2015年12月2日
JavaScript

初心者だった頃、誰しも一度くらいはこんな感じのコードを書いたことがあるのではないでしょうか? $('#js-button').on('click', function () { $(this).text('click'); }); $('#js-button').on('mouseenter', function () { $(this).text('mouseenter'); }); このコードのどこが問題かというと、$('#js-button')を2回、$(this)を2回書いてしまったところです。 全く同じ処理を4回も行うのは明らかに非効率ですよね。 だから、以下のように、一旦戻り値のjQueryインスタンスオブジェクトを変数にキャッシュしておいて、あとからその変数を参照するようにしたほうが処理が1回で済むので、パフォーマンスが良いです。 var $button = $('#js-button');