abc-enlarge

A jQuery image-enlarge plugin that zooms images inline — without covering the page — so the surrounding text stays readable. ページを覆い隠さずに、文章を読める状態のまま画像を拡大する jQuery プラグイン。

🇺🇸 English ・ 🇯🇵 日本語

Typical image-zoom (lightbox) plugins cover the whole screen with a dark overlay, hiding the article text. abc-enlarge never covers the page. It enlarges the clicked image in place while the surrounding text stays readable — ideal for web magazines and long-form articles where you want images to look big without hiding the copy.

• 🖼️ Inline zoom — no overlay; toggles enlarge/restore while keeping your layout
• 📖 Readability first — surrounding text is never hidden during zoom
• 📱 Touch-friendly — on portrait phones the image expands into a horizontally scrollable view and auto-scrolls to center
• 🔍 High-res swap — swaps to the large image from the <a href> and restores the smaller one on collapse
• 🎞️ PhotoSwipe aware — uses data-lbwps-width / data-lbwps-height for sizing when present
• 🧩 WordPress gallery support — auto-targets images inside .gallery-columns-0
• ⚡ Tiny — jQuery only, CSS bundled

Wrap each <img> in an anchor whose href points to the large image:

<a href="path/to/large.jpg">
  <img class="abc-enlarge" src="path/to/small.jpg" width="400" height="300" alt="">
</a>

Click to swap in the high-res image and enlarge; click again to restore the small image and size. On portrait touch devices, the parent becomes a full-viewport scrollable view (._abc_f) with the image centered for horizontal panning.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="jquery.abc-enlarge.js"></script>

Via CDN (jsDelivr):

<!-- latest (minified) -->
<script src="https://cdn.jsdelivr.net/gh/kyocom/abc-enlarge/jquery.abc-enlarge.min.js"></script>
<!-- pinned version -->
<script src="https://cdn.jsdelivr.net/gh/kyocom/abc-enlarge@v1.0.3/jquery.abc-enlarge.min.js"></script>

1. Add the abc-enlarge class to the images you want to enlarge (images inside a WordPress .gallery-columns-0 gallery get it automatically).
2. Wrap each <img> in an <a href="..."> pointing to the large image.
3. Load the script — clicks work with no extra initialization.

See the working demo: demo/index.html (English) / demo/index.ja.html (日本語).

• jQuery 1.7+
• width / height attributes on each <img> (used to restore and to compute sizes)
• The large image URL is read from the parent <a>'s href

MIT © kyocom (Kyo Ichida)

一般的な画像拡大（ライトボックス）プラグインは、拡大時に画面全体を暗いオーバーレイで覆い、記事の文章が読めなくなります。abc-enlarge はページを覆い隠しません。クリックした画像をその場で拡大し、周囲の文章は読める状態のまま。ウェブマガジンや長文記事のように「画像を大きく見せつつ、本文も読ませたい」用途に向いています。

• 🖼️ インライン拡大 — オーバーレイなし。本文レイアウトを保ったまま拡大／縮小をトグル
• 📖 読みやすさ優先 — 拡大中も周囲のテキストが隠れない
• 📱 タッチ端末対応 — スマホ縦画面では画像を横スクロール可能なビューに拡大し、中央へ自動スクロール
• 🔍 高解像度画像の差し替え — <a href> に指定した大きい画像へ自動で差し替え、縮小時に元へ復元
• 🎞️ PhotoSwipe 連携 — data-lbwps-width / data-lbwps-height があればサイズ計算に利用
• 🧩 WordPress ギャラリー対応 — .gallery-columns-0 内の画像を自動的に対象化
• ⚡ 超軽量 — 依存は jQuery のみ、CSS 同梱

対象画像は、リンク（拡大画像への href）で囲んだ <img> を想定しています。

<a href="path/to/large.jpg">
  <img class="abc-enlarge" src="path/to/small.jpg" width="400" height="300" alt="">
</a>

• クリックすると href の高解像度画像に差し替え、拡大表示します。
• もう一度クリックすると元の小さい画像・サイズに戻します。
• タッチ端末の縦画面では、親要素を全画面サイズのスクロール可能ビュー（._abc_f）にし、画像を横スクロールで閲覧できるよう中央寄せします。

<!-- jQuery（1.7 以上）を先に読み込む -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 本プラグイン -->
<script src="jquery.abc-enlarge.js"></script>

CDN（jsDelivr）:

<!-- 最新（min 版） -->
<script src="https://cdn.jsdelivr.net/gh/kyocom/abc-enlarge/jquery.abc-enlarge.min.js"></script>
<!-- バージョン固定 -->
<script src="https://cdn.jsdelivr.net/gh/kyocom/abc-enlarge@v1.0.3/jquery.abc-enlarge.min.js"></script>

1. 拡大対象の <img> に abc-enlarge クラスを付与します。 （WordPress のギャラリー .gallery-columns-0 内の画像は自動で付与されます）
2. <img> を、拡大画像への <a href="..."> で囲みます。
3. スクリプトを読み込めば、クリックだけで動作します。追加の初期化コードは不要です。

<a href="images/photo-large.jpg">
  <img class="abc-enlarge"
       src="images/photo-small.jpg"
       srcset="images/photo-small.jpg 1x, images/photo-small@2x.jpg 2x"
       width="640" height="427" alt="風景写真">
</a>

デモ: demo/index.html（英語）/ demo/index.ja.html（日本語）

• jQuery 1.7 以上
• 各 <img> に width / height 属性（縮小時の復元とサイズ計算に使用）
• 拡大画像は親 <a> の href から取得

MIT © kyocom (Kyo Ichida)