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.


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