![\"Banana\"](\"images/banana.jpg\")
\n ![\"Apple\"](\"images/apple.jpg\")
\n ![\"Orange\"](\"images/orange.jpg\")
\n \n \n ![\"Banana\"](\"images/banana-75.jpg\")
\n \n Apple \n
\n```\n\nPlease note that `data-sources` must be a valid\n[JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON) `string` listing\nthe sources array.\n\n## Keyboard shortcuts\n\nThe Gallery can be controlled with the following keyboard shortcuts:\n\n- `Enter`: Toggle controls visibility.\n- `Escape`: Close the Gallery lightbox.\n- `Space`: Toggle the slideshow (play/pause).\n- `ArrowLeft`: Move to the previous slide.\n- `ArrowRight`: Move to the next slide.\n\nPlease note that setting the `carousel` option to `true` disables the keyboard\nshortcuts by default.\n\n## Options\n\n### Default options\n\nThe following are the default options set by the core Gallery library:\n\n```js\nvar options = {\n // The Id, element or querySelector of the gallery widget:\n container: '#blueimp-gallery',\n // The tag name, Id, element or querySelector of the slides container:\n slidesContainer: 'div',\n // The tag name, Id, element or querySelector of the title element:\n titleElement: 'h3',\n // The class to add when the gallery is visible:\n displayClass: 'blueimp-gallery-display',\n // The class to add when the gallery controls are visible:\n controlsClass: 'blueimp-gallery-controls',\n // The class to add when the gallery only displays one element:\n singleClass: 'blueimp-gallery-single',\n // The class to add when the left edge has been reached:\n leftEdgeClass: 'blueimp-gallery-left',\n // The class to add when the right edge has been reached:\n rightEdgeClass: 'blueimp-gallery-right',\n // The class to add when the automatic slideshow is active:\n playingClass: 'blueimp-gallery-playing',\n // The class to add when the browser supports SVG as img (or background):\n svgasimgClass: 'blueimp-gallery-svgasimg',\n // The class to add when the browser supports SMIL (animated SVGs):\n smilClass: 'blueimp-gallery-smil',\n // The class for all slides:\n slideClass: 'slide',\n // The slide class for the active (current index) slide:\n slideActiveClass: 'slide-active',\n // The slide class for the previous (before current index) slide:\n slidePrevClass: 'slide-prev',\n // The slide class for the next (after current index) slide:\n slideNextClass: 'slide-next',\n // The slide class for loading elements:\n slideLoadingClass: 'slide-loading',\n // The slide class for elements that failed to load:\n slideErrorClass: 'slide-error',\n // The class for the content element loaded into each slide:\n slideContentClass: 'slide-content',\n // The class for the \"toggle\" control:\n toggleClass: 'toggle',\n // The class for the \"prev\" control:\n prevClass: 'prev',\n // The class for the \"next\" control:\n nextClass: 'next',\n // The class for the \"close\" control:\n closeClass: 'close',\n // The class for the \"play-pause\" toggle control:\n playPauseClass: 'play-pause',\n // The list object property (or data attribute) with the object type:\n typeProperty: 'type',\n // The list object property (or data attribute) with the object title:\n titleProperty: 'title',\n // The list object property (or data attribute) with the object alt text:\n altTextProperty: 'alt',\n // The list object property (or data attribute) with the object URL:\n urlProperty: 'href',\n // The list object property (or data attribute) with the object srcset:\n srcsetProperty: 'srcset',\n // The list object property (or data attribute) with the object sizes:\n sizesProperty: 'sizes',\n // The list object property (or data attribute) with the object sources:\n sourcesProperty: 'sources',\n // The gallery listens for transitionend events before triggering the\n // opened and closed events, unless the following option is set to false:\n displayTransition: true,\n // Defines if the gallery slides are cleared from the gallery modal,\n // or reused for the next gallery initialization:\n clearSlides: true,\n // Toggle the controls on pressing the Enter key:\n toggleControlsOnEnter: true,\n // Toggle the controls on slide click:\n toggleControlsOnSlideClick: true,\n // Toggle the automatic slideshow interval on pressing the Space key:\n toggleSlideshowOnSpace: true,\n // Navigate the gallery by pressing the ArrowLeft and ArrowRight keys:\n enableKeyboardNavigation: true,\n // Close the gallery on pressing the Escape key:\n closeOnEscape: true,\n // Close the gallery when clicking on an empty slide area:\n closeOnSlideClick: true,\n // Close the gallery by swiping up or down:\n closeOnSwipeUpOrDown: true,\n // Close the gallery when the URL hash changes:\n closeOnHashChange: true,\n // Emulate touch events on mouse-pointer devices such as desktop browsers:\n emulateTouchEvents: true,\n // Stop touch events from bubbling up to ancestor elements of the Gallery:\n stopTouchEventsPropagation: false,\n // Hide the page scrollbars:\n hidePageScrollbars: true,\n // Stops any touches on the container from scrolling the page:\n disableScroll: true,\n // Carousel mode (shortcut for carousel specific options):\n carousel: false,\n // Allow continuous navigation, moving from last to first\n // and from first to last slide:\n continuous: true,\n // Remove elements outside of the preload range from the DOM:\n unloadElements: true,\n // Start with the automatic slideshow:\n startSlideshow: false,\n // Delay in milliseconds between slides for the automatic slideshow:\n slideshowInterval: 5000,\n // The direction the slides are moving: ltr=LeftToRight or rtl=RightToLeft\n slideshowDirection: 'ltr',\n // The starting index as integer.\n // Can also be an object of the given list,\n // or an equal object with the same url property:\n index: 0,\n // The number of elements to load around the current index:\n preloadRange: 2,\n // The transition duration between slide changes in milliseconds:\n transitionDuration: 300,\n // The transition duration for automatic slide changes, set to an integer\n // greater 0 to override the default transition duration:\n slideshowTransitionDuration: 500,\n // The event object for which the default action will be canceled\n // on Gallery initialization (e.g. the click event to open the Gallery):\n event: undefined,\n // Callback function executed when the Gallery is initialized.\n // Is called with the gallery instance as \"this\" object:\n onopen: undefined,\n // Callback function executed when the Gallery has been initialized\n // and the initialization transition has been completed.\n // Is called with the gallery instance as \"this\" object:\n onopened: undefined,\n // Callback function executed on slide change.\n // Is called with the gallery instance as \"this\" object and the\n // current index and slide as arguments:\n onslide: undefined,\n // Callback function executed after the slide change transition.\n // Is called with the gallery instance as \"this\" object and the\n // current index and slide as arguments:\n onslideend: undefined,\n // Callback function executed on slide content load.\n // Is called with the gallery instance as \"this\" object and the\n // slide index and slide element as arguments:\n onslidecomplete: undefined,\n // Callback function executed when the Gallery is about to be closed.\n // Is called with the gallery instance as \"this\" object:\n onclose: undefined,\n // Callback function executed when the Gallery has been closed\n // and the closing transition has been completed.\n // Is called with the gallery instance as \"this\" object:\n onclosed: undefined\n}\n```\n\n### Event callbacks\n\nEvent callbacks can be set as function properties of the options object passed\nto the Gallery initialization function:\n\n```js\nvar gallery = blueimp.Gallery(linkList, {\n onopen: function () {\n // Callback function executed when the Gallery is initialized.\n },\n onopened: function () {\n // Callback function executed when the Gallery has been initialized\n // and the initialization transition has been completed.\n },\n onslide: function (index, slide) {\n // Callback function executed on slide change.\n },\n onslideend: function (index, slide) {\n // Callback function executed after the slide change transition.\n },\n onslidecomplete: function (index, slide) {\n // Callback function executed on slide content load.\n },\n onclose: function () {\n // Callback function executed when the Gallery is about to be closed.\n },\n onclosed: function () {\n // Callback function executed when the Gallery has been closed\n // and the closing transition has been completed.\n }\n})\n```\n\n### Carousel options\n\nIf the `carousel` option is `true`, the following options are set to different\ndefault values:\n\n```js\nvar carouselOptions = {\n hidePageScrollbars: false,\n toggleControlsOnEnter: false,\n toggleSlideshowOnSpace: false,\n enableKeyboardNavigation: false,\n closeOnEscape: false,\n closeOnSlideClick: false,\n closeOnSwipeUpOrDown: false,\n closeOnHashChange: false,\n disableScroll: false,\n startSlideshow: true\n}\n```\n\nThe options object passed to the Gallery function extends the default options\nand also those options set via `carousel` mode.\n\n### Indicator options\n\nThe following are the additional default options set for the slide position\nindicator:\n\n```js\nvar indicatorOptions = {\n // The tag name, Id, element or querySelector of the indicator container:\n indicatorContainer: 'ol',\n // The class for the active indicator:\n activeIndicatorClass: 'active',\n // The list object property (or data attribute) with the thumbnail URL,\n // used as alternative to a thumbnail child element:\n thumbnailProperty: 'thumbnail',\n // Defines if the gallery indicators should display a thumbnail:\n thumbnailIndicators: true\n}\n```\n\n### Fullscreen options\n\nThe following are the additional default options set for the fullscreen mode:\n\n```js\nvar fullscreenOptions = {\n // Defines if the gallery should open in fullscreen mode:\n fullscreen: false\n}\n```\n\n### Video options\n\n#### Video factory options\n\nThe following are the additional default options set for the video factory:\n\n```js\nvar videoFactoryOptions = {\n // The class for video content elements:\n videoContentClass: 'video-content',\n // The class for video when it is loading:\n videoLoadingClass: 'video-loading',\n // The class for video when it is playing:\n videoPlayingClass: 'video-playing',\n // The class for video content displayed in an iframe:\n videoIframeClass: 'video-iframe',\n // The class for the video cover element:\n videoCoverClass: 'video-cover',\n // The class for the video play control:\n videoPlayClass: 'video-play',\n // Play videos inline by default:\n videoPlaysInline: true,\n // The list object property (or data attribute) for video preload:\n videoPreloadProperty: 'preload',\n // The list object property (or data attribute) for the video poster URL:\n videoPosterProperty: 'poster'\n}\n```\n\n#### YouTube options\n\nOptions for [YouTube](https://www.youtube.com/) videos:\n\n```js\nvar youTubeOptions = {\n // The list object property (or data attribute) with the YouTube video id:\n youTubeVideoIdProperty: 'youtube',\n // Optional object with parameters passed to the YouTube video player:\n // https://developers.google.com/youtube/player_parameters\n youTubePlayerVars: undefined,\n // Require a click on the native YouTube player for the initial playback:\n youTubeClickToPlay: true\n}\n```\n\n#### Vimeo options\n\nOptions for [Vimeo](https://vimeo.com/) videos:\n\n```js\nvar vimeoOptions = {\n // The list object property (or data attribute) with the Vimeo video id:\n vimeoVideoIdProperty: 'vimeo',\n // The URL for the Vimeo video player, can be extended with custom parameters:\n // https://developer.vimeo.com/player/embedding\n vimeoPlayerUrl:\n 'https://player.vimeo.com/video/VIDEO_ID?api=1&player_id=PLAYER_ID',\n // The prefix for the Vimeo video player ID:\n vimeoPlayerIdPrefix: 'vimeo-player-',\n // Require a click on the native Vimeo player for the initial playback:\n vimeoClickToPlay: true\n}\n```\n\n### Container and element options\n\nThe widget `container`, `slidesContainer`, `titleElement` and\n`indicatorContainer` options can be set as\n[CSS selector](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Selector)\nor `HTMLElement` node, so the following are equivalent:\n\n```js\nvar options = {\n container: '#blueimp-gallery'\n}\n```\n\n```js\nvar options = {\n container: document.getElementById('blueimp-gallery')\n}\n```\n\nCSS selectors are passed as argument to\n[querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll),\nwhich is supported by IE8+ and all modern web browsers and queried with\n[getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)\nor\n[getElementsByTagName](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName)\nin older browsers.\n\nIf the helper script is replaced with [jQuery](https://jquery.com/), the\ncontainer and element options can be any valid jQuery selector.\n\n### Property options\n\nThe options ending with \"Property\" define how the properties of each link\nelement are accessed. \nFor example, the `urlProperty` is by default set to `href`. This allows to\ndefine link elements with `href` or `data-href` attributes:\n\n```html\n\n```\n\nIf the links are provided as JavaScript array, it is also possible to define\nnested property names, by using the native JavaScript accessor syntax for the\nproperty string:\n\n```js\nblueimp.Gallery(\n [\n {\n data: { urls: ['https://example.org/images/banana.jpg'] }\n },\n {\n data: { urls: ['https://example.org/images/apple.jpg'] }\n }\n ],\n {\n urlProperty: 'data.urls[0]'\n }\n)\n```\n\n## API\n\n### Initialization\n\nThe blueimp Gallery can be initialized by simply calling it as a function with\nan array of links as first argument and an optional options object as second\nargument:\n\n```js\nvar gallery = blueimp.Gallery(links, options)\n```\n\nThe links array can be a list of URL strings or a list of objects with URL\nproperties:\n\n```js\nvar gallery = blueimp.Gallery([\n 'https://example.org/images/banana.jpg',\n 'https://example.org/images/apple.jpg',\n 'https://example.org/images/orange.jpg'\n])\n```\n\n```js\nvar gallery = blueimp.Gallery([\n {\n title: 'Banana',\n type: 'image/jpeg',\n href: 'https://example.org/images/banana.jpg',\n thumbnail: 'https://example.org/thumbnails/banana.jpg'\n },\n {\n title: 'Apple',\n type: 'image/jpeg',\n href: 'https://example.org/images/apple.jpg',\n thumbnail: 'https://example.org/thumbnails/apple.jpg'\n }\n])\n```\n\nThe URL property name defined by each list object can be configured via the\n`urlProperty` option. By default, it is set to `href`, which allows to pass a\nlist of HTML link elements as first argument.\n\nFor images, the `thumbnail` property defines the URL of the image thumbnail,\nwhich is used for the indicator navigation displayed at the bottom of the\nGallery, if the controls are visible.\n\nThe object returned by executing the Gallery function (the `gallery` variable in\nthe example code above) is a new instance of the Gallery and allows to access\nthe public [API methods](#api-methods) provided by the Gallery. \nThe Gallery initialization function returns `false` if the given list was empty,\nthe Gallery widget is missing, or the browser doesn't pass the functionality\ntest.\n\n### API methods\n\nThe Gallery object returned by executing the Gallery function provides the\nfollowing public API methods:\n\n```js\n// Return the current slide index position:\nvar pos = gallery.getIndex()\n\n// Return the total number of slides:\nvar count = gallery.getNumber()\n\n// Move to the previous slide:\ngallery.prev()\n\n// Move to the next slide:\ngallery.next()\n\n// Move to a slide index with the (optional) duration in milliseconds:\ngallery.slide(index, duration)\n\n// Start an automatic slideshow with the (optional) interval in milliseconds:\ngallery.play(interval)\n\n// Stop the automatic slideshow:\ngallery.pause()\n\n// Add additional slides after Gallery initialization:\ngallery.add(list)\n\n// Close and deinitialize the Gallery:\ngallery.close()\n```\n\n### Videos\n\n#### HTML5 video player\n\nThe Gallery can be initialized with a list of videos instead of images, or a\ncombination of both:\n\n```js\nblueimp.Gallery([\n {\n title: 'Fruits',\n type: 'video/mp4',\n href: 'https://example.org/videos/fruits.mp4',\n poster: 'https://example.org/images/fruits.jpg'\n },\n {\n title: 'Banana',\n type: 'image/jpeg',\n href: 'https://example.org/images/banana.jpg',\n thumbnail: 'https://example.org/thumbnails/banana.jpg'\n }\n])\n```\n\nThe Gallery uses the `type` property to determine the content type of the object\nto display. \nIf the type property is empty or doesn't exist, the default type `image` is\nassumed. \nObjects with a video type will be displayed in a\n[HTML5 video element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)\nif the browser supports the video content type.\n\nFor videos, the `poster` property defines the URL of the poster image to\ndisplay, before the video is started.\n\n#### Video controls\n\nTo start video playback, you can either click on the video play icon or on the\nvideo slide itself. \nStarting the video playback enables the native HTML5 video\n[controls](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-controls).\n\nTo toggle the Gallery controls (previous slide, next slide, etc.) instead of\nstarting video playback on click of a video slide, add the `toggle` class to the\nvideo cover element using the `videoCoverClass` Gallery option:\n\n```js\nblueimp.Gallery(\n [\n {\n title: 'Fruits',\n type: 'video/mp4',\n href: 'https://example.org/videos/fruits.mp4',\n poster: 'https://example.org/images/fruits.jpg'\n }\n ],\n {\n videoCoverClass: 'video-cover toggle'\n }\n)\n```\n\n#### Video preloading\n\nYou can set the `preload` property of a Gallery video object to a valid value\ndefined by the HTML5 video\n[preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload)\nattribute:\n\n- `none`: Indicates that the video should not be preloaded.\n- `metadata`: Indicates that only video metadata (e.g. length) is fetched.\n- `auto`: Indicates that the whole video file can be preloaded.\n\n```js\nblueimp.Gallery([\n {\n title: 'Fruits',\n type: 'video/mp4',\n href: 'https://example.org/videos/fruits.mp4',\n preload: 'auto'\n }\n])\n```\n\nBy default, `preload` is set to `none` to save on network bandwidth consumption.\n\n#### Fullscreen video\n\nBy default, videos are displayed with the HTML5 video\n[playsinline](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline)\nattribute set, which indicates that the video is to be played inline. \nTo disable this behavior, you can set the Gallery option `videoPlaysInline` to\n`false`:\n\n```js\nblueimp.Gallery(\n [\n {\n title: 'Fruits',\n type: 'video/mp4',\n href: 'https://example.org/videos/fruits.mp4',\n poster: 'https://example.org/images/fruits.jpg'\n }\n ],\n {\n videoPlaysInline: false\n }\n)\n```\n\nPlease note that this attribute only has an effect on some mobile browsers, e.g.\nSafari on iOS 10 and later. \nHowever, all browsers provide video controls to switch between fullscreen and\ninline mode on user request.\n\n#### Multiple video sources\n\nTo provide multiple video formats, the `sources` property of a list object can\nbe set to an array of objects with `type` and `src` properties for each video\nsource. The first video format in the list that the browser can play will be\ndisplayed:\n\n```js\nblueimp.Gallery([\n {\n title: 'Fruits',\n type: 'video',\n sources: [\n {\n type: 'video/mp4',\n src: 'https://example.org/videos/fruits.mp4'\n },\n {\n type: 'video/ogg',\n src: 'https://example.org/videos/fruits.ogv'\n }\n ],\n poster: 'https://example.org/images/fruits.jpg'\n }\n])\n```\n\nIt is also possible to define the video sources as `data-sources` attribute as a\n[JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON) `string` listing\nthe sources array:\n\n```html\n\n \n \n Fruits \n
\n```\n\n#### YouTube\n\nThe Gallery can display [YouTube](https://www.youtube.com/) videos for Gallery\nitems with a `type` of `text/html` and a `youtube` property (configurable via\n[YouTube options](#youtube-options)) with the YouTube video-ID:\n\n```js\nblueimp.Gallery([\n {\n title: 'A YouYube video',\n type: 'text/html',\n href: 'https://www.youtube.com/watch?v=VIDEO_ID',\n youtube: 'VIDEO_ID',\n poster: 'https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg'\n }\n])\n```\n\nIf the `href` and `poster` properties are undefined, they are set automatically\nbased on the video ID.\n\nPlease note that the Gallery YouTube integration requires a browser with\n[postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)\nsupport, which excludes IE7.\n\n#### Vimeo\n\nThe Gallery can display [Vimeo](https://vimeo.com/) videos for Gallery items\nwith a `type` of `text/html` and a `vimeo` property (configurable via\n[Vimeo options](#vimeo-options)) with the Vimeo video-ID:\n\n```js\nblueimp.Gallery([\n {\n title: 'A Vimeo video',\n type: 'text/html',\n href: 'https://vimeo.com/VIDEO_ID',\n vimeo: 'VIDEO_ID',\n poster: 'https://secure-b.vimeocdn.com/ts/POSTER_ID.jpg'\n }\n])\n```\n\nIf the `href` property is undefined, it is set automatically based on the video\nID.\n\nPlease note that the Gallery Vimeo integration requires a browser with\n[postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)\nsupport, which excludes IE7.\n\n### Additional Gallery elements\n\nIt is possible to add additional elements to the Gallery widget, e.g. a\ndescription label.\n\nFirst, add the desired HTML element to the Gallery widget:\n\n```html\n\n Banana \n Apple\n
\n```\n\nFinally, initialize the Gallery with an `onslide` callback option, to set the\nelement content based on the information from the current link:\n\n```js\nblueimp.Gallery(document.getElementById('links'), {\n onslide: function (index, slide) {\n var text = this.list[index].getAttribute('data-description'),\n node = this.container.find('.description')\n node.empty()\n if (text) {\n node[0].appendChild(document.createTextNode(text))\n }\n }\n})\n```\n\n### Additional content types\n\nBy extending the Gallery prototype with new factory methods, additional content\ntypes can be displayed. By default, blueimp Gallery provides the `imageFactory`\nand `videoFactory` methods for `image` and `video` content types respectively.\n\nThe Gallery uses the `type` property of each content object to determine which\nfactory method to use. The `type` defines the\n[Internet media type](https://en.wikipedia.org/wiki/Internet_media_type) of the\ncontent object and is composed of two or more parts: A type, a subtype, and zero\nor more optional parameters, e.g. `text/html; charset=UTF-8` for an HTML\ndocument with UTF-8 encoding. \nThe main type (the string in front of the slash, `text` in the example above) is\nconcatenated with the string `Factory` to create the factory method name, e.g.\n`textFactory`.\n\n#### Example HTML text factory implementation\n\nPlease note that the textFactory script has to be included after the core\nGallery script, but before including the [YouTube](#youtube) and [Vimeo](#vimeo)\nintegration plugins, which extend the textFactory implementation to handle\nYouTube and Vimeo video links.\n\nPlease also note that although blueimp Gallery doesn't require\n[jQuery](https://jquery.com/), the following example uses it for convenience.\n\nExtend the Gallery prototype with the `textFactory` method:\n\n```js\nblueimp.Gallery.prototype.textFactory = function (obj, callback) {\n var $element = $('').addClass('text-content').attr('title', obj.title)\n $.get(obj.href)\n .done(function (result) {\n $element.html(result)\n callback({\n type: 'load',\n target: $element[0]\n })\n })\n .fail(function () {\n callback({\n type: 'error',\n target: $element[0]\n })\n })\n return $element[0]\n}\n```\n\nNext, add the `text-content` class to the Gallery CSS:\n\n```css\n.blueimp-gallery > .slides > .slide > .text-content {\n overflow: auto;\n margin: 60px auto;\n padding: 0 60px;\n max-width: 920px;\n text-align: left;\n}\n```\n\nWith the previous changes in place, the Gallery can now handle HTML content\ntypes:\n\n```js\nblueimp.Gallery([\n {\n title: 'Noodle soup',\n type: 'text/html',\n href: 'https://example.org/text/noodle-soup.html'\n },\n {\n title: 'Tomato salad',\n type: 'text/html',\n href: 'https://example.org/text/tomato-salad.html'\n }\n])\n```\n\n### jQuery plugin\n\n#### jQuery plugin setup\n\nThe blueimp Gallery jQuery plugin registers a global click handler to open links\nwith `data-gallery` attribute in the Gallery lightbox.\n\nTo use it, follow the [lightbox setup](#lightbox-setup) guide, but replace the\nminified Gallery script with the jQuery plugin version and include it after\nincluding [jQuery](https://jquery.com/):\n\n```html\n\n\n```\n\nNext, add the attribute `data-gallery` to your Gallery links:\n\n```html\n\n```\n\nThe `onclick` handler from the [lightbox setup](#lightbox-setup) guide is not\nrequired and can be removed.\n\n#### HTML5 data-attributes\n\nOptions for the Gallery lightbox opened via the jQuery plugin can be defined as\n[HTML5 data-attributes](https://api.jquery.com/data/#data-html5) on the Gallery\nwidget container.\n\nThe jQuery plugin also introduces the additional `filter` option, which is\napplied to the Gallery links via\n[jQuery's filter method](https://api.jquery.com/filter/) and allows to remove\nduplicates from the list:\n\n```html\n\n \n \n \n \n \n \n
\n```\n\nThis will initialize the Gallery with the option `startSlideshow` set to\n`true`. \nIt will also filter the Gallery links so that only links with an even index\nnumber will be included.\n\n#### Container ids and link grouping\n\nIf the `data-gallery` attribute value is a valid id string (e.g.\n\"#blueimp-gallery\"), it is used as container option. \nSetting `data-gallery` to a non-empty string also allows to group links into\ndifferent sets of Gallery images:\n\n```html\n\n \n ![\"Banana\"](\"images/thumbnails/banana.jpg\")
\n \n \n ![\"Apple\"](\"images/thumbnails/apple.jpg\")
\n \n
\n\n \n \n \n\n \n ![\"Tomato\"](\"images/thumbnails/tomato.jpg\")
\n \n \n ![\"Onion\"](\"images/thumbnails/onion.jpg\")
\n \n
\n```\n\nThis will open the links with the `data-gallery` attribute\n`#blueimp-gallery-fruits` in the Gallery widget with the id\n`blueimp-gallery-fruits`, and the links with the `data-gallery` attribute\n`#blueimp-gallery-vegetables` in the Gallery widget with the id\n`blueimp-gallery-vegetables`.\n\n#### Gallery object\n\nThe gallery object is stored via\n[jQuery data storage](https://api.jquery.com/category/miscellaneous/data-storage/)\non the Gallery widget when the Gallery is opened and can be retrieved the\nfollowing way:\n\n```js\nvar gallery = $('#blueimp-gallery').data('gallery')\n```\n\nThis gallery object provides all methods outlined in the API methods section.\n\n#### jQuery events\n\nThe jQuery plugin triggers Gallery events on the widget container, with event\nnames equivalent to the gallery [event callbacks](#event-callbacks):\n\n```js\n$('#blueimp-gallery')\n .on('open', function (event) {\n // Gallery open event handler\n })\n .on('opened', function (event) {\n // Gallery opened event handler\n })\n .on('slide', function (event, index, slide) {\n // Gallery slide event handler\n })\n .on('slideend', function (event, index, slide) {\n // Gallery slideend event handler\n })\n .on('slidecomplete', function (event, index, slide) {\n // Gallery slidecomplete event handler\n })\n .on('close', function (event) {\n // Gallery close event handler\n })\n .on('closed', function (event) {\n // Gallery closed event handler\n })\n```\n\n## Requirements\n\nblueimp Gallery doesn't require any other libraries and can be used standalone\nwithout any dependencies.\n\nYou can also use the individual source files instead of the standalone minified\nversion:\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n```\n\nThe helper script can be replaced by [jQuery](https://jquery.com/) v. 1.7+. \nThe fullscreen, indicator, video, YouTube and Vimeo source files are optional if\ntheir functionality is not required.\n\nThe [jQuery plugin](#jquery-plugin) requires [jQuery](https://jquery.com/) v.\n1.7+ and the basic Gallery script, while the fullscreen, indicator, video,\nYouTube and Vimeo source files are also optional:\n\n```html\n\n \n \n \n