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