Sara Soueidan created an amazing Responsive Jquery Gallery Plugin with CSS3 Animations. It was inspired by SONY’s products gallery which is created with HTML, CSS3 and Jquery.
Sara says in her original post 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 gallery is very easy to implement and it takes advantage of HTML5’s FullScreen API, and relies heavily on CSS3 animations goodness and CSS3 transforms, so it will work only in browsers that support these features. Make sure you look at the demo and see how great this reponsive jquery plugin is!
Image may be NSFW.
Clik here to view.
DEMO | DOWNLOAD
HOW TO USE:
HTML:
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 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="#"><img src="images/big-1.jpg" alt=""></a></li>
<li class="item--big"><a href="#"><img src="images/big-2.jpg" alt=""></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>
The classnames are only CSS hooks, so you can change them, but make sure you change them in the stylesheet as well if you do.
The control buttons use an image sprite for the icons, which will be included among the plugin assets.
DEPENDENCIES
The plugin has two dependencies: the stylesheet for the gallery and jQuery.
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).
<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>
That’s all you need for the plugin to work. You have an option to add full-screen support to your gallery, which you specify in the options when you call the plugin. If you turn the fullscreen option on, you will need an extra dependency called Screenfull.js (also included with the plugin assets) by Sindre Sorhus, which is a “Simple wrapper for cross-browser usage of the JavaScript Fullscreen API”. 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> <!-- link to the screenfull.js script before the link to the plugin script --> <script src="path-to-your-js-scripts/screenfull.min.js"></script> <script src="path-to-your-js-scripts/scripts.js"></script>
USING THE PLUGIN
$(document).ready(function(){
$('#gallery-container').sGallery({
fullScreenEnabled: true //default is false
});
});
If you like the plugin, you can write a thank you comment to Sara @ http://sarasoueidan.com/blog/s-gallery-responsive-jquery-gallery-plugin-with-css3-animations/