jQuery image gallery plugin with zoom, download, fullscreen and slideshow feature

by

In this post I am going to share awesome jQuery Image gallery plugin with zoom, download, fullscreen and slideshow feature. This plugin is fully loaded with all the required features like social media share, zoomin zoomout, image download etc.

jQuery image gallery plugin
Features

  • Modal-style fullscreen image viewer/gallery with image captions and counter.
  • Image loading spinner.
  • Progressive image lazy loading.
  • Auto switches between images with a progress bar.
  • Also allows you to switches between images with mouse wheel, mouse drag and touch events.
  • Bottom thumbnail navigation.
  • Share images on social networks: Twitter, Pinterest, Google Plus.
  • Supports image zooming and panning.
  • Provides a download button to save the image to the local.



Integrate jQuery Image Gallery Plugin

Libraries

Include all the required libraries along with jQuery library.

HTML

Create a list of thumbnails (small version of images) on the webpage and specify the destination of large version of your images in the using data-src attribute. You need to provide several additional source images in the data-responsive attribute to load appropriate images based on the screen size. you can also use data-sub-html attribute to define your own HTML caption for each image.



JS

Finally call the plugin and see the action.

Use following options to customize image gallery.

$('#lightgallery').lightGallery({
  mode: "lg-slide",
  cssEasing: "ease",
  easing: "linear",
  speed: 600,
  height: "100%",
  width: "100%",
  addClass: "",
  startClass: "lg-start-zoom",
  backdropDuration: 150,
  hideBarsDelay: 6000,
  useLeft: false,
  closable: true,
  loop: true,
  escKey: true,
  keyPress: true,
  controls: true,
  slideEndAnimatoin: true,
  hideControlOnEnd: false,
  mousewheel: true,
  getCaptionFromTitleOrAlt: true,
  appendSubHtmlTo: ".lg-sub-html",
  subHtmlSelectorRelative: false,
  preload: 1,
  showAfterLoad: true,
  selector: "",
  selectWithin: "",
  nextHtml: "",
  prevHtml: "",
  index: false,
  iframeMaxWidth: "100%",
  download: true,
  counter: true,
  appendCounterTo: ".lg-toolbar",
  swipeThreshold: 50,
  enableSwipe: true,
  enableDrag: true,
  dynamic: false,
  dynamicEl: [],
  galleryId: 1
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Published by Rohit