クールな画像拡大jQueryライブラリ「lity.js」、レスポンシブにも対応！
クリックで画像が拡大されるライブラリはlightboxなど数多くありますが、その中でもデザインの邪魔をせず、実装もかんたんなライブラリ、それがlity.jsです。
使い方
公式サイトから一式ダウンロード。
ダウンロードしたファイルの中で使うのは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属性が自動で入ります。このライブラリはレスポンシブにも対応しているのでスマホでもタブレットでも使えるのが嬉しいポイントです。
jQueryでギャラリーをつくるなら、Animated Responsive Image Gridもいい感じです。
写真が次々と動く！アニメーションギャラリーがつくれるAnimated Responsive Image Grid！レスポンシブ対応！
[sc name=”engeneer”]
SPONSER
SHARE
YouTube
PROFILE
