shopify - javascript random image display

snippet-gallery.liquid

<div id="section-inspiration">


  <ul class="inspiration-images">
		<li class="inspiration-1"><img src="#" class="inspiration-image fade-in" /></li>
		<li class="inspiration-1"><img src="#" class="inspiration-image fade-in" /></li>
		<li class="inspiration-1"><img src="#" class="inspiration-image fade-in" /></li>
		<li class="inspiration-1"><img src="#" class="inspiration-image fade-in" /></li>
		<li class="inspiration-1"><img src="#" class="inspiration-image fade-in" /></li>
		<li class="inspiration-1"><img src="#" class="inspiration-image fade-in" /></li>
		<li class="inspiration-1"><img src="#" class="inspiration-image fade-in" /></li>
		<li class="inspiration-1"><img src="#" class="inspiration-image fade-in" /></li>
		<li class="inspiration-1"><img src="#" class="inspiration-image fade-in" /></li>
	</ul>


</div>


<!--New images on load -->
<script>

		var images = ['{{ 'inspiration_1.jpg' | asset_url }}', '{{ 'inspiration_2.jpg' | asset_url }}', '{{ 'inspiration_3.jpg' | asset_url }}', '{{ 'inspiration_4.jpg' | asset_url }}', '{{ 'inspiration_5.jpg' | asset_url }}', '{{ 'inspiration_6.jpg' | asset_url }}', '{{ 'inspiration_7.jpg' | asset_url }}', '{{ 'inspiration_8.jpg' | asset_url }}', '{{ 'inspiration_9.jpg' | asset_url }}', '{{ 'inspiration_10.jpg' | asset_url }}', '{{ 'inspiration_11.jpg' | asset_url }}', '{{ 'inspiration_12.jpg' | asset_url }}', '{{ 'inspiration_13.jpg' | asset_url }}', '{{ 'inspiration_14.jpg' | asset_url }}', '{{ 'inspiration_15.jpg' | asset_url }}', '{{ 'inspiration_16.jpg' | asset_url }}', '{{ 'inspiration_17.jpg' | asset_url }}', '{{ 'inspiration_18.jpg' | asset_url }}', '{{ 'inspiration_19.jpg' | asset_url }}', '{{ 'inspiration_20.jpg' | asset_url }}', '{{ 'inspiration_21.jpg' | asset_url }}', '{{ 'inspiration_22.jpg' | asset_url }}', '{{ 'inspiration_23.jpg' | asset_url }}', '{{ 'inspiration_24.jpg' | asset_url }}', '{{ 'inspiration_25.jpg' | asset_url }}', '{{ 'inspiration_26.jpg' | asset_url }}', '{{ 'inspiration_27.jpg' | asset_url }}', '{{ 'inspiration_28.jpg' | asset_url }}', '{{ 'inspiration_29.jpg' | asset_url }}', '{{ 'inspiration_30.jpg' | asset_url }}', '{{ 'inspiration_31.jpg' | asset_url }}'];

    //$('<img class="fade-in" src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('.inspiration-images');
		var currentImages = [];
		function updateRandomImages() {
		    var imageElements = $('.inspiration-image');
		    $.each(imageElements, function(index, element) {
		        displayRandomImage(element);
		    });
		}

		function displayRandomImage(element) {
		    var index = getRandomNumber();
				//$(element).append('<li class="inspiration-1"><img src="'+images[index]+'" /></li>')
				if(currentImages.indexOf(images[index]) > -1){
					displayRandomImage(element);
				}else{
					$(element).attr( 'src', images[index] );
					currentImages.push(images[index]);
					console.log('ADD: '+images[index]);
				}

		}

		function getRandomNumber() {
		    return Math.floor(Math.random() * 30);
		}

		$('button').click(function () {
		    updateRandomImages();
		});

		//start off with some random images
		updateRandomImages();

</script>