Fullscreen Image Gallery Popup With jQuery - fs-gal

fs-gal is a small jQuery script used to display a group of images in a responsive, fullscreen, gallery-style modal popup with navigation capability. Free for both personal and commercial use.

How to use it:

1. Place the fs-gal's style sheet in the head section of your html document.

<link rel="stylesheet" href="css/fs-gal.css">

2. Create objects with class fs-gal and include the data-attribute data-url with the relative or absolute path which is to be displayed.

<img class="fs-gal"  
     alt="Example Image 1" 
     src="example1.jpg"
     data-url="example1.jpg">

<img class="fs-gal"  
     alt="Example Image 2" 
     src="example2.jpg"
     data-url="example2.jpg">

<img class="fs-gal"  
     alt="Example Image 3" 
     src="example3.jpg"
     data-url="example3.jpg">

<img class="fs-gal"  
     alt="Example Image 4" 
     src="example4.jpg"
     data-url="example4.jpg">

3. Create the html for the full screen gallery popup.

<div class="fs-gal-view">
  <h1></h1>
  <img class="fs-gal-prev fs-gal-nav" src="img/prev.svg" alt="Previous picture" title="Previous picture" />
  <img class="fs-gal-next fs-gal-nav" src="img/next.svg" alt="Next picture" title="Next picture" />
  <img class="fs-gal-close" src="img/close.svg" alt="Close gallery" title="Close gallery" />
  <img class="fs-gal-main" src="" alt="">
</div>

4. Place jQuery library and the fs-gal's script at the end of the document. Done.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/fs-gal.js"></script>

Changelog:

2019-01-13

• Fix bug when fs-gal gallery is empty or non-existent

2018-12-24

• Swipe fix, removed jQuery mobile, updated demo

2018-05-03

• preload next and previous image + use img tag instead of background img

2018-04-28

• Added swipe support

---

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