コンテンツへスキップ →

クールな画像拡大jQueryライブラリ「lity.js」、レスポンシブにも対応!

クリックで画像が拡大されるライブラリはlightboxなど数多くありますが、その中でもデザインの邪魔をせず、実装もかんたんなライブラリ、それがlity.jsです。

使い方

公式サイトから一式ダウンロード。
lity_kousikiダウンロードしたファイルの中で使うのはdistフォルダ内のlity.js、lity.cssのみ。
jQueryの後に読み込ませます。

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

あとは、

<a href="http://image.jpg" data-lity>Image</a>

のようにdata-lity属性をつけるだけで動きます。かんたんですね。下がlity.jsの表示サンプルです。

WordPressへの組み込み

WordPressで画像を追加した時に自動的にlityを使う方法です。
テーマ内のfunctions.phpに以下を記述します。

add_filter( 'image_send_to_editor', 'image_lity', 10 );

function image_lity( $html ){
    $html = preg_replace( '/a href=/', 'a data-lity href=', $html );
    return $html;
}

これでdata-lity属性が自動で入ります。このライブラリはレスポンシブにも対応しているのでスマホでもタブレットでも使えるのが嬉しいポイントです。

lity.js

jQueryでギャラリーをつくるなら、Animated Responsive Image Gridもいい感じです。

写真が次々と動く!アニメーションギャラリーがつくれるAnimated Responsive Image Grid!レスポンシブ対応!

[sc name=”engeneer”]

SHARE

無料メルマガ<特典付き>

個人開発・ビジネスについての有益な情報を無料メルマガでお届けします。

特典:個人開発の教科書<心得編>
これまでの個人開発経験を秘伝のタレ的な内容としてエッセンスをまとめました。35ページにわたる大ボリュームです。

個人開発のスキルアップにMENTA

MENTAはいろんなプロに相談できるNo1メンターサービスです。

僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。

YouTubeでも個人開発ノウハウを発信中!

PROFILE

入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)

カテゴリー: 開発奮闘記