Simple Scroll Gallery Enter the gallery

Simple Scroll Gallery

Javascript gallery created by Roman Flössler

I've made Simple Scroll Gallery for my Wordpress blog about photography. I wanted a minimalist gallery which works similarly like a presentation. A user only needs to scroll down and sees image by image.

Try sample Simple Scroll Gallery

Download Simple Scroll Gallery from GitHub

Main features

License

You can use SSG freely under Mozilla Public License 2.0. There is one excep­tion added in the license. It is not granted to develop a Wordpress plugin based on SSG. I am planning to do it.

SSG is easy to implement

Simple Scroll Gallery is easy to implement on your website, it searches for images automatically. You just need to add two lines of code somewhere before </body> tag:

<link rel="stylesheet" href="ssg.css" type="text/css">
<script src="ssg.js"> </script>

SSG requires jQuery library at least in version 1.5. Place jQuery code inside the <head> section (Wordpress already includes jQuery):

<script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script>

Sample HTML5 code and re-styling the gallery:

Simple Scroll Gallery consists of three files:

How the gallery works

Simple Scroll Gallery looks for all hyperlinks (<a> tags) on the page that points to an image file (extensions: jpg, jpeg, JPG, png, PNG, gif, GIF). SSG adds to all these hyperlinks an onclick function which runs the gallery.

SGG excellently cooperates with the Wordpress built-in gallery. Wordpress creates image thumbnails with hyper­links, and SGG will assemble them into a fullscreen image presentation.

The text caption below images is taken from a thumbnail's alt attribute or a link text. SSG will create the gallery from all theese three images (BigImage1~3):

<a href='BigImage1.jpg'> <img alt='text caption' src='thumb.jpg'> </a>
<a href='BigImage2.jpg'> Another text caption </a>
<a href='BigImage3.jpg'></a> (an empty link, no caption)

The gallery activates after a user clicks on some hyperlink from the above example. But you can also run the gallery by calling SSG.run method.
Example: the body's onload event runs the gallery immediately after a page is loaded:

<body onload='SSG.run()'>

Use arguments to show any image before the rest of images:

<body onload="SSG.run({img: {href: 'url', alt: 'some text' }})">

Run SSG immediately after page loads is useful, when the html page is just a plain list of links without any design. There is nothing much to see without SSG. So the gallery can run in the no e×it mode - no close icon, no ESC key.

<body onload='SSG.run({noExit:true})'>

See a crash course - the most minimal way how to use SSG:

Fullscreen mode

Fullscreen mode can be activated four ways.

Adding the fs class to the parent tag of <a> tags. The fs class must be the first class. All images inside mygallery activate fullscreen mode:

<div class='fs mygallery'>
<a href='big-image.jpg'> <img src='thumbnail.jpg'></a>
<a href='big-image2.jpg'> <img src='thumbnail2.jpg'></a>
</div>

Running the gallery by calling the SSG.run method with the fs:true parameter.

<a onclick='SSG.run({fs:true})'> Show gallery</a>

Wrap the image in a DT tag as it is in a Wordpress gallery. This single image activates fullscreen mode:

<dt><a href='big-image.jpg'><img src='thumbnail.jpg'> </a></dt>

Adding the fs class to <a> tag. The fs class must be the first class. This single image activates fullscreen mode:

<a class='fs' href='big-image.jpg'> <img src='thumbnail.jpg'></a>
Simple Scroll Gallery

See SSG Sample:

Click a thumbnail & browse through the gallery by:
a mouse wheel or arrow keys ↓→↑←
or TAP on the bottom (upper) part of the screen

Coal Mine Michal - chain cloakroom - a text link to an image.
an empty (invisible) link to the image with SSG logo.
Both target images will appear in the gallery.

The image a user clicked on is displayed first, then follow other images in the order they appear on the page.


Another ways how to activate SSG

Run the gallery by calling SSG.run()

Run the gallery by calling
SSG.run({fs:true, img: { href: 'url', alt: 'some text' }})


You can link right inside the gallery to show a particular photo. Just add a hashtag with photo's name after url. For example this link http://ssg.flor.cz/#element shows the photo paty-element.jpg. It is enough to have in the hashtag crucial part of the name.


Browse through the gallery ~ jump scroll

There are two options. Classic scrolling with a scrollbar or fingers. And then jump scroll. A mouse wheel and arrow keys have an altered function, they scroll from one image to next image.

Move to the next image:
mouse wheel, down arrow key, right arrow, PgDn key or spacebar.
Move to the previous image:
mouse wheel, press up arrow key, left arrow, or PgUP key.

For touch screens there are two invisible areas: the top and bottom half of the screen. After tapping somewhere into the bottom (top) half, SSG jump scroll to the next (previous) image.