Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: Javascript

[JAVASCRIPT] FancyZoom – Lightboxっぽい写真の見せ方

  • Pocket
  • このエントリーをはてなブックマークに追加

MT4からWordpressに移行して、「さてLightboxどうしようか」と思ったものの、他の見せ方ってないもんかと思ってたどり着いたのがこのFancyZoom。画像をクリックしてページ内に大きく表示、という目的そのものは一緒なんだけど、なんだかとてもエレガントなんです。1発で気に入ってしまい、早速mBlogにも導入しました。左に表示されているウチのカワイい子のサムネールをクリックすると、ウチのカワイい子の大きい画像が大きく表示されます。とてもカワイいのです。胸毛とか耳のホケホケとか。んで左上のバツボタンをクリックするか、画像そのものをクリックする事で元に戻ります。ここでクローズボタンが左にあるという点もポイント。マックユーザーにとっては右に位置したクローズボタンというのはどうしても違和感があるので。ロード中のアニメーションもMacOSっぽくてナイス。導入も簡単でした。

ただひとつ注意点が。Lightboxやその亜種では、「適用したいリンクに特定の記述を追加」する仕様だったのに対し、こちらは「適用したくない場合だけ特定の記述を追加」という点が大きく違っています。つまりFancyZoom導入後は、回避の記述がない限り画像から画像へのリンクに全て適用される事になります。最初はこの点に関して「うーどうしよう」って迷ったものの、よく考えれば画像から画像へのリンクでこれが適用されて困る事ってないので、導入を決意。実際「回避しない限り全部そうしちゃうよー」という姿勢の方が色々と便利な事が分かりました。