知らないとかなり損！Lightbox系 javascriptライブラリ

Lightbox系 javascriptライブラリで非jQueryなものを集めてみました。

luminous

SWELLでも使われているluminous。

非jQueryで単独画像の場合は使いやすいが、ギャラリーで表示させると初期状態だと無限ループになってしまうのが使いにくい

公式サイト

GitHub

GitHub – imgix/luminous: A simple, lightweight, no-dependencies JavaScript lightbox A simple, lightweight, no-dependencies JavaScript lightbox – GitHub – imgix/luminous: A simple, lightweight, no-dependencies JavaScript lightbox

デモ

CodePen

Luminous: Lightbox Demo This is a demo of Luminous, a simple, lightweight, no-dependencies JavaScript image lightbox from imgix. This demo uses the simple included theme, but …

baguetteBox

Cocoonでも使われているbaguetteBoxです。

Cocoon

Cocoonの画像拡大効果（Lightbox）ライブラリ各々お勧めの使いどころ 写真を暗転し拡大して表示するLightbox効果のあるJavaScriptライブラリの使いどころを紹介しています。

公式サイト

GitHub

GitHub – feimosi/baguetteBox.js: :zap: Simple and easy to use lightbox script written in pure JavaSc… :zap: Simple and easy to use lightbox script written in pure JavaScript – GitHub – feimosi/baguetteBox.js: :zap: Simple and easy to use lightbox script written …

デモ

特徴

• Written in pure JavaScript, no dependencies required
• Multiple-gallery support allows custom options for each
• Supports swipe gestures on touch-screen devices
• Full-screen mode available
• Modern and minimal look
• Image captions support
• Responsive images
• CSS3 transitions
• SVG buttons, no extra files to download
• Around 3.2KB gzipped
• With Accessibility in mind

Spotlight.js

Cocoonでも使われているSpotlight.js

Cocoon

Cocoonの画像拡大効果（Lightbox）ライブラリ各々お勧めの使いどころ 写真を暗転し拡大して表示するLightbox効果のあるJavaScriptライブラリの使いどころを紹介しています。

Spotlightの一番の欠点は、スマホのタッチ操作への対応が他のライブラリと比べて劣っている点です。

スライダー状態になった後に、いちいちクローズボタンを押さないとモーダルが閉じないのがとても使いにくいです。

公式サイト

GitHub

GitHub – nextapps-de/spotlight: Web’s most easy to integrate lightbox gallery library. Super-lightwe… Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies. – GitHub – nextapps-de/spotlight: Web&#3…

デモ

Spotlight.js – Modern HTML5 Imag…

Spotlight.js – Modern HTML5 Image Gallery WinBox is the web’s most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.

特徴

• Video Support
• Mounting HTML node fragments as slides (you can add just everything as a slide!)
• Gallery groups:
  • group images to specific galleries
  • group options inheritance
• Toolbar & Gallery tools:
  • Fullscreen
  • Zoom in/out
  • Toggle resize
  • Switch theme
  • Autoslide
  • Download
  • Progress Bar
  • Page
  • Title (also inherits from image “alt”-attribute)
  • Description
  • Customizable button
• Adaptive responsive images (by viewport size, pixel ratio and available internet bandwidth)
• Auto-fit images and videos (as “contain” or as “cover”)
• Custom Controls
• Fully configurable via markup
• Loading Spinner
• Smart Preloading (prefetch next image including cancellation)
• Customize via standard options
• Simply customize via markup (data-attributes)
• Built-in animations
• Custom themes
• Custom animations
• Supported controls:
  • Keyboard
  • Touch
  • Mouse (Move + Wheel)
• Back-Button (Android)
• Callbacks (onclick, onshow, onclose, onchange)
• Global API for programmatic usage
• Technical properties:
• Outstanding performance
• Memory optimized, tiny footprint, fully cleans up
• Event capturing (just one single global event listener)
• Bind additional global event listener dynamically:
  • install when gallery opens
  • cleanup when gallery was closed

Photoswipe

Photoswipeは少し癖がありますが、lightGalleryの次に高機能だと思います。

lightGalleryのライセンスがGPLだけど有料ライセンスもあって、使うのに躊躇する場合は、Photoswipeが代わりになります。

Photoswipeは、HTMLのマークアップに独特の癖があるので初期状態だとWordpressには適用しにくい感じがあります。

WordPressのプラグインもあるので、そちらを使ってもいいでしょう。

公式サイト

デモ

GLightbox

公式サイト

GitHub

GitHub – biati-digital/glightbox: Pure Javascript lightbox with mobile support. It can handle images… Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes – GitHub – biati-digital/glightbox: Pure Ja…

デモ

特徴

• Small – only 11KB Gzipped
• Responsive – works with any screen size
• Gallery Support – Create multiple galleries
• Video Support – Youtube, Vimeo and self hosted videos with autoplay
• Inline content support – display any inline content
• Iframe support – need to embed an iframe? no problem
• Keyboard Navigation – esc, arrows keys, tab and enter is all you need
• Touch Navigation – mobile touch events like swipe, move, pinch, etc.
• Zoomable images – zoom and drag images on mobile and desktop
• Retina ready – svg icons for controls.
• Api – control the lightbox with the provided methods

Venobox

veno.es

VenoBox 2 – modal window javascript plugin, touch swipe gallery Responsive Vanilla JS lightbox plugin, suitable for images, videos, iFrames, inline contents

Chocolat.js

かなり特徴的なlightboxライブラリです。

デモページを見ると夢がひろがりんぐな感じです。

特徴

either for noobs or veterans

Chocolat comes with an API and multiples CSS classes which make it very handy to use for advanced users, and very easy to use for noobs.

crossbrowser

Chocolat works well with all major browser. It has been tested on : IE9+, firefox, chrome, opera, safari.

light

Chocolat.js is only 23 kb and reaches 10 kb once minified.

responsive

Chocolat works on desktop, tablet & mobile, you can also define your own breakpoints.