blueimp Gallery

var gallery = 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'
      }
    ]
  }
])

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 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=RightToLeft
  slideshowDirection: '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
}

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.
  }
})

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

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

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
}

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:
    '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
}

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

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

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

var gallery = blueimp.Gallery(links, options)

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

// 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 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()

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

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

blueimp.Gallery([
  {
    title: 'Fruits',
    type: 'video/mp4',
    href: 'https://example.org/videos/fruits.mp4',
    preload: 'auto'
  }
])

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

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

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

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

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.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]
}

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

var gallery = $('#blueimp-gallery').data('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
  })