お問い合わせ

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

  • URLをコピーしました!

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

目次

luminous

SWELLでも使われているluminous。

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

公式サイト

デモ

baguetteBox

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

公式サイト

デモ

特徴

  • 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

公式サイト

デモ

特徴

  • 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

GLightbox

公式サイト

デモ

特徴

  • 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

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.

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

目次