Responsive Fullscreen Photo Gallery - jQuery Simple Scroll Gallery

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.

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' }
  
});

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

  • Publication date: 05.09.2018
  • Source