NagiSeries 日本語

NagiSwipe

A light image popup gallery library that works by loading two files, one JS and one CSS. It is mobile first and aims to feel good under the finger. Try swiping and zooming in the demo.

Try it here

  • Kyururun (cat illustration)
  • Fu-n (cat illustration)
  • Shimeshime (cat illustration)

Press a picture to open it in NagiSwipe. Swipe, pinch and double tap it.

Features#

  • Drop-inLoad the JS and the CSS, and the image links on the page become a gallery by themselves.
  • Made for phonesSwipe, pinch zoom and double tap.
  • Light and fastNo dependencies.
  • SmoothOpens by growing out of the thumbnail and closes by shrinking back into it. While you swipe, the previous and next pictures follow your finger. Tapping a zoomed picture back to fit is drawn frame by frame, the same way a pinch is, so it no longer breaks up halfway on Android or iPhone (v1.3.2 and later).
  • MomentumWhile zoomed, the picture keeps sliding after you lift your finger and bounces at its edges. A quick flick turns the page even over a short distance.
  • Thumbnail firstThe thumbnail on the page is shown until the full picture arrives. The previous and next pictures are loaded ahead.
  • Captions built inThe image's alt and similar text is shown at the bottom of the screen.
  • Safe by designThe browser's Back (including the mouse back button and the back swipe) closes only the viewer. The DOM it needs is created automatically.

Getting started#

Load the following files in the <head> of your HTML.

The files are served fast through jsDelivr. Copy these URLs (they are always the URLs of the latest version).

The files are served fast through jsDelivr. Copy these URLs (they are always the URLs of the latest version).

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Lichiphen/NagiSwipe@83d6ea2/NagiSwipe-main.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/Lichiphen/NagiSwipe@83d6ea2/NagiSwipe-main.js"></script>

Note

The part after @ (such as @93db749) identifies the version of the file. When NagiSwipe is updated, the value in this README changes too. Until you paste the new URL, your site keeps showing the version you have. You can also give a release number, such as @v1.6.0. To always use the latest main branch, write @main (jsDelivr may keep an old file for up to 12 hours, and browsers for up to 7 days).

Usage#

Links on the page such as <a href="image.jpg"> are found automatically, and the gallery opens when one is clic…

Links on the page such as <a href="image.jpg"> are found automatically, and the gallery opens when one is clicked.

Captions (v1.1.0 and later)#

When a picture opens, a caption is shown at the bottom of the screen. The first of these that is found is used…

When a picture opens, a caption is shown at the bottom of the screen. The first of these that is found is used:

  1. data-ns-caption on the link (an empty value means no caption)
  2. data-caption on the link
  3. alt of the thumbnail <img>
  4. title of the link
  5. title of the thumbnail <img>
  6. the <figcaption> of the <figure> around the link
<a href="photo.jpg"><img src="photo-thumb.jpg" alt="The sea at dusk"></a>

It is shown as text, so HTML in an alt is not interpreted. The caption hides itself while you zoom.

Options#

When the system setting "Reduce motion" (prefers-reduced-motion) is on, the viewer fades instead of growing an…
NagiSwipe.init({
    caption: true,        // the caption at the bottom (false turns it off)
    counter: true,        // "3 / 12" at the top left (false turns it off)
    zoomAnimation: true,  // grow out of the thumbnail / shrink back into it (false fades instead)
    history: true         // the browser's Back closes the viewer (false turns it off)
});

When the system setting "Reduce motion" (prefers-reduced-motion) is on, the viewer fades instead of growing and shrinking.

Image size (optional)#

It works without it, but if the link carries the picture's real width and height, the viewer shows it at the r…

It works without it, but if the link carries the picture's real width and height, the viewer shows it at the right size before it has loaded.

<a href="photo.jpg" data-ns-width="3000" data-ns-height="2000"><img src="photo-thumb.jpg" alt="…"></a>

Using it with Tegalog#

Tegalog (a Japanese micro-blog CGI) can use NagiSwipe through its admin settings alone, without editing the skin files. The menu names below are Tegalog's Japanese ones.

  1. In Tegalog's admin panel, open [設定] → [システム設定] → 【画像拡大スクリプトの選択】 (Settings → System settings → Image zoom script).
  2. Choose "他のスクリプトを使う：URLを指定" (use another script: give its URL), paste these two, and save.
    • The "JavaScriptのURL" field: https://cdn.jsdelivr.net/gh/Lichiphen/NagiSwipe@83d6ea2/NagiSwipe-main.js
    • The "CSSのURL" field: https://cdn.jsdelivr.net/gh/Lichiphen/NagiSwipe@83d6ea2/NagiSwipe-main.css

Now a click on a picture in a post shows it large with NagiSwipe.

To use the manga viewer (NagiManga) too, write NagiManga's URL in the same "JavaScriptのURL" field, after NagiSwipe's URL and one space (keep it on one line; the CSS field stays as it is).

https://cdn.jsdelivr.net/gh/Lichiphen/NagiSwipe@83d6ea2/NagiSwipe-main.js https://your-site/nagimanga/viewer/NagiManga.js

Important

Also make manga open in posts without pictures: Tegalog does not load the files above on pages of posts without pictures. In [設定] → [ページの表示] → 【投稿本文の表示／URL処理】, under "▼画像URLを画像として埋め込む表示", check "画像リンクに独自のclass属性値を追加する" (add your own class to picture links), type nagimanga between class=" and ", and save.

How to put manga in Tegalog posts is in "Posting to Tegalog" in manga/README.en.md.

It works the same way with NagiMemo (a skin for Tegalog).

Contents

日本語

GitHubGitLabNagiSwipe demo