mrsi-gallery is a full-screen image gallery that takes advantage of CSS3.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
LICENSE.txt updated README to showcase the GitHub Pages demo Jun 18, 2013


mrsi-gallery is a full-screen image gallery that takes advantage of the modern browser technologies. It uses CSS3 background-size and transition attributes when available and when not it fallbacks to JavaScript.

Browser Support

It works super fast in most modern browsers - that being browsers that support CSS3 background-size and transition attributes. When there is no such browser support, the script fallbacks to JS which is a bit slower, but still reasonably fast. It should work in every possible browser that supports JS. That's right, it even works on the good old IE 6 :D


I needed full-screen gallery for my new website (WIP) but I didn't find any that uses CSS3 background-size attribute so I made mrsi-gallery.

Is it production ready?

It is (should be? :D). Any and all ideas / bug reports / suggestions are still highly welcomed and appreciated.


You can:

  • download the project and try it locally - just open the "index.html" in the "demo" folder
  • test it on GitHub Pages - mrsi gallery demo


Example usage

<link rel="stylesheet" href="css/style.css">
<script src=""></script>
<script src="js/modernizr.js"></script>
<script src="js/gallery.min.js"></script>
$(function() {
    //init the mrsi-gallery
    //all parameters are optional, but you should at least define the images if you want something to show :P
    //images: the array of images to display
    //shuffle: boolean - depending on if you want to display images in random order or not
    //transitionTime: integer - sets for how long the transition between images last on image change
    //type: string - either 'cover' or 'contain' - gallery.toggleType toggles between them
    //cssTransitions: boolean - if you have transtions in CSS and want to use that. It gives it major performance boost.
    var options = {
        images: ["images/image1.jpg", "images/image2.jpg", "images/image3.jpg"], //array of paths to images
        shuffle: false,
        transitionTime: 1000,
        type: 'cover',
        cssTransitions: false
    var myGallery = new Gallery(options);

    //set menu controls
    $('#toggle').on('click', function(){
    $('#previous').on('click', function(){
    $('#next').on('click', function(){;

    //you can also change the images array if you plan to have multiple galleries
    var options2 = {
        images: ["images2/image1.jpg", "images2/image2.jpg", "images2/image3.jpg"], //array of paths to images in second gallery
        shuffle: false

    //set keyboard shortcuts
    $(window.document.documentElement).on('keyup', function (e) {
        if (!myGallery.running) {
            if (e.keyCode === 39 || e.keyCode === 38) {

            if (e.keyCode === 37 || e.keyCode === 40) {


mrsi-gallery is developed by Miha Rekar and licensed under the MIT License