Random Image on Page Load

What You'll Create

A stacked gallery block that randomly displays one of its images each time the page loads. Different visitors see different images, creating a dynamic, ever-changing visual experience.

The Problem It Solves

Squarespace galleries show images in a fixed order. When you want to add variety and surprise to your site by showing a random image from a set each time the page loads, you need JavaScript to randomly select and display one image.

Perfect For

Homepage hero images, Featured artwork sections, Rotating testimonial photos, Dynamic product showcases, Surprise elements

What Makes This Different

This technique uses JavaScript's Math.random() to select one image from a stacked gallery block on page load. CSS positions all images absolutely and hides them by default, then JavaScript reveals the randomly selected one with a smooth fade transition.

Details

• Section Type: Fluid & Classic

• Code Type: JavaScript

• Prerequisites: Stacked gallery block with multiple images

• Toolkit Title: Show different images on load

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support