Jump to content

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

Recommended Posts

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

Link to comment
  • 7 months later...
  • Replies 3
  • Views 3.9k
  • Created
  • Last Reply

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>








Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.