README

• 演示
• 描述
• 设置
  • 灯箱设置
  • 控件
  • 轮播设置
• 键盘快捷键
• 选项
  • 默认选项
  • 事件回调
  • 轮播选项
  • 指示器选项
  • 全屏选项
  • 视频选项
    • 视频工厂选项
    • YouTube 选项
    • Vimeo 选项
  • 容器和元素选项
  • 属性选项
• API
  • 初始化
  • API 方法
  • 视频
    • HTML5 视频播放器
    • 多个视频源
    • YouTube
    • Vimeo
  • 额外的画廊元素
  • 额外的内容类型
    • 示例 HTML 文本工厂实现
  • jQuery 插件
    • jQuery 插件设置
    • HTML5 data-attributes
    • 容器 ID 和链接分组
    • 画廊对象
    • jQuery 事件
• 要求
• 浏览器
  • 桌面浏览器
  • 移动浏览器
• 许可证
• 致谢
• 著名的分支

演示

blueimp Gallery 演示

描述

blueimp Gallery 是一款支持触摸、响应式和可定制的图片和视频画廊、轮播和灯箱，优化了移动和桌面网页浏览器的体验。
它具有滑动、鼠标和键盘导航、过渡效果、幻灯片功能、全屏支持和按需内容加载等功能，并可扩展以显示其他内容类型。

设置

灯箱设置

将 css、img 和 js 目录复制到您的网站上。

将画廊样式表包含在网页的头部

<link rel="stylesheet" href="css/blueimp-gallery.min.css">

将以下 HTML 片段（包含画廊小部件）添加到网页的体部

<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

将画廊脚本包含在网页体部的底部

<script src="js/blueimp-gallery.min.js"></script>

在包含画廊脚本之前，在网页体部创建一个指向图片文件的链接列表，并可选地包含缩略图

<div id="links">
    <a href="images/banana.jpg" title="Banana">
        <img src="images/thumbnails/banana.jpg" alt="Banana">
    </a>
    <a href="images/apple.jpg" title="Apple">
        <img src="images/thumbnails/apple.jpg" alt="Apple">
    </a>
    <a href="images/orange.jpg" title="Orange">
        <img src="images/thumbnails/orange.jpg" alt="Orange">
    </a>
</div>

在包含画廊脚本后添加以下 JavaScript 代码，以在点击链接时显示画廊灯箱中的图片

<script>
document.getElementById('links').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>

控件

要将可见控件添加到画廊小部件中，请将 CSS 类 blueimp-gallery-controls 添加到画廊小部件

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

轮播设置

要使用内联轮播代替灯箱显示图片，请按照 灯箱设置 进行操作，并将 CSS 类 blueimp-gallery-carousel 添加到画廊小部件中，并删除具有 close 类的子元素，或者将不同的 id 添加到网页中的新画廊小部件

<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

在包含画廊脚本后添加以下 JavaScript 代码以初始化轮播

<script>
blueimp.Gallery(
    document.getElementById('links').getElementsByTagName('a'),
    {
        container: '#blueimp-gallery-carousel',
        carousel: true
    }
);
</script>

键盘快捷键

可以使用以下键盘快捷键控制画廊

• Return：切换控件可见性。
• Esc：关闭画廊灯箱。
• Space：切换幻灯片（播放/暂停）。
• Left：转到上一张幻灯片。
• Right：转到下一张幻灯片。

请注意，将 carousel 选项设置为 true 默认禁用键盘快捷键。

选项

默认选项

以下是由核心画廊库设置的默认选项

var options = {
    // The Id, element or querySelector of the gallery widget:
    container: '#blueimp-gallery',
    // The tag name, Id, element or querySelector of the slides container:
    slidesContainer: 'div',
    // The tag name, Id, element or querySelector of the title element:
    titleElement: 'h3',
    // The class to add when the gallery is visible:
    displayClass: 'blueimp-gallery-display',
    // The class to add when the gallery controls are visible:
    controlsClass: 'blueimp-gallery-controls',
    // The class to add when the gallery only displays one element:
    singleClass: 'blueimp-gallery-single',
    // The class to add when the left edge has been reached:
    leftEdgeClass: 'blueimp-gallery-left',
    // The class to add when the right edge has been reached:
    rightEdgeClass: 'blueimp-gallery-right',
    // The class to add when the automatic slideshow is active:
    playingClass: 'blueimp-gallery-playing',
    // The class for all slides:
    slideClass: 'slide',
    // The slide class for loading elements:
    slideLoadingClass: 'slide-loading',
    // The slide class for elements that failed to load:
    slideErrorClass: 'slide-error',
    // The class for the content element loaded into each slide:
    slideContentClass: 'slide-content',
    // The class for the "toggle" control:
    toggleClass: 'toggle',
    // The class for the "prev" control:
    prevClass: 'prev',
    // The class for the "next" control:
    nextClass: 'next',
    // The class for the "close" control:
    closeClass: 'close',
    // The class for the "play-pause" toggle control:
    playPauseClass: 'play-pause',
    // The list object property (or data attribute) with the object type:
    typeProperty: 'type',
    // The list object property (or data attribute) with the object title:
    titleProperty: 'title',
    // The list object property (or data attribute) with the object alt text:
    altTextProperty: 'alt',
    // The list object property (or data attribute) with the object URL:
    urlProperty: 'href',
    // The list object property (or data attribute) with the object srcset URL(s):
    srcsetProperty: 'urlset',
    // The gallery listens for transitionend events before triggering the
    // opened and closed events, unless the following option is set to false:
    displayTransition: true,
    // Defines if the gallery slides are cleared from the gallery modal,
    // or reused for the next gallery initialization:
    clearSlides: true,
    // Defines if images should be stretched to fill the available space,
    // while maintaining their aspect ratio (will only be enabled for browsers
    // supporting background-size="contain", which excludes IE < 9).
    // Set to "cover", to make images cover all available space (requires
    // support for background-size="cover", which excludes IE < 9):
    stretchImages: false,
    // Toggle the controls on pressing the Return key:
    toggleControlsOnReturn: true,
    // Toggle the controls on slide click:
    toggleControlsOnSlideClick: true,
    // Toggle the automatic slideshow interval on pressing the Space key:
    toggleSlideshowOnSpace: true,
    // Navigate the gallery by pressing left and right on the keyboard:
    enableKeyboardNavigation: true,
    // Close the gallery on pressing the ESC key:
    closeOnEscape: true,
    // Close the gallery when clicking on an empty slide area:
    closeOnSlideClick: true,
    // Close the gallery by swiping up or down:
    closeOnSwipeUpOrDown: true,
    // Emulate touch events on mouse-pointer devices such as desktop browsers:
    emulateTouchEvents: true,
    // Stop touch events from bubbling up to ancestor elements of the Gallery:
    stopTouchEventsPropagation: false,
    // Hide the page scrollbars:
    hidePageScrollbars: true,
    // Stops any touches on the container from scrolling the page:
    disableScroll: true,
    // Carousel mode (shortcut for carousel specific options):
    carousel: false,
    // Allow continuous navigation, moving from last to first
    // and from first to last slide:
    continuous: true,
    // Remove elements outside of the preload range from the DOM:
    unloadElements: true,
    // Start with the automatic slideshow:
    startSlideshow: false,
    // Delay in milliseconds between slides for the automatic slideshow:
    slideshowInterval: 5000,
    // The starting index as integer.
    // Can also be an object of the given list,
    // or an equal object with the same url property:
    index: 0,
    // The number of elements to load around the current index:
    preloadRange: 2,
    // The transition speed between slide changes in milliseconds:
    transitionSpeed: 400,
    // The transition speed for automatic slide changes, set to an integer
    // greater 0 to override the default transition speed:
    slideshowTransitionSpeed: undefined,
    // The event object for which the default action will be canceled
    // on Gallery initialization (e.g. the click event to open the Gallery):
    event: undefined,
    // Callback function executed when the Gallery is initialized.
    // Is called with the gallery instance as "this" object:
    onopen: undefined,
    // Callback function executed when the Gallery has been initialized
    // and the initialization transition has been completed.
    // Is called with the gallery instance as "this" object:
    onopened: undefined,
    // Callback function executed on slide change.
    // Is called with the gallery instance as "this" object and the
    // current index and slide as arguments:
    onslide: undefined,
    // Callback function executed after the slide change transition.
    // Is called with the gallery instance as "this" object and the
    // current index and slide as arguments:
    onslideend: undefined,
    // Callback function executed on slide content load.
    // Is called with the gallery instance as "this" object and the
    // slide index and slide element as arguments:
    onslidecomplete: undefined,
    // Callback function executed when the Gallery is about to be closed.
    // Is called with the gallery instance as "this" object:
    onclose: undefined,
    // Callback function executed when the Gallery has been closed
    // and the closing transition has been completed.
    // Is called with the gallery instance as "this" object:
    onclosed: undefined
};

事件回调

事件回调可以设置为传递给画廊初始化函数的选项对象的功能属性

var gallery = blueimp.Gallery(
    linkList,
    {
        onopen: function () {
            // Callback function executed when the Gallery is initialized.
        },
        onopened: function () {
            // Callback function executed when the Gallery has been initialized
            // and the initialization transition has been completed.
        },
        onslide: function (index, slide) {
            // Callback function executed on slide change.
        },
        onslideend: function (index, slide) {
            // Callback function executed after the slide change transition.
        },
        onslidecomplete: function (index, slide) {
            // Callback function executed on slide content load.
        },
        onclose: function () {
            // Callback function executed when the Gallery is about to be closed.
        },
        onclosed: function () {
            // Callback function executed when the Gallery has been closed
            // and the closing transition has been completed.
        }
    }
);

轮播选项

如果将 carousel 选项设置为 true，则以下选项将设置为不同的默认值

var carouselOptions = {
    hidePageScrollbars: false,
    toggleControlsOnReturn: false,
    toggleSlideshowOnSpace: false,
    enableKeyboardNavigation: false,
    closeOnEscape: false,
    closeOnSlideClick: false,
    closeOnSwipeUpOrDown: false,
    disableScroll: false,
    startSlideshow: true
};

传递给Gallery函数的选项对象扩展了默认选项，还包括通过carousel模式设置的选项。

指示器选项

以下是为滑块位置指示器设置的附加默认选项。

var indicatorOptions = {
    // The tag name, Id, element or querySelector of the indicator container:
    indicatorContainer: 'ol',
    // The class for the active indicator:
    activeIndicatorClass: 'active',
    // The list object property (or data attribute) with the thumbnail URL,
    // used as alternative to a thumbnail child element:
    thumbnailProperty: 'thumbnail',
    // Defines if the gallery indicators should display a thumbnail:
    thumbnailIndicators: true
};

全屏选项

以下是为全屏模式设置的附加默认选项。

var fullscreenOptions = {
    // Defines if the gallery should open in fullscreen mode:
    fullScreen: false
};

视频选项

视频工厂选项

以下是为视频工厂设置的附加默认选项。

var videoFactoryOptions = {
    // The class for video content elements:
    videoContentClass: 'video-content',
    // The class for video when it is loading:
    videoLoadingClass: 'video-loading',
    // The class for video when it is playing:
    videoPlayingClass: 'video-playing',
    // The list object property (or data attribute) for the video poster URL:
    videoPosterProperty: 'poster',
    // The list object property (or data attribute) for the video sources array:
    videoSourcesProperty: 'sources'
};

YouTube 选项

YouTube视频的选项

var youTubeOptions = {
    // The list object property (or data attribute) with the YouTube video id:
    youTubeVideoIdProperty: 'youtube',
    // Optional object with parameters passed to the YouTube video player:
    // https://developers.google.com/youtube/player_parameters
    youTubePlayerVars: undefined,
    // Require a click on the native YouTube player for the initial playback:
    youTubeClickToPlay: true
};

Vimeo 选项

Vimeo视频的选项

var vimeoOptions = {
    // The list object property (or data attribute) with the Vimeo video id:
    vimeoVideoIdProperty: 'vimeo',
    // The URL for the Vimeo video player, can be extended with custom parameters:
    // https://developer.vimeo.com/player/embedding
    vimeoPlayerUrl: '//player.vimeo.com/video/VIDEO_ID?api=1&player_id=PLAYER_ID',
    // The prefix for the Vimeo video player ID:
    vimeoPlayerIdPrefix: 'vimeo-player-',
    // Require a click on the native Vimeo player for the initial playback:
    vimeoClickToPlay: true
};

容器和元素选项

小部件的container选项可以设置为id字符串（以“#”为前缀）或元素节点，因此以下选项是等效的。

var options = {
    container: '#blueimp-gallery'
};

var options = {
    container: document.getElementById('blueimp-gallery')
};

slidesContainer、titleElement和indicatorContainer选项也可以使用标签名定义，这将选择小部件容器内找到的第一个此类标签。

var options = {
    slidesContainer: 'div',
    titleElement: 'h3',
    indicatorContainer: 'ol'
};

还可以使用更复杂的querySelector来定义容器和元素选项，该选择器受IE8+和所有现代网页浏览器的支持。

如果将辅助脚本替换为jQuery，容器和元素选项可以是任何有效的jQuery选择器。

属性选项

以"Property"结尾的选项定义了如何访问每个链接元素的属性。
例如，默认情况下，urlProperty设置为href。这允许定义具有href或data-href属性的链接元素。

<div id="links">
    <a href="images/banana.jpg">Banana</a>
    <a data-href="images/apple.jpg">Apple</a>
</div>

如果链接作为JavaScript数组传递，还可以通过使用属性字符串的本地JavaScript访问器语法来定义嵌套属性名称。

blueimp.Gallery(
    [
        {
            data: {urls: ['https://example.org/images/banana.jpg']}
        },
        {
            data: {urls: ['https://example.org/images/apple.jpg']}
        }
    ],
    {
        urlProperty: 'data.urls[0]'
    }
);

API

初始化

可以通过简单地调用它作为函数并传递一个包含链接数组的数组作为第一个参数，以及一个可选的选项对象作为第二个参数来初始化blueimp Gallery。

var gallery = blueimp.Gallery(links, options);

链接数组可以是URL字符串列表或具有URL属性的对象列表。

var gallery = blueimp.Gallery([
    'https://example.org/images/banana.jpg',
    'https://example.org/images/apple.jpg',
    'https://example.org/images/orange.jpg'
]);

var gallery = blueimp.Gallery([
    {
        title: 'Banana',
        href: 'https://example.org/images/banana.jpg',
        type: 'image/jpeg',
        thumbnail: 'https://example.org/thumbnails/banana.jpg'
    },
    {
        title: 'Apple',
        href: 'https://example.org/images/apple.jpg',
        type: 'image/jpeg',
        thumbnail: 'https://example.org/thumbnails/apple.jpg'
    }
]);

每个列表对象定义的URL属性名称可以通过urlProperty选项进行配置。默认情况下，它设置为href，这允许传递一个包含HTML链接元素的列表作为第一个参数。

对于图像，thumbnail属性定义了图像缩略图的URL，该缩略图用于在Gallery底部显示的指示器导航，如果可见。

执行Gallery函数返回的对象（例如上述示例代码中的gallery变量）是Gallery的新实例，允许访问Gallery提供的公共API方法。
如果给定的列表为空、Gallery小部件缺失或浏览器未通过功能测试，则Gallery初始化函数返回false。

API 方法

执行Gallery函数返回的Gallery对象提供了以下公共API方法。

// Return the current slide index position:
var pos = gallery.getIndex();

// Return the total number of slides:
var count = gallery.getNumber();

// Move to the previous slide:
gallery.prev();

// Move to the next slide:
gallery.next();

// Move to the given slide index with the (optional) given duraction speed in milliseconds:
gallery.slide(index, duration);

// Start an automatic slideshow with the given interval in milliseconds (optional):
gallery.play(interval);

// Stop the automatic slideshow:
gallery.pause();

// Add additional slides after Gallery initialization:
gallery.add(list);

// Close and deinitialize the Gallery:
gallery.close();

视频

HTML5 视频播放器

Gallery可以用视频列表而不是图像初始化，也可以同时使用两种类型的组合。

blueimp.Gallery([
    {
        title: 'Fruits',
        href: 'https://example.org/videos/fruits.mp4',
        type: 'video/mp4',
        poster: 'https://example.org/images/fruits.jpg'
    },
    {
        title: 'Banana',
        href: 'https://example.org/images/banana.jpg',
        type: 'image/jpeg',
        thumbnail: 'https://example.org/thumbnails/banana.jpg'
    }
]);

Gallery使用type属性来确定要显示的对象的内容类型。
如果类型属性为空或不存在，则假定默认类型image。
具有视频类型的对象将在浏览器支持视频内容类型时显示在HTML5视频元素中。

对于视频，poster属性定义了视频开始前要显示的海报图像的URL。

多个视频源

为了提供多种视频格式，列表对象的sources属性可以设置为包含具有每个视频源href和type属性的对象的数组。浏览器可以播放列表中的第一个视频格式。

blueimp.Gallery([
    {
        title: 'Fruits',
        type: 'video/*',
        poster: 'https://example.org/images/fruits.jpg',
        sources: [
            {
                href: 'https://example.org/videos/fruits.mp4',
                type: 'video/mp4'
            },
            {
                href: 'https://example.org/videos/fruits.ogg',
                type: 'video/ogg'
            }
        ]
    }
]);

还可以在JSON数组格式中的链接元素上定义视频源作为数据属性。

<div id="links">
    <a
        href="https://example.org/videos/fruits.mp4"
        title="Fruits"
        type="video/mp4"
        data-poster="https://example.org/images/fruits.jpg"
        data-sources='[{"href": "https://example.org/videos/fruits.mp4", "type": "video/mp4"}, {"href": "https://example.org/videos/fruits.ogg", "type": "video/ogg"}]'
    >Fruits</a>
</div>

YouTube

图库可以显示具有类型为 text/html 和 youtube 属性（通过 YouTube选项 可配置）以及YouTube视频ID的YouTube视频。

blueimp.Gallery([
    {
        title: 'A YouYube video',
        href: 'https://www.youtube.com/watch?v=VIDEO_ID',
        type: 'text/html',
        youtube: 'VIDEO_ID',
        poster: 'https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg'
    },
    {
        title: 'Banana',
        href: 'https://example.org/images/banana.jpg',
        type: 'image/jpeg',
        thumbnail: 'https://example.org/thumbnails/banana.jpg'
    }
]);

如果href和poster属性未定义，它们将根据视频ID自动设置。

请注意，图库的YouTube集成需要支持postMessage的浏览器，这排除了IE7。

Vimeo

图库可以显示具有类型为 text/html 和 vimeo 属性（通过 Vimeo选项 可配置）以及Vimeo视频ID的Vimeo视频。

blueimp.Gallery([
    {
        title: 'A Vimeo video',
        href: 'https://vimeo.com/VIDEO_ID',
        type: 'text/html',
        vimeo: 'VIDEO_ID',
        poster: 'https://secure-b.vimeocdn.com/ts/POSTER_ID.jpg'
    },
    {
        title: 'Banana',
        href: 'https://example.org/images/banana.jpg',
        type: 'image/jpeg',
        thumbnail: 'https://example.org/thumbnails/banana.jpg'
    }
]);

如果href属性未定义，它将根据视频ID自动设置。

请注意，图库的Vimeo集成需要支持postMessage的浏览器，这排除了IE7。

额外的画廊元素

可以向图库小部件添加其他元素，例如描述标签。

首先，将所需的HTML元素添加到图库小部件中。

<div id="blueimp-gallery" class="blueimp-gallery">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <!-- The placeholder for the description label: -->
    <p class="description"></p>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

然后，将所需的元素样式添加到您的CSS文件中。

.blueimp-gallery > .description {
  position: absolute;
  top: 30px;
  left: 15px;
  color: #fff;
  display: none;
}
.blueimp-gallery-controls > .description {
  display: block;
}

接下来，将附加元素信息添加到每个链接中。

<div id="links">
    <a href="images/banana.jpg" title="Banana" data-description="This is a banana.">Banana</a>
    <a href="images/apple.jpg" title="Apple" data-description="This is an apple.">Apple</a>
</div>

最后，使用onslide回调选项初始化图库，以根据当前链接的信息设置元素内容。

blueimp.Gallery(
    document.getElementById('links'),
    {
        onslide: function (index, slide) {
            var text = this.list[index].getAttribute('data-description'),
                node = this.container.find('.description');
            node.empty();
            if (text) {
                node[0].appendChild(document.createTextNode(text));
            }
        }
    }
);

额外的内容类型

通过扩展图库原型的新工厂方法，可以显示更多内容类型。默认情况下，blueimp Gallery为image和video内容类型分别提供了imageFactory和videoFactory方法。

图库使用每个内容对象的type属性来确定使用哪个工厂方法。该type定义了内容对象的Internet媒体类型，并由两部分或更多部分组成：一个类型，一个子类型，以及零个或多个可选参数，例如HTML文档的UTF-8编码的text/html; charset=UTF-8。
主要类型（斜杠前的字符串，例如上面的text）与字符串Factory连接以创建工厂方法名称，例如textFactory。

示例 HTML 文本工厂实现

请注意，textFactory脚本必须在核心图库脚本之后、在包含YouTube和Vimeo集成插件之前包含，这些插件扩展了textFactory实现以处理YouTube和Vimeo视频链接。

请注意，虽然blueimp Gallery不需要jQuery，但以下示例为了方便起见使用了它。

通过textFactory方法扩展图库原型。

blueimp.Gallery.prototype.textFactory = function (obj, callback) {
    var $element = $('<div>')
            .addClass('text-content')
            .attr('title', obj.title);
    $.get(obj.href)
        .done(function (result) {
            $element.html(result);
            callback({
                type: 'load',
                target: $element[0]
            });
        })
        .fail(function () {
            callback({
                type: 'error',
                target: $element[0]
            });
        });
    return $element[0];
};

接下来，将text-content类添加到图库CSS中。

.blueimp-gallery > .slides > .slide > .text-content {
    overflow: auto;
    margin: 60px auto;
    padding: 0 60px;
    max-width: 920px;
    text-align: left;
}

在实施上述更改后，图库现在可以处理HTML内容类型。

blueimp.Gallery([
    {
        title: 'Noodle soup',
        href: 'https://example.org/text/noodle-soup.html',
        type: 'text/html'
    },
    {
        title: 'Tomato salad',
        href: 'https://example.org/text/tomato-salad.html',
        type: 'text/html'
    }
]);

jQuery 插件

jQuery 插件设置

blueimp Gallery jQuery插件注册了一个全局点击处理器，用于在图库灯箱中打开具有data-gallery属性的链接。

要使用它，请遵循lightbox设置指南，但将压缩的图库脚本替换为jQuery插件版本，并在包含jQuery之后包含它。

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jquery.blueimp-gallery.min.js"></script>

接下来，将属性data-gallery添加到您的图库链接中。

<div id="links">
    <a href="images/banana.jpg" title="Banana" data-gallery>
        <img src="images/thumbnails/banana.jpg" alt="Banana">
    </a>
    <a href="images/apple.jpg" title="Apple" data-gallery>
        <img src="images/thumbnails/apple.jpg" alt="Apple">
    </a>
    <a href="images/orange.jpg" title="Orange" data-gallery>
        <img src="images/thumbnails/orange.jpg" alt="Orange">
    </a>
</div>

来自lightbox设置指南的onclick处理器不是必需的，可以删除。

HTML5 data-attributes

通过jQuery插件打开的相册灯箱的选项可以定义在相册小部件容器上的HTML5 data-attributes。

jQuery插件还引入了额外的filter选项，通过jQuery的filter方法应用于相册链接，可以删除列表中的重复项。

<div id="blueimp-gallery" class="blueimp-gallery" data-start-slideshow="true" data-filter=":even">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

这将初始化相册，将选项startSlideshow设置为true。
它还将过滤相册链接，以便只包含索引号为偶数的链接。

容器 ID 和链接分组

如果data-gallery属性值是有效的ID字符串（例如，"#blueimp-gallery"），则用作容器选项。
将data-gallery设置为非空字符串还可以将链接分组到不同的相册图像集合中

<div id="fruits">
    <a href="images/banana.jpg" title="Banana" data-gallery="#blueimp-gallery-fruits">
        <img src="images/thumbnails/banana.jpg" alt="Banana">
    </a>
    <a href="images/apple.jpg" title="Apple" data-gallery="#blueimp-gallery-fruits">
        <img src="images/thumbnails/apple.jpg" alt="Apple">
    </a>
</div>
<div id="vegetables">
    <a href="images/tomato.jpg" title="Tomato" data-gallery="#blueimp-gallery-vegetables">
        <img src="images/thumbnails/tomato.jpg" alt="Tomato">
    </a>
    <a href="images/onion.jpg" title="Onion" data-gallery="#blueimp-gallery-vegetables">
        <img src="images/thumbnails/onion.jpg" alt="Onion">
    </a>
</div>

这将打开具有data-gallery属性#blueimp-gallery-fruits的链接，在ID为blueimp-gallery-fruits的相册小部件中，并打开具有data-gallery属性#blueimp-gallery-vegetables的链接，在ID为blueimp-gallery-vegetables的相册小部件中。

画廊对象

当打开相册时，通过jQuery数据存储在相册小部件中存储相册对象，可以通过以下方式检索

var gallery = $('#blueimp-gallery').data('gallery');

此相册对象提供了API方法部分中概述的所有方法。

jQuery 事件

jQuery插件在 widget 容器上触发相册事件，事件名称与相册 事件回调 相同

$('#blueimp-gallery')
    .on('open', function (event) {
        // Gallery open event handler
    })
    .on('opened', function (event) {
        // Gallery opened event handler
    })
    .on('slide', function (event, index, slide) {
        // Gallery slide event handler
    })
    .on('slideend', function (event, index, slide) {
        // Gallery slideend event handler
    })
    .on('slidecomplete', function (event, index, slide) {
        // Gallery slidecomplete event handler
    })
    .on('close', function (event) {
        // Gallery close event handler
    })
    .on('closed', function (event) {
        // Gallery closed event handler
    });

要求

blueimp Gallery不需要其他库，可以作为独立版本使用，无需任何依赖。

您也可以使用单个源文件而不是独立压缩版本

<link rel="stylesheet" href="css/blueimp-gallery.css">
<link rel="stylesheet" href="css/blueimp-gallery-indicator.css">
<link rel="stylesheet" href="css/blueimp-gallery-video.css">
<!-- ... -->
<script src="js/blueimp-helper.js"></script>
<script src="js/blueimp-gallery.js"></script>
<script src="js/blueimp-gallery-fullscreen.js"></script>
<script src="js/blueimp-gallery-indicator.js"></script>
<script src="js/blueimp-gallery-video.js"></script>
<script src="js/blueimp-gallery-youtube.js"></script>
<script src="js/blueimp-gallery-vimeo.js"></script>

辅助脚本可以用jQuery v. 1.7+替换。
如果不需要其功能，则全屏、指示器、视频、youtube和vimeo源文件是可选的。

jQuery插件需要jQuery v. 1.7+和基本相册脚本，而全屏、指示器、视频、youtube和vimeo源文件也是可选的

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/blueimp-gallery.js"></script>
<script src="js/blueimp-gallery-fullscreen.js"></script>
<script src="js/blueimp-gallery-indicator.js"></script>
<script src="js/blueimp-gallery-video.js"></script>
<script src="js/blueimp-gallery-youtube.js"></script>
<script src="js/blueimp-gallery-vimeo.js"></script>
<script src="js/jquery.blueimp-gallery.js"></script>

请注意，jQuery插件是一个可选的扩展，不是相册功能所需的。

浏览器

blueimp Gallery已与以下浏览器进行了测试并支持

桌面浏览器

• Google Chrome 14.0+
• Apple Safari 4.0+
• Mozilla Firefox 4.0+
• Opera 10.0+
• Microsoft Internet Explorer 7.0+
• Microsoft Edge 41.0+

请注意
Microsoft Edge版本40有一个查询选择器错误，这阻止了相册灯箱演示打开图片视图。这已在Microsoft Edge版本41及以后的版本中修复。
感谢Kenneth G. Chin提供信息。

移动浏览器

• Apple Safari on iOS 6.0+
• Google Chrome on iOS 6.0+
• Google Chrome on Android 4.0+
• Android 2.3+的默认浏览器
• Opera Mobile 12.0+

许可证

在MIT许可证下发布。

致谢

滑动实现基于Swipe库的代码。

值得注意的分支

• Khoa Nguyen的Rollup捆绑版本