Can anyone help with code and instruction to display random image on index page refresh?

Hi all -Please, can anyone help me with code and instruction so that I can have random images in gallery on page refresh for the first index page on this site?https://ruth-sparkes-39hd.squarespace.com

Thank you in anticipation x

Hi @EMPRA

I see you managed to do this, any chance you could enlighten me as to how?

Hi @EMPRA

I see you managed to do this, any chance you could enlighten me as to how?

Hi @reesthompson - I don't know if this will work on all templates, I had help from someone far cleverer than I. But this might work for you...

Create a gallery page and set for your banner image.

Then go to... Settings > Advanced > Code Injection

Sitewide code injection - header insert:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Sitewide code injection - footer insert:

<script>
 $( document ).ready(function() {
   $('.gallery-wrapper').randomize('.slide-wrapper');
 });

 (function($) {
   $.fn.randomize = function(childElem) {
       function shuffle(o) {
           for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
           return o;
       };
       return this.each(function() {
           var $this = $(this);
           var elems = $this.children(childElem);

           shuffle(elems);

           $this.detach(childElem);  

           for(var i=0; i < elems.length; i++) {
               $this.append(elems[i]);      
           }
       });    
   }
})(jQuery);
</script>