Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

mrsi-gallery is a full-screen image gallery that takes advantage of CSS3.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 demo
Octocat-spinner-32 .gitignore
Octocat-spinner-32 LICENSE.txt
Octocat-spinner-32 README.md
Octocat-spinner-32 gallery.js
Octocat-spinner-32 gallery.min.js
Octocat-spinner-32 style.css
README.md

mrsi-gallery

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

Why?

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.

Demo

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

Requirements

Example usage

<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/gallery.min.js"></script>
<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(){
        myGallery.toggleType();
    });
    $('#previous').on('click', function(){
        myGallery.previous();
    });
    $('#next').on('click', function(){
        myGallery.next();
    });

    //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
    };
    myGallery.setNewImages(options2);

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

            if (e.keyCode === 37 || e.keyCode === 40) {
                myGallery.previous();
            }
        }
    });
});
</script>

License

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

Something went wrong with that request. Please try again.