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

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

書いている人

入江 慎吾
iOSアプリ/Webサービスの開発を行っています。
長崎県五島列島出身。福岡で制作会社に10年勤務した後に独立開業。
クラウド見積請求書サービス CLOUD PAPERを運用中！
プロフィール

イリテクからの4つのご提案

仕様を決めずにiOSアプリ/Web開発

最初から仕様・見積をださなくても開発できます。
仕様を決めないプロダクト開発

制作会社の方向け

リソース不足時にはサポート、それ以外は自社サービスを作る等も可能です。
専属エンジニアサービス

月額固定の専属エンジニアサービス

御社の技術エンジニアとして週1〜2回開発を行います。
専属エンジニアサービス

社内アプリケーションを作るといいことづくめ

どのような業種・企業にもITを使って効率化することができます。
社内アプリケーションを作る

SPONSER

関連記事

  • PHPで呼び出した文字列内の特殊文字で、JavaScriptエラーが出る場合の対処法
    例えばPHPにてデータベースに入っている文字列を呼び出して、その文字列をJavaScriptで使おうとした際に、「'」シングルクォーテーションや「"」ダブルクオーテーションなどが入っていると、上手く動作しないことがあります。 例えば、JavaScriptの変数にvar a=["＜？ echo $data[0]; ？＞","＜？ echo $data[1]; ？＞"];のようにしていた場合、$
  • スクロールで下にいくとページの自動読み込みができるjQueryライブラリ「jquery_bottom」
    Twitter等でも採用されている自動ローディング。下のほうにスクロールすると、自動で次の情報を読み込むやつのことです。今回は、これをかんたんに実装できるのがjQueryライブラリjquery_bottomの使い方をご紹介します。 jquery_bottomをダウンロード まずはgithubにあるjquery_bottomをダウンロード。実際に使うのは解凍したフォルダ内にある「jquery
  • jQueryで動的にグラフを作れる「jqPlot」が使いやすい！
    CloudPaperの改良で年間売上グラフを入れようと思い、動的に使えるjQueryプラグインを探していたところ「jqPlot」という素敵なプラグインを見つけました。かんたんに導入方法をご紹介します。 色など自由にカスタマイズできるのですが、かんたんな折れ線グラフだとこんな感じで生成できます。ほかにも棒グラフや円グラフもつくれます。 デモはこちら jqPlotでグラフを作る j
  • ショッピングサイトに使えそうなJqueryプラグイン「elevateZoom」
    ECサイトでよくみかけるような、マウスオーバーでの写真拡大機能を実装できるJqueryプラグイン「elevateZoom」。商品によっては使いドコロが多そうです。 拡大パターンもいろいろ マウスオーバーすると、横に拡大表示されます。 マウスオーバーしたところだけ、虫眼鏡のように拡大されるパターンもあり。 導入方法 まず、スクリプトを読み込みます。 [code] <
  • Bootstrap Typeaheadの日本語入力対応
    Bootstrapに入っているTypeheadは、フォームに入力している途中で、候補文字が出てきて補完してくれる便利な機能です。こんな機能をかんたんに導入することができて、最高なんですが、日本語入力に対応していないという致命的欠点があります。 Typeaheadが日本で使えない まずはじめに、英語だと文字の変換なんてありませんから、英単語を入力している途中で候補が出てきて、矢印キーで選択し
  • jQueryを使って、div全体にリンクを貼る方法。_blank対応も。
    例えばボタンなどdiv全体にリンクを貼りたいことがありますが、その際に便利なTipsのご紹介です。 まずは、見た目のみ準備 CSSでボタンを作ります。リンクもdivの中に置いて構いません。CSSでdivの上にマウスがのったときに、カーソルが変わるよう変更しています。 [code lang="html"] <style> .sbtn{ margin-right:10p
  • スマホサイトでFacebook風スライドメニューを使う
    暖かくなりましたね〜。もう冬物はクリーニングにだしましたが、いつもより高くて消費税が上がったことを思い出しました。今日はスマホサイトでFacebook風のメニューをカンタンに組み込めるJQueyのご紹介です。びっくりするくらい、楽チンです。 スライドメニューとは スライドメニューはこんな動きをするものです。 スマホサイトだと、PCサイトのようにメニューを出しておくと、ごちゃつく＋スペ
  • HTML5のplaceholderを対応していないブラウザでも使いたい
    placeholderとは、検索フォームなどでよくみるアレのこと。何も入力されていない時に、テキストフォームにうっすら文字でアナウンスすることができます。これはinputタグにplaceholderを記述するだけで使えるようになりますが、古いブラウザでは使えません。 placeholder placeholderの使い方はかんたんで、inputタグにplaceholderを入れるだけ。
  • Jqueryでテーブルの行をドラッグ＆ドロップで並び替える
    テーブルの行を自由に並び替える機能を追加できる「Table Drag and Drop JQuery plugin」という素晴らしいJqueryプラグインを見つけて、使ってみました。 今回はこのプラグインを使って、CloudPaper内の見積・請求書作成のシーンにて、項目をドラッグ＆ドロップで並び替えができるように改良しました。 テーブルの行を直感的に並び替えできる 今回はこのよ

イリテクの最新記事をフォロー

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

NEW ENTRIES
SEARCH
CATEGORY
FACEBOOK
イリテク
Twitter