iOSアプリ・Webシステム開発のイリテク

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

クールな画像拡大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

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

記事を書いている人

入江 慎吾 イリテク株式会社 代表
Web/iOSエンジニア。企画・デザイン・システム開発をワンストップで。
単なる制作ではなく、お客さまの一員となってともに考え、制作し、「攻めのIT投資」でビジネスを加速させます。

イリテクの最新記事をフォローしていただけると嬉しいです

  • follow us in feedly
    RSSで最新記事を取得

関連記事

SPONSER

SPONSOR

NEW ENTRIES
FACEBOOK
Twitter
CATEGORY
開発したWebサービス
RECRUIT
Webサービスを一緒に開発して頂けるPHPエンジニア募集!週1回のリモート勤務!