Responsive Fullscreen Photo Gallery - jQuery Simple Scroll Gallery

Simple Scroll Gallery is a lightweight, flexible, responsive, interactive jQuery Photo Gallery plugin created for desktop, tablet, and mobile.

Clicking the thumbnail & link will display all the images in a fullscreen vertical slider where the users are able to navigate through images with mousewheel, arrow keys and touch swipe events.

How to use it:

1. Insert the latest version of jQuery library and the Simple Scroll Gallery plugin's files into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous">
</script>
<link rel="stylesheet" href="ssg.css" type="text/css">
<script src="ssg.js"></script>

2. Wrap the images & links into a gallery container.

<section class="gallery">

  <a href='large.jpg'>
    <img src="thumb.jpg" alt="Image 1">
  </a>

  <a href='large.jpg'>
    <img src="thumb.jpg" alt="Image 1">
  </a>

  <a href='large.jpg'>
    <img src="thumb.jpg" alt="Image 1">
  </a>

  <a href='large.jpg'>Link is supported as well</a>

  ...
  
</section>

3. That's it. To make the gallery fullscreen, just add the CSS class 'fs' to the container element:

<section class="fs gallery">

  <a href='large.jpg'>
    <img src="thumb.jpg" alt="Image 1">
  </a>

  <a href='large.jpg'>
    <img src="thumb.jpg" alt="Image 1">
  </a>

  <a href='large.jpg'>
    <img src="thumb.jpg" alt="Image 1">
  </a>

  <a class="fs" href='large.jpg'>Link is supported as well</a>

  ...

</section>

4. You can also launch the gallery manually by calling a function:

SSG.run();

5. And then pass the optional settings as displayed below:

SSG.run({

  // fullscreen or not
  fs: false, 

  // image object
  img: { href: 'url', alt: 'some text' }
  
});

Changelog:

2018-11-08

• no exit mode, a minimal crash course, new text style, info update

2018-11-01

• Bugfixes

2018-10-19

• Tuning of CSS (iPhoneX, responsiveness), SVG icons, UX, sample update

2018-09-27

• bug fixes, scrollbar in FF & Edge, sample update, better arrow & cursor

2018-09-26

• Bugfix

2018-09-22

• some fixes, not white scrollbar in FF and Edge, info update

---

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