How to make a Slideshow randomize

[tuanphan]

To make a slideshow randomize in Squarespace, you can follow these steps.
#1. This code supports all types of Gallery Slideshow: Simple + Full

#2. First, enable Slideshow Caption

#3. Edit First Image in the Slideshow and add this text to the Description field

twc-gsior

#4. Use this code to Page Header Injection (Page where you use Slideshow)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $( ( ) => {
  
    /*
    
      gallery section image order random
      
      License       : < https://tinyurl.com/s872fb68 >
      
      Version       : 0.2.0
      
      SS Version    : 7.1
      
      Dependencies  : jQuery
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      no user serviceable parts below
      
      */
      
      const version = '0.2.0';
      
      const s = `Gallery Section Image Order Random v${ version }, ` +
      
        'License < https://tinyurl.com/s872fb68 >, ' +
        
        'Tom\'s Web Consulting < http://www.tomsWeb.consulting >';
        
      console.log ( s );
      
    const codeKey = 'twc-gsior';
    
    const selectorPrefix = '.gallery-section ';
    
    const selectorSuffix = ' .gallery-caption ' +
    
      `p.gallery-caption-content:contains(${ codeKey })`;
      
    let selector = selectorPrefix
    
      +
      
      [
      
        '.gallery-fullscreen-slideshow',
        
        '.gallery-grid--layout-grid',
        
        '.gallery-masonry',
        
        '.gallery-reel',
        
        '.gallery-slideshow',
        
        '.gallery-strips--layout-strips'
        
        ]
        
      .join ( `${ selectorSuffix }, ${ selectorPrefix }` )
      
      +
      
      selectorSuffix;
      
    const $elements = $( selector );
    
    if ( ! $elements.length ) return; // bail if no $elements
    
    const $galleries = $elements
    
      .parents ( '.gallery-section' );
      
    let callback = function ( ) {
    
      const $this = $( this );
      
      let text = $this
      
        .text ( )
        
        .replace ( codeKey, '' )
        
        .trim ( );
        
      if ( text )
      
        $this
        
          .text ( text )
          
        else
        
          $this
          
            .parents ( 'figcaption' )
            
            .remove ( );
            
      }
      
    $elements.each ( callback );
    
    callback = function ( ) {
    
      const callback = function ( ) {
      
        const r = Math.floor ( Math.random ( ) * $images.length );
        
        const $image = $images.eq ( r );
        
        $( this )
        
          .append ( $image );
          
        $images = $images.not ( $image );
        
        }
      
      const selector = [
      
        '.gallery-fullscreen-slideshow-item-img',
        
        '.gallery-grid-item-wrapper',
        
        '.gallery-masonry-item-wrapper',
        
        '.gallery-reel-item-src',
        
        '.gallery-slideshow-item-img',
        
        '.gallery-strips-item-wrapper'
        
        ]
        
        .join ( ', ' );
        
      const $elements = $( selector, this );
      
      let $images = $( 'img', $elements );
      
      $elements.each ( callback );
      
      }
      
    $galleries.each ( callback );
    
    } );
    
  </script>

[Bec_Brittain]

This is great, I’ve been trying other solutions to no avail. This solution looks like you can’t use captions, however, because you’re using the description field for the “two-gsior” tag. Any way around that?

[tuanphan]

I just created another example but with Gallery Block Slideshow + Caption, you can check it here
https://phuongvit.squarespace.com/slideshow-random?noredirect
pass: abc

Here you can add Caption over image.

This requires some customization on the site so if you want to apply it you can add me as a contributor, I will add the code and guide you to add it to the slideshow

[Bec_Brittain]

Thanks for the offer of help. This is the current format of my slideshow which I’d like to keep – assuming I can just move the captions in your example with some css?

Also, I tried the plugin for randomizing galleries and it didn’t work (SQSP themes or something), and I’m thinking it’s because my gallery slideshow is a section, not a block. Will that be an issue with your method?

[tuanphan]

I also use SQSPTHEMES, it works with Gallery Block only. You can consider using Gallery Block Slideshow

[user2754]

Hello, can I use this code for a simple grid gallery ?
Thank you

[tuanphan]

With Gallery Section Grid, use this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const productGrid = document.querySelector('body');
    if (productGrid) {
        var productItems = productGrid.querySelectorAll('.gallery-grid-item');
        for (var i = productItems.length; i >= 0; i--) {
            productGrid.appendChild(productItems[Math.random() * i | 0]);
        }
    }
});
</script>

If you need to do this for specific gallery, just change
body
to gallery grid id
or share link to page, I can check & give you exact id/code

[user2754]

Thank you for your answer. I can’t seem to make it work though
I’m still on a trial version. But here are the two id section number I see for this section

#collection-67b5f9cb88299161acd3e9ca

section[data-section-id=“67dbf47a7a67a8523d8287e3”]

Not sure how to integrate it in the code you gave me either.

I just want this specific shuffle effect on this page. To do so i can imagine that i have to integrate the code in the advanced section of this specific page?

[tuanphan]

Do you have link to Pub page?
and you need to add code to Code Injection > Footer to make code load properly

[user2754]

can you use this link? its a trial version

Squarespace — Login

[tuanphan]

What is pass?

[user2754]

Hello Tuan Phan, can I send you the password by mail?

[tuanphan]

You can use this code, if it doesn’t work, send password to my email

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const productGrid = document.querySelector('#collection-67b5f9cb88299161acd3e9ca .gallery-grid-wrapper');
    if (productGrid) {
        var productItems = productGrid.querySelectorAll('.gallery-grid-item');
        for (var i = productItems.length; i >= 0; i--) {
            productGrid.appendChild(productItems[Math.random() * i | 0]);
        }
    }
});
</script>

[user2754]

Ohhhhh thats fantastic. It works!!!
I’m so happy. It’s exactly what I wanted to achieve.
So grateful