vadimdemedes/gist:5225605

## gistfile1.html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Galleria</title>
	<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
	<!-- Include Chute.js -->
	<script src="//cdn.getchute.com/v3/chute.min.js" data-load="view"></script>
	<style> /* specifying dimensions for a gallery, required by Galleria */
	div.assets {
		width:600px;
		height:400px;
	}
	</style>
	<!-- Template for a container element -->
	<script class="container-template" type="application/x-template">
		<div class="assets"></div>
	</script>
	<!-- Template for a single data item -->
	<script class="item-template" type="application/x-template">
		<img src="{{ asset.url }}">
	</script>
	<script>
	Chute.ready(function(){ // execute code after all requested dependencies were loaded (view component, in this case)
		var SlideshowAssetView = Chute.View.extend({ // view for a single image
			template: 'script.item-template' // speicfying template via selector
		});

		var SlideshowView = Chute.CollectionView.extend({ // view for a set of images
			template: 'script.container-template',
			dependencies: ['lib/galleria/galleria-1.2.9.min.js'], // setting galleria as a view dependency
			itemView: SlideshowAssetView, // pointing to a view for every single data item
			initialize: function() { // custom initialize function
				this.on('render', $.proxy(this.setup, this)); // run setup() method after view was rendered
			},

			setup: function() {
				Galleria.loadTheme('lib/galleria/themes/classic/galleria.classic.min.js');

				Galleria.run(this.$el);
			}
		});

		var slideshow = new SlideshowView({
			container: 'div.slideshow', // put gallery to the div.slideshow
			data: new Chute.API.Assets({ album: '9Zurmdfe' }).toData() // set an incoming data collection
		});
	});
	</script>
</head>
<body>
	<div class="slideshow"></div>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Galleria</title>
	<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
	<!-- Include Chute.js -->
	<script src="//cdn.getchute.com/v3/chute.min.js" data-load="view"></script>
	<style> /* specifying dimensions for a gallery, required by Galleria */
	div.assets {
	width:600px;
	height:400px;
	}
	</style>
	<!-- Template for a container element -->
	<script class="container-template" type="application/x-template">
	<div class="assets"></div>
	</script>
	<!-- Template for a single data item -->
	<script class="item-template" type="application/x-template">
	<img src="{{ asset.url }}">
	</script>
	<script>
	Chute.ready(function(){ // execute code after all requested dependencies were loaded (view component, in this case)
	var SlideshowAssetView = Chute.View.extend({ // view for a single image
	template: 'script.item-template' // speicfying template via selector
	});

	var SlideshowView = Chute.CollectionView.extend({ // view for a set of images
	template: 'script.container-template',
	dependencies: ['lib/galleria/galleria-1.2.9.min.js'], // setting galleria as a view dependency
	itemView: SlideshowAssetView, // pointing to a view for every single data item
	initialize: function() { // custom initialize function
	this.on('render', $.proxy(this.setup, this)); // run setup() method after view was rendered
	},

	setup: function() {
	Galleria.loadTheme('lib/galleria/themes/classic/galleria.classic.min.js');

	Galleria.run(this.$el);
	}
	});

	var slideshow = new SlideshowView({
	container: 'div.slideshow', // put gallery to the div.slideshow
	data: new Chute.API.Assets({ album: '9Zurmdfe' }).toData() // set an incoming data collection
	});
	});
	</script>
	</head>
	<body>
	<div class="slideshow"></div>
	</body>
	</html>