photoswipe vs viewerjs vs magnific-popup vs lightbox2 vs glightbox vs lightgallery.js

Package	Downloads	Stars	Size	Issues	Publish	License

photoswipe	330,114	24,932	1.21 MB	638	a year ago	MIT
viewerjs	96,219	8,152	504 kB	35	a year ago	MIT
magnific-popup	86,173	11,374	1.05 MB	675	a year ago	MIT
lightbox2	39,081	6,377	657 kB	70	a year ago	-
glightbox	36,999	2,350	401 kB	44	10 months ago	MIT
lightgallery.js	10,833	5,327	611 kB	3	-	GPLv3

Package

Downloads

Stars

Size

Issues

Publish

License

photoswipe

330,114

24,932

1.21 MB

638

a year ago

MIT

viewerjs

96,219

8,152

504 kB

a year ago

MIT

magnific-popup

86,173

11,374

1.05 MB

675

a year ago

MIT

lightbox2

39,081

6,377

657 kB

a year ago

glightbox

36,999

2,350

401 kB

10 months ago

MIT

lightgallery.js

10,833

5,327

611 kB

GPLv3

Size and Performance

photoswipe:
photoswipe is relatively lightweight (about 15KB minified) for a feature-rich lightbox, but its emphasis on high-quality image handling and zooming may require additional resources for large galleries.
viewerjs:
viewerjs is a lightweight library (approximately 10KB minified) that provides efficient image viewing with minimal impact on page load times, making it suitable for performance-sensitive applications.
magnific-popup:
magnific-popup is lightweight (around 8KB minified) and designed for fast performance. Its focus on simplicity and efficiency makes it a great choice for projects that prioritize speed.
lightbox2:
lightbox2 is also lightweight (approximately 5KB minified), ensuring quick loading times. Its simplicity contributes to low resource consumption, making it ideal for small to medium-sized projects.
glightbox:
glightbox is lightweight (around 10KB minified) and optimized for performance, making it suitable for modern web applications where load time and resource usage are critical.
lightgallery.js:
lightgallery.js is larger than some alternatives (about 30KB minified) due to its feature-rich nature. However, it is modular, allowing developers to include only the components they need, which helps manage performance.

Customization

photoswipe:
photoswipe is designed for customization, with a focus on providing a flexible API and structure that allows developers to easily modify the lightbox’s appearance and behavior, including custom animations, controls, and layouts.
viewerjs:
viewerjs allows for some customization, particularly in terms of styling the viewer and configuring options like zoom levels, rotation, and fullscreen behavior. However, it is more limited compared to some other libraries in terms of extensibility.
magnific-popup:
magnific-popup provides a high level of customization, allowing developers to change almost every aspect of the lightbox, from animations and transitions to button styles and content types, all while keeping the code clean and manageable.
lightbox2:
lightbox2 allows for basic customization, such as changing the overlay color, image captions, and navigation buttons. It is easy to modify the styles with CSS, but it does not provide a wide range of configurable options out of the box.
glightbox:
glightbox offers extensive customization options, including the ability to style the lightbox using CSS, customize animations, and add your own content (like captions and buttons) through its API.
lightgallery.js:
lightgallery.js is highly customizable, with a modular architecture that allows developers to enable or disable features as needed. It supports custom themes, CSS styling, and has a rich API for programmatic control.

Gallery Support

photoswipe:
photoswipe is designed primarily for image galleries, offering a smooth and responsive experience with touch support. It excels in handling large images and provides a zoom feature, but it is less focused on video or inline content.
viewerjs:
viewerjs is primarily focused on image viewing and provides basic support for galleries by allowing users to navigate through a set of images. However, it does not support video or advanced gallery features.
magnific-popup:
magnific-popup supports image and video galleries, allowing for smooth transitions between multiple items. It also supports inline content and AJAX, making it versatile for different types of galleries.
lightbox2:
lightbox2 supports basic image galleries by grouping multiple images within the same link. It provides simple navigation between images, but it lacks advanced features like video support or dynamic content.
glightbox:
glightbox supports image and video galleries, allowing users to navigate through multiple items seamlessly. It also supports grouping items for a more organized gallery experience.
lightgallery.js:
lightgallery.js offers robust support for image and video galleries, including features like lazy loading, thumbnail navigation, and social sharing. It is highly versatile and supports various content types, making it suitable for complex galleries.

Accessibility

photoswipe:
photoswipe is designed with accessibility in mind, featuring keyboard navigation, ARIA roles, and support for screen readers. It is one of the more accessible lightbox options available, but like all tools, it benefits from additional testing and refinement.
viewerjs:
viewerjs includes basic accessibility features such as keyboard navigation and support for screen readers, but it may not be as fully featured in terms of accessibility as some other libraries.
magnific-popup:
magnific-popup provides basic accessibility features, including keyboard navigation and ARIA attributes. However, developers may need to implement additional accessibility features to ensure full compliance.
lightbox2:
lightbox2 includes basic accessibility features such as keyboard navigation and ARIA roles, but it may require additional enhancements to fully meet modern accessibility standards.
glightbox:
glightbox is designed with accessibility in mind, providing keyboard navigation, ARIA attributes, and support for screen readers, making it a good choice for inclusive web applications.
lightgallery.js:
lightgallery.js is built with accessibility in mind, offering keyboard navigation, ARIA support, and customizable focus management, making it a good choice for accessible web applications.

Ease of Use: Code Examples

photoswipe:

Simple usage of photoswipe

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
  <figure itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
    <a href="large-image.jpg" itemprop="contentUrl" data-size="1024x768">
      <img src="thumbnail.jpg" itemprop="thumbnail" alt="Image description" />
    </a>
    <figcaption itemprop="caption description">Image caption</figcaption>
  </figure>
</div>

viewerjs:

Simple usage of viewerjs

<link rel="stylesheet" href="https://unpkg.com/viewerjs/dist/viewer.css" />
<script src="https://unpkg.com/viewerjs/dist/viewer.js"></script>
<div id="image-viewer">
  <img src="image.jpg" alt="Image" />
</div>
<script>
  const viewer = new Viewer(document.getElementById('image-viewer'));
</script>

magnific-popup:

Simple usage of magnific-popup

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<a href="image.jpg" class="popup-image"> <img src="thumbnail.jpg" alt="Image" /> </a>
<script>
  $(document).ready(function () {
    $('.popup-image').magnificPopup({
      type: 'image',
      gallery: { enabled: true },
    });
  });
</script>

lightbox2:

Simple usage of lightbox2

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
<a href="image.jpg" data-lightbox="gallery" data-title="My Image"> <img src="thumbnail.jpg" alt="My Image" /> </a>

glightbox:

Simple usage of glightbox

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
<div class="glightbox" data-glightbox="title: My Image; description: This is an image; video: https://www.youtube.com/watch?v=dQw4w9WgXcQ">
  <img src="image.jpg" alt="My Image" />
</div>
<script>
  const lightbox = GLightbox();
</script>

lightgallery.js:

Simple usage of lightgallery.js

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery.js/dist/css/lightgallery.css" />
<script src="https://cdn.jsdelivr.net/npm/lightgallery.js/dist/lightgallery.min.js"></script>
<div id="lightgallery">
  <a href="image1.jpg" data-lg-size="1024-768" data-lg-title="Image 1">
    <img src="thumbnail1.jpg" />
  </a>
  <a href="image2.jpg" data-lg-size="1024-768" data-lg-title="Image 2">
    <img src="thumbnail2.jpg" />
  </a>
</div>
<script>
  lightGallery(document.getElementById('lightgallery'));
</script>

Size and Performance

Customization

Gallery Support

Accessibility

Ease of Use: Code Examples

Repo structure

Older versions