instagram_carousel.vm

<style>
.instagram-carousel-wrapper {
	text-align: center;
}

.instagram-carousel-wrapper .carousel {
	display: inline-block;
	margin: 10px;
}

.instagram-carousel-wrapper .carousel menu {
	display: none;
}

.instagram-carousel-wrapper .carousel-item {
	overflow: hidden;
}

.instagram-carousel-wrapper .carousel-item img {
	-webkit-transition: all 1s ease; 
	-moz-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	-o-transition: all 1s ease; 
	transition: all 1s ease;
}

.instagram-carousel-wrapper .carousel-item:hover img {
	-webkit-transform:scale(1.25); 
	-moz-transform:scale(1.25); 
	-ms-transform:scale(1.25); 
	-o-transform:scale(1.25);
	transform:scale(1.25);
}
</style>

<div class="instagram-carousel-wrapper loading">
	<div class="loading-gif"></div>
	<div class="instagram-carousel on-screen-helper slide-right" data-offset-bottom="200px" id="instagramCarousel1"></div>
	<div class="instagram-carousel " id="instagramCarousel2"></div>
	<div class="instagram-carousel on-screen-helper slide-left" data-offset-bottom="200px" id="instagramCarousel3"></div>
	<div class="instagram-carousel on-screen-helper slide-right" data-offset-bottom="200px" id="instagramCarousel4"></div>
	<div class="instagram-carousel" id="instagramCarousel5"></div>
	<div class="instagram-carousel on-screen-helper slide-left" data-offset-bottom="200px" id="instagramCarousel6"></div>
</div>

<script type="text/javascript">
AUI().use(
	'aui-base',
	'aui-carousel',
	'jsonp',
	'jsonp-url',
	'querystring-parse',
	function(A) {
		A.on(
			'load',
			function() {
				var carousel1 = new A.Carousel(
					{
						activeIndex: 'rand',
						contentBox: '#instagramCarousel1',
						height: 300,
						intervalTime: 3,
						width: 300
					}
				);

				var carousel2 = new A.Carousel(
					{
						activeIndex: 'rand',
						contentBox: '#instagramCarousel2',
						height: 300,
						intervalTime: 4,
						width: 300
					}
				);

				var carousel3 = new A.Carousel(
					{
						activeIndex: 'rand',
						contentBox: '#instagramCarousel3',
						height: 300,
						intervalTime: 5.5,
						width: 300
					}
				);

				var carousel4 = new A.Carousel(
					{
						activeIndex: 'rand',
						contentBox: '#instagramCarousel4',
						height: 300,
						intervalTime: 4.8,
						width: 300
					}
				);

				var carousel5 = new A.Carousel(
					{
						activeIndex: 'rand',
						contentBox: '#instagramCarousel5',
						height: 300,
						intervalTime: 6,
						width: 300
					}
				);

				var carousel6 = new A.Carousel(
					{
						activeIndex: 'rand',
						contentBox: '#instagramCarousel6',
						height: 300,
						intervalTime: 3.7,
						width: 300
					}
				);

				function displayCarousel(request) {
					for(var i=0; i < request.data.length; i++) {
						var item = request.data[i];

						var imageUrl = item.images.low_resolution.url;
						var imageHome = item.link;
						var imageCaption = null;

						var image = A.Node.create('<div></div>');
						image.addClass('carousel-item');

						if (item.caption != null) {
							imageCaption = item.caption.text;

							image.append('<a href="' + imageHome + '" title="' + imageCaption + '" target="_blank"><img src="' + imageUrl + '"/></a>');
						}
						else {
							image.append('<a href="' + imageHome + '" target="_blank"><img src="' + imageUrl + '"/></a>');
						}

						if (i % 6 == 0) {
							A.one('#instagramCarousel6').append(image);
						}
						else if (i % 5 == 0) {
							A.one('#instagramCarousel5').append(image);
						}
						else if (i % 4 == 0) {
							A.one('#instagramCarousel4').append(image);
						}
						else if (i % 3 == 0) {
							A.one('#instagramCarousel3').append(image);
						}
						else if (i % 2 == 0) {
							A.one('#instagramCarousel2').append(image);
						}
						else {
							A.one('#instagramCarousel1').append(image);
						}
					}

					var  initializeCarousel = function (carousel) {
						carousel.render();

						carousel.on(
							'mouseover',
							function(event) {
								carousel.pause();
							}
						);

						carousel.on(
							'mouseout',
							function(event) {
								carousel.play();
							}
						);
					};

					initializeCarousel(carousel1);
					initializeCarousel(carousel2);
					initializeCarousel(carousel3);
					initializeCarousel(carousel4);
					initializeCarousel(carousel5);
					initializeCarousel(carousel6);
				}

				var url = 'https://api.instagram.com/v1/tags/${hashtag.getData()}/media/recent/?count=${count.getData()}&client_id=${client_id.getData()}';

				instagramCarousel = new A.JSONPRequest(url, displayCarousel);
				instagramCarousel.send();

				A.one('.instagram-carousel-wrapper').removeClass('loading');
			}
		);
	}
);
</script>