Responsive Filterable Gallery With Pagination – PAG JS

PAG JS (Prismatic Animated Gallery) is a lightweight JavaScript library for creating responsive, animated, filterable, and paginated galleries on websites. Ideal for showcasing portfolios, product catalogs, or blog posts.

You can customize the number of columns displayed based on screen size (mobile, desktop, tablet), choose from several animation styles (fade, zoom, slide, smart), set the number of items per page, and even create custom filters using HTML data attributes.

How to use it:

1. Download the zip and include the minified JavaScript file on your page.

<script src="/dist/pag-js.min.js"></script>

2. Create the gallery structure within a container element and use the data-categories attribute to categorize each item for filtering.

<div class="pag-gallery">
  <div class="item" data-categories="1">
    <figure>
      <img src="1.jpg" alt="Image 1">
      <figcaption>Image 1</figcaption>
    </figure>
  </div>
  <div class="item" data-categories="2">
    <figure>
      <img src="2.jpg" alt="Image 2">
      <figcaption>Image 2</figcaption>
    </figure>
  </div>
  ... more image here ...
</div>

3. Set up custom filters to allow users to filter items. The data-filter attribute value should match the data-categories values.

<div class="filters">
  <button data-filter="all">ALL</button>
  <button data-filter="1">FILTER 1</button>
  <button data-filter="2">FILTER 2</button>
  ...
</div>

4. Create a container for the pagination controls.

<div class="pagination"></div>

5. Create a new PagJS instance to initialize the gallery.

document.addEventListener("DOMContentLoaded", (event) => {
  const gallery = new PagJS({
    // options here
  });
});

6. All available options to customize the gallery.

• containerClass: This specifies the CSS class for the main gallery container.
• itemContainerClass: This defines the class for individual gallery items.
• paginationClass: Use this to set the class for pagination controls.
• filtersClass: This option sets the class for filter buttons.
• aspectRatio: This controls the aspect ratio of gallery items.
• gap: This sets the space between gallery items in pixels.
• itemsPerPage: This determines how many items appear on each page. Set it to 0 to disable pagination.
• columns: This object defines the number of columns for different screen sizes.
• objectFit: This controls how images fit within their containers. Options include ‘cover’, ‘contain’, ‘fill’, ‘scale-down’, or ‘none’.
• animation: This sets the type of animation for transitions. Choices are ‘none’, ‘fade’, ‘zoom’, ‘slide’, or ‘smart’.
• animationDuration: This sets how long animations last in seconds.
• easing: This determines the speed curve of animations. It accepts any CSS easing value like ‘linear’, ‘ease-in-out’, or custom cubic-bezier functions.
• animationAsync: When set to true, hiding and showing animations start at the same time. When false, showing animations begin after hiding animations finish.
• defaultFilter: This sets which filter is active when the gallery loads.

const gallery = new PagJS({
  containerClass: '.gallery',
  itemContainerClass: '.item',
  paginationClass: '.pagination', 
  filtersClass: '.filters',
  aspectRatio: '3 / 2',
  gap: 10, 
  itemsPerPage: 0,
  columns: { 
    HD: 4,
    DESKTOP: 3,
    TABLET: 2,
    SMARTPHONE: 1
  },
  objectFit: 'cover',
  animation: 'smart',
  animationDuration: 0.5,
  easing: 'linear',
  animationAsync: true, 
  defaultFilter: 'all' 
});