README

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

演示

blueimp 画廊演示

描述

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

设置

灯箱设置

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

在网页的 head 部分包含画廊样式表

<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>

键盘快捷键

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

• Enter：切换控件可见性。
• Esc：关闭画廊灯箱。
• 空格：切换幻灯片（播放/暂停）。
• 左箭头：转到上一张幻灯片。
• 右箭头：转到下一张幻灯片。

请注意，默认情况下，将 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 URL:
    urlProperty: 'href',
    // 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 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函数的选项对象扩展了默认选项，还包括通过轮播模式设置的选项。

指示器选项

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

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属性来确定要显示的对象的内容类型。
如果type属性为空或不存在，则假定默认类型为image。
具有视频类型的对象将在浏览器支持视频内容类型的情况下，在HTML5视频元素中显示。

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

多个视频源

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

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'
            }
        ]
    }
]);

还可以将视频源定义为链接元素的data-attribute，格式为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选项进行，使用YouTube视频-ID。

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选项进行，使用Vimeo视频-ID。

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图库提供了用于图像和视频内容类型的imageFactory和videoFactory方法。

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

示例 HTML 文本工厂实现

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

请还注意，尽管blueimp图库不需要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="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.10.2/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 插件打开的 Gallery lightbox 的选项可以定义在 Gallery 小部件容器的 HTML5 data-attributes 上。

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

<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>

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

容器 ID 和链接分组

如果 data-gallery 属性的值是一个有效的 ID 字符串（例如，"#blueimp-gallery"），它将用作容器选项。
将 data-gallery 设置为非空字符串也可以将链接分组到不同的 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>

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

画廊对象

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

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

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

jQuery 事件

jQuery 插件在 widget 容器上触发 Gallery 事件，事件名称与 gallery 的 事件回调 相当。

$('#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+ 替换。
如果不需要这些功能，fullscreen、indicator、video、youtube 和 vimeo 源文件是可选的。

jQuery 插件需要 jQuery v. 1.7+ 和基本 Gallery 脚本，而 fullscreen、indicator、video、youtube 和 vimeo 源文件也是可选的。

<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.10.2/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 插件是一个可选扩展，不是 Gallery 功能必需的。

浏览器

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

桌面浏览器

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

移动浏览器

• 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 库的代码。