Fullscreen Image Gallery Popup With jQuery - fs-gal

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.

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" 
<img class="fs-gal"  
     alt="Example Image 2" 
<img class="fs-gal"  
     alt="Example Image 3" 
<img class="fs-gal"  
     alt="Example Image 4" 

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

<div class="fs-gal-view">
  <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" />

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>

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

  • Publication date: 12.11.2017
  • Source