響應式的圖片 Lightbox 插件:ImageLightbox.js
ImageLightbox.js是一個簡約的,可擴展和可配置性,響應性和觸摸友好的iOS,Android和Windows Phone兼容燈箱插件。默默的預加載下一個圖像,使用CSS轉換和過渡,利用鍵盤進行交互。
Features
- Ascetic. No captions, navigation buttons or background cover by default. Nothing that would distract user from the main purpose. That’s why I enjoy pointing out Jony Ive’s observation: “An indicator has a value when it’s indicating something, but if it’s not indicating something, it shouldn’t be there”. I think it is the most common thing that designers forget to solve.
- Minimalistic. No bunch of default raster image files that fail on higher resolution screens. Just one source file which is only 4kb in size when minified.
No messy markup. Just one simple element –<img>
. - Extensible & configurable. If the default functionality is not enough, you can easily extend the plugin with custom JavaScript functions, change the settings or use a couple of useful method functions.
- Responsive and touch-friendly. The most trending topics in web design and they are here. Images fit to any screen size and are swipe-able (native behavior) on touch capable devices.
- iOS, Android and Windows Phone compatible. As well as desktop versions of Safari, Chrome, Firefox, Opera and Internet Explorer.
- jQuery 1.x and 2.x compatible. Quite clear, isn’t it?
- Preloads next image. While user is viewing the current picture, the plugin silently preloads the next picture which shows up without any delay when respective action is triggered.
- Uses CSS transform and transition for moving images. Turns out CSS’s
transform
performs better thanleft
(as well asright
,top
,bottom
). But the plugin falls back onleft
if a browser does not support transform. - Interacts with keyboard. Standard, but essential Arrow Left, Arrow Right to switch images and Esc to quit the lightbox. </ol>

</span></span>
本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!