thumbnails

介绍

bague是一个响应式画廊插件(纯JS)，拥有图像放大缩小并带有相应的CSS3过度，并能在触摸屏等设备上完美展示。

Github

https://github.com/feimosi/bague

特点

用纯JavaScript编写，不需要依赖项
多画廊支持允许为每个画廊提供自定义选项
支持触摸屏设备上的滑动手势
全屏模式可用
现代简约的外观
图片字幕支持
响应式图像
CSS3过渡
SVG按钮，无需下载其他文件
压缩约3.2KB
考虑可靠性

安装使用

使用npm安装

npm install bague

使用Bower

bower install bague

直接引入

<link rel="stylesheet" href="c;>
<script src="j; async></script>

使用方式

#使用commonjs
const baguetteBox = require('bague');

#使用es模块化
import baguetteBox from 'bague';

@import 'bague/dist/baguetteBox.min.css';

使用

bague('.gallery');//初始化脚本

<div class="gallery">
    <a href="img; data-caption="Image caption">
        <img src="img/thumbnails; alt="First image">
    </a>
    <a href="img;>
        <img src="img/thumbnails; alt="Second image">
    </a>
    ...
</div>

自定义配置

bague('.gallery', {
    // Custom options
});

常用方法

showNext - 切换到下一张图片
showPrevious - 切换到上一张图片

响应式图片

如果需要响应式图片，可以分别在a标签加入data-at-{width}属性，{width}是图片可显示的最大宽度，bague会在页面初始化（窗口手动改变大小不会再响应）时选择相应的尺寸。

<a href="img;
  data-at-450="img/thumbs;
  data-at-800="img/small;
  data-at-1366="img/medium;
  data-at-1920="img/big;>
    <img src="img/thumbs;>
</a>

如果屏幕分辨率是1366x768，bague将会选择"img/medium;. 如果是1440x900则会选择 "img/big;.

兼容性

桌面端:

IE 8+
Chrome
Firefox 3.6+
Opera 12+
Safari 5+

移动端:

Safari on iOS
Chrome on Android

截图

关于作者: admin

热门推荐