Randomise the order of images in a gallery on refresh (version 7.1)

Site URL: https://salmon-capybera-psd8.squarespace.com/

Hello,

I appreciate someone has asked this last year but it appears to have been forgotten about and looks unresolved anyway.

I would like to randomise the order of the images in my gallery.  There is a plugin but it only works on image blocks in 7.1.

Any help with the code would be very much appreciated!

https://salmon-capybera-psd8.squarespace.com/       password is   test

Thank you,

Billy

For Gallery Section on Homepage?

Yes I have multiple galleries in Strips and would like the images to randomise on refresh

@billyb It appears that you found a solution. Could you help point me in the right direction? I am trying to do exactly what your homepage does. 

On 3/1/2023 at 5:44 AM, shopkisme said:

@billyb It appears that you found a solution. Could you help point me in the right direction? I am trying to do exactly what your homepage does. 

He used Gallery Section then add this to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
 $( document ).ready(function() {
   $('.gallery-strips-wrapper').randomize('.gallery-strips-item');
 });
 (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>

anyone know how to make images load in random order on a grid:stripes for portfolio pages:

https://rico-x.com/projects/keep-it-warm-ill-be-back

thanks

On 5/1/2024 at 3:07 AM, tcrown86 said:

anyone know how to make images load in random order on a grid:stripes for portfolio pages:

https://rico-x.com/projects/keep-it-warm-ill-be-back

thanks

You can use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
 $( document ).ready(function() {
   $('.gallery-strips-wrapper').randomize('.gallery-strips-item');
 });
 (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>

worked really well, thanks for your help on this, not a coder, building this all myself. thanks

@tuanphanI was wondering if randomising a gallery is possible in squarespace 7.0? I am trying to achieve the same result but so far my (very) limited coding skills are failing...

here is the page I'm trying to randomise:
marrrrk.com.au

thanks in advance!

On 6/11/2024 at 1:57 PM, marrrrk said:

@tuanphanI was wondering if randomising a gallery is possible in squarespace 7.0? I am trying to achieve the same result but so far my (very) limited coding skills are failing...

here is the page I'm trying to randomise:
marrrrk.com.au

thanks in advance!

You mean Homepage is Gallery Page? If yes, try this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
 $( document ).ready(function() {
   $('div#thumbList').randomize('.thumb');
 });
 (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>

On 5/2/2024 at 6:16 PM, tuanphan said:

You can use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
 $( document ).ready(function() {
   $('.gallery-strips-wrapper').randomize('.gallery-strips-item');
 });
 (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>

 

This worked perfectly for my Gallery Page, thank you.

@tuanphan how could I also randomise the images loaded on my homepage, which is a Slideshow : Simple section?  Thanks in advance!

https://sepia-koala-36ck.squarespace.com/

On 6/16/2024 at 2:13 PM, AdamBlyth said:

This worked perfectly for my Gallery Page, thank you.

@tuanphan how could I also randomise the images loaded on my homepage, which is a Slideshow : Simple section?  Thanks in advance!

https://sepia-koala-36ck.squarespace.com/

I don't think code will work with Gallery Slideshow.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
 $( document ).ready(function() {
   $('.gallery-slideshow-wrapper').randomize('figure.gallery-slideshow-item');
 });
 (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>

In case it doesn't work, I will send a plugin to achieve this, if you have a budget.

5 hours ago, tuanphan said:

I don't think code will work with Gallery Slideshow.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
 $( document ).ready(function() {
   $('.gallery-slideshow-wrapper').randomize('figure.gallery-slideshow-item');
 });
 (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>

In case it doesn't work, I will send a plugin to achieve this, if you have a budget.

@tuanphan do you know if this works on a 7.1 website as well? I have a code I added to my website now that works but when you refresh the page the slideshow goes blank. I was really hoping that we would receive features similar to the Tetragrammaton site especially how it features two random images at a time.

My webpage is https://www.ventvibes.com/gallery also if you need to take a look at it.

On 6/17/2024 at 10:27 PM, Turnervision said:

@tuanphan do you know if this works on a 7.1 website as well? I have a code I added to my website now that works but when you refresh the page the slideshow goes blank. I was really hoping that we would receive features similar to the Tetragrammaton site especially how it features two random images at a time.

My webpage is https://www.ventvibes.com/gallery also if you need to take a look at it.

Add this code under code you added

<style>
  [data-active="true"] img {
    display: block !important;
}
</style>

On 6/17/2024 at 7:13 PM, tuanphan said:

I don't think code will work with Gallery Slideshow.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
 $( document ).ready(function() {
   $('.gallery-slideshow-wrapper').randomize('figure.gallery-slideshow-item');
 });
 (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>

In case it doesn't work, I will send a plugin to achieve this, if you have a budget.

Yep I tried that too and it didn't work unfortunately, thanks anyway.

This solution worked however:

https://github.com/tomsWebConsulting/twcsl/tree/main/v7.1/Section/Gallery/Gallery Section Image Order Random#gallery-section-image-order-random

On 6/19/2024 at 4:39 AM, tuanphan said:

Add this code under code you added

<style>
  [data-active="true"] img {
    display: block !important;
}
</style>

 

Thank you so much this worked perfectly!