Multifunctional Image Gallery Plugin For Mobile & Desktop - Galleria

Galleria is a robust, customizable, responsive and mobile-friendly jQuery image gallery plugin designed for both desktop and mobile.

Key features:

• Full responsive.
• Smart image delivery depending on screen size.
• Image loader.
• Allows for external data sources such as: Flickr (Demo), Picasa(Demo), Youtube/Vimeo videos, etc.
• Touch swipe events are supported.
• Thumbnail carousel.
• Autoplay.
• Fullscreen & popout mode.
• Fully extendable to add your own themes.

Basic usage:

1. Import the latest version of jQuery library and the jQuery Galleria plugin's script into the webpage.

<script src="jquery.js"></script>
<script src="galleria.min.js"></script>

2. Add your own web content to the gallery.

<div id="galleria">
  <a href="1.jpg">
    <img 
      src="thumb-1.jpg",
      data-big="thumb-big-1.jpg"
      data-title="Title 1"
      data-description="Description 1"
    >
  </a>
  <a href="2.jpg">
    <img 
      src="thumb-2.jpg",
      data-big="thumb-big-2.jpg"
      data-title="Title 2"
      data-description="Description 2"
    >
  </a>
  <a href="1.jpg">
    <img 
      src="thumb-3.jpg",
      data-big="thumb-big-3.jpg"
      data-title="Title 3"
      data-description="Description 3"
    >
  </a>
  ...
</div>

3. Load the classic theme.

Galleria.loadTheme('galleria.classic.min.js');

4. Initialize the gallery and done.

Galleria.configure({
  autoplay: false,
  carousel: true,
  carouselFollow: true,
  carouselSpeed: 400,
  carouselSteps: 'auto',
  clicknext: false,
  dailymotion: {
      foreground: '%23EEEEEE',
      highlight: '%235BCEC5',
      background: '%23222222',
      logo: 0,
      hideInfos: 1
  },
  dataConfig : function( elem ) { return {}; },
  dataSelector: 'img',
  dataSort: false,
  dataSource: this._target,
  debug: undef,
  dummy: undef, 
  easing: 'galleria', // galleria, galleriaIn and galleriaOut
  extend: function(options) {},
  fullscreenCrop: undef,
  fullscreenDoubleTap: true, 
  fullscreenTransition: undef,
  height: 0,
  idleMode: true, 
  idleTime: 3000,
  idleSpeed: 200,
  imageCrop: false,
  imageMargin: 0,
  imagePan: false,
  imagePanSmoothness: 12,
  imagePosition: '50%',
  imageTimeout: undef, 
  initialTransition: undef, 
  keepSource: false,
  layerFollow: true, 
  lightbox: false, 
  lightboxFadeSpeed: 200,
  lightboxTransitionSpeed: 200,
  linkSourceImages: true,
  maxScaleRatio: undef,
  maxVideoSize: undef, 
  minScaleRatio: undef,
  overlayOpacity: 0.85,
  overlayBackground: '#0b0b0b',
  pauseOnInteraction: true,
  popupLinks: false,
  preload: 2,
  queue: true,
  responsive: true,
  show: 0,
  showInfo: true,
  showCounter: true,
  showImagenav: true,
  swipe: 'auto', // or 'disabled', 'enforced'
  theme: null,
  thumbCrop: true,
  thumbEventType: 'click:fast',
  thumbMargin: 0,
  thumbQuality: 'auto',
  thumbDisplayOrder: true,
  thumbPosition: '50%',
  thumbnails: true,
  touchTransition: undef, 
  transition: 'fade', // or 'flash', 'pulse', 'slide', 'fadeslide'
  transitionSpeed: 400,
  trueFullscreen: true,
  useCanvas: false,
  variation: '', 
  videoPoster: true, 
  vimeo: {
      title: 0,
      byline: 0,
      portrait: 0,
      color: 'aaaaaa'
  },
  wait: 5000, // 1.2.7
  width: 'auto',
  youtube: {
      modestbranding: 1,
      autohide: 1,
      color: 'white',
      hd: 1,
      rel: 0,
      showinfo: 0
  }
});

---

This awesome jQuery plugin is developed by galleria.io. For more Advanced Usages, please check the demo page or visit the official website.