- Notifications
You must be signed in to change notification settings - Fork984
blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading.
License
blueimp/Gallery
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
- Demo
- Description
- Setup
- Keyboard shortcuts
- Options
- API
- Requirements
- Browser support
- License
- Credits
blueimp Gallery is a touch-enabled, responsive and customizable image and videogallery, carousel and lightbox, optimized for both mobile and desktop webbrowsers.
It features swipe, mouse and keyboard navigation, transition effects, slideshowfunctionality, fullscreen support and on-demand content loading and can beextended to display additional content types.
Install theblueimp-gallery package withNPM:
npm install blueimp-gallery
Copy thecss,img andjs directories to your website.
Include the Gallery stylesheet in the head section of your webpage:
<linkrel="stylesheet"href="css/blueimp-gallery.min.css"/>
Add the following HTML snippet with the Gallery widget to the body of yourwebpage:
<!-- The Gallery as lightbox dialog, should be a document body child element --><divid="blueimp-gallery"class="blueimp-gallery"aria-label="image gallery"aria-modal="true"role="dialog"><divclass="slides"aria-live="polite"></div><h3class="title"></h3><aclass="prev"aria-controls="blueimp-gallery"aria-label="previous slide"aria-keyshortcuts="ArrowLeft"></a><aclass="next"aria-controls="blueimp-gallery"aria-label="next slide"aria-keyshortcuts="ArrowRight"></a><aclass="close"aria-controls="blueimp-gallery"aria-label="close"aria-keyshortcuts="Escape"></a><aclass="play-pause"aria-controls="blueimp-gallery"aria-label="play slideshow"aria-keyshortcuts="Space"aria-pressed="false"role="button"></a><olclass="indicator"></ol></div>
Please note that eacharia-controls attribute should have the same value astheid attribute of the Gallery widget.
Include the Gallery script at the bottom of the body of your webpage:
<scriptsrc="js/blueimp-gallery.min.js"></script>
Create a list of links to image files, optionally with enclosed thumbnails andadd them to the body of your webpage, before including the Gallery script:
<divid="links"><ahref="images/banana.jpg"title="Banana"><imgsrc="images/thumbnails/banana.jpg"alt="Banana"/></a><ahref="images/apple.jpg"title="Apple"><imgsrc="images/thumbnails/apple.jpg"alt="Apple"/></a><ahref="images/orange.jpg"title="Orange"><imgsrc="images/thumbnails/orange.jpg"alt="Orange"/></a></div>
Add the following JavaScript code after including the Gallery script, to displaythe images in the Gallery lightbox on click of one of those links:
<script>document.getElementById('links').onclick=function(event){event=event||window.eventvartarget=event.target||event.srcElementvarlink=target.src ?target.parentNode :targetvaroptions={index:link,event:event}varlinks=this.getElementsByTagName('a')blueimp.Gallery(links,options)}</script>
To initialize the Gallery with visible controls (previous slide, next slide,etc.), add the CSS classblueimp-gallery-controls to the Gallery widget:
<divid="blueimp-gallery"class="blueimp-gallery blueimp-gallery-controls"aria-label="image gallery"aria-modal="true"role="dialog"><!-- ... --></div>
Please also note that by default, a click on an image slide or any Gallerywidget element with thetoggle class will toggle the display of the Gallerycontrols.
To stretch smaller images to the dimensions of the Gallery container whilekeeping their aspect ratio, add the CSS classblueimp-gallery-contain to theGallery widget:
<divid="blueimp-gallery"class="blueimp-gallery blueimp-gallery-contain"aria-label="image gallery"aria-modal="true"role="dialog"><!-- ... --></div>
To display the images in an inline carousel instead of a lightbox, follow thelightbox setup and add the CSS classblueimp-gallery-carousel to the Gallery widget and remove the child elementwith theclose class, or add a new Gallery widget with a differentid toyour webpage:
<!-- The Gallery as inline carousel, can be positioned anywhere on the page --><divid="blueimp-gallery-carousel"class="blueimp-gallery blueimp-gallery-carousel"aria-label="image carousel"><divclass="slides"aria-live="off"></div><h3class="title"></h3><aclass="prev"aria-controls="blueimp-gallery-carousel"aria-label="previous slide"></a><aclass="next"aria-controls="blueimp-gallery-carousel"aria-label="next slide"></a><aclass="play-pause"aria-controls="blueimp-gallery-carousel"aria-label="play slideshow"aria-pressed="true"role="button"></a><olclass="indicator"></ol></div>
Add the following JavaScript code after including the Gallery script toinitialize the carousel:
<script>blueimp.Gallery(document.getElementById('links').getElementsByTagName('a'),{container:'#blueimp-gallery-carousel',carousel:true})</script>
The Gallery supports the concept ofresponsive imageswith thesrcset,sizes andsources object properties, e.g. using theAPI:
vargallery=blueimp.Gallery([{title:'Banana',href:'https://example.org/images/banana-1024w.jpg',srcset:'https://example.org/images/banana-800w.jpg 800w,'+'https://example.org/images/banana-1024w.jpg 1024w,'+'https://example.org/images/banana-1600w.jpg 1600w',sizes:'(min-width: 990px) 990px, 100vw',thumbnail:'https://example.org/images/banana-75.jpg'},{title:'Apple',href:'https://example.org/images/apple.png',sources:[{type:'image/svg+xml',srcset:'https://example.org/images/apple.svg'},{type:'image/webp',srcset:'https://example.org/images/apple.webp'}]}])
With link elements, those same properties can be defined viadata-srcset,data-sizes anddata-sources attributes:
<divid="links"><atitle="Banana"href="images/banana-1024w.jpg"data-srcset="images/banana-800w.jpg 800w, images/banana-1024w.jpg 1024w, images/banana-1600w.jpg 1600w"data-sizes="(min-width: 990px) 990px, 100vw"><imgsrc="images/banana-75.jpg"alt="Banana"/></a><atitle="Apple"href="images/apple.png"data-sources='[ { "type": "image/svg+xml", "srcset": "images/apple.svg" }, { "type": "image/webp", "srcset": "images/apple.webp" } ]'>Apple</a></div>
Please note thatdata-sources must be a validJSONstring listingthe sources array.
The Gallery can be controlled with the following keyboard shortcuts:
Enter: Toggle controls visibility.Escape: Close the Gallery lightbox.Space: Toggle the slideshow (play/pause).ArrowLeft: Move to the previous slide.ArrowRight: Move to the next slide.
Please note that setting thecarousel option totrue disables the keyboardshortcuts by default.
The following are the default options set by the core Gallery library:
varoptions={// 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 to add when the browser supports SVG as img (or background):svgasimgClass:'blueimp-gallery-svgasimg',// The class to add when the browser supports SMIL (animated SVGs):smilClass:'blueimp-gallery-smil',// The class for all slides:slideClass:'slide',// The slide class for the active (current index) slide:slideActiveClass:'slide-active',// The slide class for the previous (before current index) slide:slidePrevClass:'slide-prev',// The slide class for the next (after current index) slide:slideNextClass:'slide-next',// 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:srcsetProperty:'srcset',// The list object property (or data attribute) with the object sizes:sizesProperty:'sizes',// The list object property (or data attribute) with the object sources:sourcesProperty:'sources',// 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,// Toggle the controls on pressing the Enter key:toggleControlsOnEnter: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 the ArrowLeft and ArrowRight keys:enableKeyboardNavigation:true,// Close the gallery on pressing the Escape 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,// Close the gallery when the URL hash changes:closeOnHashChange: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 direction the slides are moving: ltr=LeftToRight or rtl=RightToLeftslideshowDirection:'ltr',// 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 duration between slide changes in milliseconds:transitionDuration:300,// The transition duration for automatic slide changes, set to an integer// greater 0 to override the default transition duration:slideshowTransitionDuration:500,// 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}
Event callbacks can be set as function properties of the options object passedto the Gallery initialization function:
vargallery=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.}})
If thecarousel option istrue, the following options are set to differentdefault values:
varcarouselOptions={hidePageScrollbars:false,toggleControlsOnEnter:false,toggleSlideshowOnSpace:false,enableKeyboardNavigation:false,closeOnEscape:false,closeOnSlideClick:false,closeOnSwipeUpOrDown:false,closeOnHashChange:false,disableScroll:false,startSlideshow:true}
The options object passed to the Gallery function extends the default optionsand also those options set viacarousel mode.
The following are the additional default options set for the slide positionindicator:
varindicatorOptions={// 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}
The following are the additional default options set for the fullscreen mode:
varfullscreenOptions={// Defines if the gallery should open in fullscreen mode:fullscreen:false}
The following are the additional default options set for the video factory:
varvideoFactoryOptions={// 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 class for video content displayed in an iframe:videoIframeClass:'video-iframe',// The class for the video cover element:videoCoverClass:'video-cover',// The class for the video play control:videoPlayClass:'video-play',// Play videos inline by default:videoPlaysInline:true,// The list object property (or data attribute) for video preload:videoPreloadProperty:'preload',// The list object property (or data attribute) for the video poster URL:videoPosterProperty:'poster'}
Options forYouTube videos:
varyouTubeOptions={// 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_parametersyouTubePlayerVars:undefined,// Require a click on the native YouTube player for the initial playback:youTubeClickToPlay:true}
Options forVimeo videos:
varvimeoOptions={// 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/embeddingvimeoPlayerUrl:'https://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}
The widgetcontainer,slidesContainer,titleElement andindicatorContainer options can be set asCSS selectororHTMLElement node, so the following are equivalent:
varoptions={container:'#blueimp-gallery'}
varoptions={container:document.getElementById('blueimp-gallery')}
CSS selectors are passed as argument toquerySelectorAll,which is supported by IE8+ and all modern web browsers and queried withgetElementByIdorgetElementsByTagNamein older browsers.
If the helper script is replaced withjQuery, thecontainer and element options can be any valid jQuery selector.
The options ending with "Property" define how the properties of each linkelement are accessed.
For example, theurlProperty is by default set tohref. This allows todefine link elements withhref ordata-href attributes:
<divid="links"><ahref="images/banana.jpg">Banana</a><adata-href="images/apple.jpg">Apple</a></div>
If the links are provided as JavaScript array, it is also possible to definenested property names, by using the native JavaScript accessor syntax for theproperty string:
blueimp.Gallery([{data:{urls:['https://example.org/images/banana.jpg']}},{data:{urls:['https://example.org/images/apple.jpg']}}],{urlProperty:'data.urls[0]'})
The blueimp Gallery can be initialized by simply calling it as a function withan array of links as first argument and an optional options object as secondargument:
vargallery=blueimp.Gallery(links,options)
The links array can be a list of URL strings or a list of objects with URLproperties:
vargallery=blueimp.Gallery(['https://example.org/images/banana.jpg','https://example.org/images/apple.jpg','https://example.org/images/orange.jpg'])
vargallery=blueimp.Gallery([{title:'Banana',type:'image/jpeg',href:'https://example.org/images/banana.jpg',thumbnail:'https://example.org/thumbnails/banana.jpg'},{title:'Apple',type:'image/jpeg',href:'https://example.org/images/apple.jpg',thumbnail:'https://example.org/thumbnails/apple.jpg'}])
The URL property name defined by each list object can be configured via theurlProperty option. By default, it is set tohref, which allows to pass alist of HTML link elements as first argument.
For images, thethumbnail property defines the URL of the image thumbnail,which is used for the indicator navigation displayed at the bottom of theGallery, if the controls are visible.
The object returned by executing the Gallery function (thegallery variable inthe example code above) is a new instance of the Gallery and allows to accessthe publicAPI methods provided by the Gallery.
The Gallery initialization function returnsfalse if the given list was empty,the Gallery widget is missing, or the browser doesn't pass the functionalitytest.
The Gallery object returned by executing the Gallery function provides thefollowing public API methods:
// Return the current slide index position:varpos=gallery.getIndex()// Return the total number of slides:varcount=gallery.getNumber()// Move to the previous slide:gallery.prev()// Move to the next slide:gallery.next()// Move to a slide index with the (optional) duration in milliseconds:gallery.slide(index,duration)// Start an automatic slideshow with the (optional) interval in milliseconds: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()
The Gallery can be initialized with a list of videos instead of images, or acombination of both:
blueimp.Gallery([{title:'Fruits',type:'video/mp4',href:'https://example.org/videos/fruits.mp4',poster:'https://example.org/images/fruits.jpg'},{title:'Banana',type:'image/jpeg',href:'https://example.org/images/banana.jpg',thumbnail:'https://example.org/thumbnails/banana.jpg'}])
The Gallery uses thetype property to determine the content type of the objectto display.
If the type property is empty or doesn't exist, the default typeimage isassumed.
Objects with a video type will be displayed in aHTML5 video elementif the browser supports the video content type.
For videos, theposter property defines the URL of the poster image todisplay, before the video is started.
To start video playback, you can either click on the video play icon or on thevideo slide itself.
Starting the video playback enables the native HTML5 videocontrols.
To toggle the Gallery controls (previous slide, next slide, etc.) instead ofstarting video playback on click of a video slide, add thetoggle class to thevideo cover element using thevideoCoverClass Gallery option:
blueimp.Gallery([{title:'Fruits',type:'video/mp4',href:'https://example.org/videos/fruits.mp4',poster:'https://example.org/images/fruits.jpg'}],{videoCoverClass:'video-cover toggle'})
You can set thepreload property of a Gallery video object to a valid valuedefined by the HTML5 videopreloadattribute:
none: Indicates that the video should not be preloaded.metadata: Indicates that only video metadata (e.g. length) is fetched.auto: Indicates that the whole video file can be preloaded.
blueimp.Gallery([{title:'Fruits',type:'video/mp4',href:'https://example.org/videos/fruits.mp4',preload:'auto'}])
By default,preload is set tonone to save on network bandwidth consumption.
By default, videos are displayed with the HTML5 videoplaysinlineattribute set, which indicates that the video is to be played inline.
To disable this behavior, you can set the Gallery optionvideoPlaysInline tofalse:
blueimp.Gallery([{title:'Fruits',type:'video/mp4',href:'https://example.org/videos/fruits.mp4',poster:'https://example.org/images/fruits.jpg'}],{videoPlaysInline:false})
Please note that this attribute only has an effect on some mobile browsers, e.g.Safari on iOS 10 and later.
However, all browsers provide video controls to switch between fullscreen andinline mode on user request.
To provide multiple video formats, thesources property of a list object canbe set to an array of objects withtype andsrc properties for each videosource. The first video format in the list that the browser can play will bedisplayed:
blueimp.Gallery([{title:'Fruits',type:'video',sources:[{type:'video/mp4',src:'https://example.org/videos/fruits.mp4'},{type:'video/ogg',src:'https://example.org/videos/fruits.ogv'}],poster:'https://example.org/images/fruits.jpg'}])
It is also possible to define the video sources asdata-sources attribute as aJSONstring listingthe sources array:
<divid="links"><atitle="Fruits"type="video/mp4"href="https://example.org/videos/fruits.mp4"data-sources='[ { "type": "video/mp4", "src": "videos/fruits.mp4" }, { "type": "video/ogg", "src": "videos/fruits.ogv" } ]'data-poster="https://example.org/images/fruits.jpg">Fruits</a></div>
The Gallery can displayYouTube videos for Galleryitems with atype oftext/html and ayoutube property (configurable viaYouTube options) with the YouTube video-ID:
blueimp.Gallery([{title:'A YouYube video',type:'text/html',href:'https://www.youtube.com/watch?v=VIDEO_ID',youtube:'VIDEO_ID',poster:'https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg'}])
If thehref andposter properties are undefined, they are set automaticallybased on the video ID.
Please note that the Gallery YouTube integration requires a browser withpostMessagesupport, which excludes IE7.
The Gallery can displayVimeo videos for Gallery itemswith atype oftext/html and avimeo property (configurable viaVimeo options) with the Vimeo video-ID:
blueimp.Gallery([{title:'A Vimeo video',type:'text/html',href:'https://vimeo.com/VIDEO_ID',vimeo:'VIDEO_ID',poster:'https://secure-b.vimeocdn.com/ts/POSTER_ID.jpg'}])
If thehref property is undefined, it is set automatically based on the videoID.
Please note that the Gallery Vimeo integration requires a browser withpostMessagesupport, which excludes IE7.
It is possible to add additional elements to the Gallery widget, e.g. adescription label.
First, add the desired HTML element to the Gallery widget:
<divid="blueimp-gallery"class="blueimp-gallery"aria-label="image gallery"aria-modal="true"role="dialog"><divclass="slides"aria-live="polite"></div><h3class="title"></h3><!-- The placeholder for the description label: --><pclass="description"></p><aclass="prev"aria-controls="blueimp-gallery"aria-label="previous slide"aria-keyshortcuts="ArrowLeft"></a><aclass="next"aria-controls="blueimp-gallery"aria-label="next slide"aria-keyshortcuts="ArrowRight"></a><aclass="close"aria-controls="blueimp-gallery"aria-label="close"aria-keyshortcuts="Escape"></a><aclass="play-pause"aria-controls="blueimp-gallery"aria-label="play slideshow"aria-keyshortcuts="Space"aria-pressed="false"role="button"></a><olclass="indicator"></ol></div>
Next, add the desired element styles to your CSS file:
.blueimp-gallery> .description {position: absolute;top:30px;left:15px;color:#fff;display: none;}.blueimp-gallery-controls> .description {display: block;}
Then, add the additional element information to each of your links:
<divid="links"><ahref="images/banana.jpg"title="Banana"data-description="This is a banana.">Banana</a><ahref="images/apple.jpg"title="Apple"data-description="This is an apple.">Apple</a></div>
Finally, initialize the Gallery with anonslide callback option, to set theelement content based on the information from the current link:
blueimp.Gallery(document.getElementById('links'),{onslide:function(index,slide){vartext=this.list[index].getAttribute('data-description'),node=this.container.find('.description')node.empty()if(text){node[0].appendChild(document.createTextNode(text))}}})
By extending the Gallery prototype with new factory methods, additional contenttypes can be displayed. By default, blueimp Gallery provides theimageFactoryandvideoFactory methods forimage andvideo content types respectively.
The Gallery uses thetype property of each content object to determine whichfactory method to use. Thetype defines theInternet media type of thecontent object and is composed of two or more parts: A type, a subtype, and zeroor more optional parameters, e.g.text/html; charset=UTF-8 for an HTMLdocument with UTF-8 encoding.
The main type (the string in front of the slash,text in the example above) isconcatenated with the stringFactory to create the factory method name, e.g.textFactory.
Please note that the textFactory script has to be included after the coreGallery script, but before including theYouTube andVimeointegration plugins, which extend the textFactory implementation to handleYouTube and Vimeo video links.
Please also note that although blueimp Gallery doesn't requirejQuery, the following example uses it for convenience.
Extend the Gallery prototype with thetextFactory method:
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]}
Next, add thetext-content class to the Gallery CSS:
.blueimp-gallery> .slides> .slide> .text-content {overflow: auto;margin:60px auto;padding:060px;max-width:920px;text-align: left;}
With the previous changes in place, the Gallery can now handle HTML contenttypes:
blueimp.Gallery([{title:'Noodle soup',type:'text/html',href:'https://example.org/text/noodle-soup.html'},{title:'Tomato salad',type:'text/html',href:'https://example.org/text/tomato-salad.html'}])
The blueimp Gallery jQuery plugin registers a global click handler to open linkswithdata-gallery attribute in the Gallery lightbox.
To use it, follow thelightbox setup guide, but replace theminified Gallery script with the jQuery plugin version and include it afterincludingjQuery:
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"crossorigin="anonymous"></script><scriptsrc="js/jquery.blueimp-gallery.min.js"></script>
Next, add the attributedata-gallery to your Gallery links:
<divid="links"><ahref="images/banana.jpg"title="Banana"data-gallery><imgsrc="images/thumbnails/banana.jpg"alt="Banana"/></a><ahref="images/apple.jpg"title="Apple"data-gallery><imgsrc="images/thumbnails/apple.jpg"alt="Apple"/></a><ahref="images/orange.jpg"title="Orange"data-gallery><imgsrc="images/thumbnails/orange.jpg"alt="Orange"/></a></div>
Theonclick handler from thelightbox setup guide is notrequired and can be removed.
Options for the Gallery lightbox opened via the jQuery plugin can be defined asHTML5 data-attributes on the Gallerywidget container.
The jQuery plugin also introduces the additionalfilter option, which isapplied to the Gallery links viajQuery's filter method and allows to removeduplicates from the list:
<divid="blueimp-gallery"class="blueimp-gallery"aria-label="image gallery"aria-modal="true"role="dialog"data-start-slideshow="true"data-filter=":even"><divclass="slides"aria-live="off"></div><h3class="title"></h3><aclass="prev"aria-controls="blueimp-gallery"aria-label="previous slide"aria-keyshortcuts="ArrowLeft"></a><aclass="next"aria-controls="blueimp-gallery"aria-label="next slide"aria-keyshortcuts="ArrowRight"></a><aclass="close"aria-controls="blueimp-gallery"aria-label="close"aria-keyshortcuts="Escape"></a><aclass="play-pause"aria-controls="blueimp-gallery"aria-label="play slideshow"aria-keyshortcuts="Space"aria-pressed="true"role="button"></a><olclass="indicator"></ol></div>
This will initialize the Gallery with the optionstartSlideshow set totrue.
It will also filter the Gallery links so that only links with an even indexnumber will be included.
If thedata-gallery attribute value is a valid id string (e.g."#blueimp-gallery"), it is used as container option.
Settingdata-gallery to a non-empty string also allows to group links intodifferent sets of Gallery images:
<divid="fruits"><ahref="images/banana.jpg"title="Banana"data-gallery="#blueimp-gallery-fruits"><imgsrc="images/thumbnails/banana.jpg"alt="Banana"/></a><ahref="images/apple.jpg"title="Apple"data-gallery="#blueimp-gallery-fruits"><imgsrc="images/thumbnails/apple.jpg"alt="Apple"/></a></div><divid="vegetables"><ahref="images/tomato.jpg"title="Tomato"data-gallery="#blueimp-gallery-vegetables"><imgsrc="images/thumbnails/tomato.jpg"alt="Tomato"/></a><ahref="images/onion.jpg"title="Onion"data-gallery="#blueimp-gallery-vegetables"><imgsrc="images/thumbnails/onion.jpg"alt="Onion"/></a></div>
This will open the links with thedata-gallery attribute#blueimp-gallery-fruits in the Gallery widget with the idblueimp-gallery-fruits, and the links with thedata-gallery attribute#blueimp-gallery-vegetables in the Gallery widget with the idblueimp-gallery-vegetables.
The gallery object is stored viajQuery data storageon the Gallery widget when the Gallery is opened and can be retrieved thefollowing way:
vargallery=$('#blueimp-gallery').data('gallery')
This gallery object provides all methods outlined in the API methods section.
The jQuery plugin triggers Gallery events on the widget container, with eventnames equivalent to the galleryevent callbacks:
$('#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 doesn't require any other libraries and can be used standalonewithout any dependencies.
You can also use the individual source files instead of the standalone minifiedversion:
<linkrel="stylesheet"href="css/blueimp-gallery.css"/><linkrel="stylesheet"href="css/blueimp-gallery-indicator.css"/><linkrel="stylesheet"href="css/blueimp-gallery-video.css"/><!-- ... --><scriptsrc="js/blueimp-helper.js"></script><scriptsrc="js/blueimp-gallery.js"></script><scriptsrc="js/blueimp-gallery-fullscreen.js"></script><scriptsrc="js/blueimp-gallery-indicator.js"></script><scriptsrc="js/blueimp-gallery-video.js"></script><scriptsrc="js/blueimp-gallery-youtube.js"></script><scriptsrc="js/blueimp-gallery-vimeo.js"></script>
The helper script can be replaced byjQuery v. 1.7+.
The fullscreen, indicator, video, YouTube and Vimeo source files are optional iftheir functionality is not required.
ThejQuery plugin requiresjQuery v.1.7+ and the basic Gallery script, while the fullscreen, indicator, video,YouTube and Vimeo source files are also optional:
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"crossorigin="anonymous"></script><scriptsrc="js/blueimp-gallery.js"></script><scriptsrc="js/blueimp-gallery-fullscreen.js"></script><scriptsrc="js/blueimp-gallery-indicator.js"></script><scriptsrc="js/blueimp-gallery-video.js"></script><scriptsrc="js/blueimp-gallery-youtube.js"></script><scriptsrc="js/blueimp-gallery-vimeo.js"></script><scriptsrc="js/jquery.blueimp-gallery.js"></script>
Please note that the jQuery plugin is an optional extension and not required forthe Gallery functionality.
blueimp Gallery has been tested with and supports the following browsers:
- Chrome 14.0+
- Safari 4.0+
- Firefox 4.0+
- Opera 10.0+
- Mobile Safari 6.0+
- Mobile Chrome 30.0+
- Default Browser on Android 2.3+
- Opera Mobile 12.0+
- Edge 74+
- Edge Legacy 41.0+
- Internet Explorer 7.0+
Released under theMIT license.
The swipe implementation is based on code from theSwipe library.
About
blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading.