HOME > 開発メモ > クールな画像拡大jQueryライブラリ「lity.js」、レスポンシブにも対応!
2015/09/03 (2016/09/14更新) タグ: ,

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

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

SPONSOR

使い方

公式サイトから一式ダウンロード。
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!レスポンシブ対応!

この記事をシェアする

イリテクの最新記事をお届けします

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む

イリテクで開発したサービス

請求書作成業務をもっとかんたんに。見積請求書の作成だけでなく、郵送代行、メール送信、PDFダウンロードなどバックオフィスを効率化。

詳しくはこちら

毎月定額のITマネジメントサービス
イリテクがリモートで御社のIT部門を担当します。なにを相談していいかわからなくても大丈夫。ITマネジメントサービスは、課題をみつけることからはじまります。作って終わりの関係ではなく、企画からデザイン・開発まで、御社のビジネスを顧問スタイルで末永くサポートします。
月額固定のITマネジメントサービス

こちらの記事もおすすめです

SPONSER

記事を書いている人
入江 慎吾 イリテク(株)代表
デザインもやるプログラマ。Webサービス、iOSアプリ開発をやってます。
毎月定額のITマネジメントサービスはじめました。自社で見積請求CLOUD PAPER運営。iPhoneアプリ全国総合ランキング3位を記録。イリテクブログは月間約5万PV。(もっと詳しく
SPONSOR
最新記事
iOSアプリの開発を始めたい方へ

アプリ開発の勉強は、本よりも動画で実際に作っているところを見せてもらったほうが理解が早いです。

Facebook
Twitter