S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations

Today I'm going to share with you a gallery plugin I built (yeah, like the world needs another gallery plugin, right?) after having stumbled upon SONY's products gallery while I was browsing their website a while ago.

Their products' image gallery is a simple one, but two things grabbed my attention about the gallery:

1. It's made with Flash when it can totally be created with HTML, CSS3 and Javascript.
2. It has a neat feature: exiting the slideshow mode back to the grid view mode, the last image which was active in the slideshow mode "returns back" to its position in the grid view, thus the user knows where they have stopped and what images are left in the gallery that they haven't maybe browsed. This is a neat feature which serves as a brain cue and thus is a nice and positive UX-aware touch.

Not to mention that the gallery is accessible by keyboard and you can navigate through the images via keyboard shortcuts, and enter into fullscreen mode with only the gallery being in fullscreen, therefore removing all distractions so that you can focus only on the products gallery.

The plugin uses HTML5's FullScreen API, and relies heavily on CSS3 animations transforms, so it will work only in browsers that support these features.

The Markup

The markup needed for the plugin is simple: two unordered lists, the first one for the small versions of the images, and the second one for the big versions, wrapped in a container which I'll be giving an id of #gallery-container.

The small images should be scaled versions of the big images, i.e they should all have the same aspect ratio for best results.

One more thing is needed in the markup: the controls bar. The controls are used to (duh) control the slideshow and navigate through the images..

            <div id="gallery-container">
              <ul class="items--small">
                <li class="item"><a href="#"><img src="images/small-1.png" alt="" /></a></li>
                <li class="item"><a href="#"><img src="images/small-2.png" alt="" /></a></li>
                <!--.....-->
              </ul>
              <ul class="items--big">
                <li class="item--big">
                  <a href="#">
                    <figure>
                      <img src="images/big-1.jpg" alt="" />
                      <figcaption class="img-caption">
                        Caption
                      </figcaption>
                    </figure>
                    </a>
                </li>
                <li class="item--big">
                  <a href="#">
                    <figure>
                      <img src="images/big-2.jpg" alt="" />
                      <figcaption class="img-caption">
                        Caption
                      </figcaption>
                    </figure>
                    </a>
                </li>
                <!--...-->
              </ul>
              <div class="controls">
                <span class="control icon-arrow-left" data-direction="previous"></span> 
                <span class="control icon-arrow-right" data-direction="next"></span> 
                <span class="grid icon-grid"></span>
                <span class="fs-toggle icon-fullscreen"></span>
              </div>
            </div>
            ```

<p>The class names are only CSS hooks, so you can change them, but make sure you change them in the stylesheet as well if you do.</p>

<p>The control buttons use an image sprite for the icons, which will be included among the plugin assets.</p>

<p>And that's all you need in the markup.</p>

<h3 class="deeplink" id="dependencies">Dependencies</h3>

<p>The plugin has two dependencies: the stylesheet for the gallery and jQuery. Also, if you decide to use the same icons for the gallery controls as the ones I'm using, don't forget to include them in your directory as well.</p>

<p>Link to the stylesheet in the head of your page (or import the stylesheet to your main stylesheet and concatenate them if you use Sass and Compass).</p>

```html 
    <link rel="stylesheet" href="path-to-stylesheets/styles.css" />

Link to jQuery from a CDN and the plugin script at the bottom of the page right before the ending body tag:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="path-to-your-js-scripts/scripts.js"></script>

In order to optimize this gallery for touch, I added hammer.js into a javascript file called plugins.js, which also includes Screenfull.js by Sindre Sorhus, which is a "Simple wrapper for cross-browser usage of the JavaScript Fullscreen API".

You have an option to add full-screen support to your gallery, which you can specify in the options when you call the plugin by setting the value for the option to true (more on this next).

Link to the script before you link to the plugin script:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="path-to-your-js-scripts/plugins.js"></script>
    <script src="path-to-your-js-scripts/scripts.js"></script>

Using the Plugin

Calling the plugin is very straightforward. The fullScreenEnabled option is set to false by default, you can enable it to add full-screen support by setting it to true:

              $(document).ready(function(){
                $('#gallery-container').sGallery({
                  fullScreenEnabled: true //default is false
                });
              });
            ```

And that's it. I hope you like this plugin and find it useful!