randomly cycle a banner background image on page load?

Site URL: https://fredfilms.com

Hi,

My website has a scrolling index/homepage with multiple 'blank' pages nested. I added a banner image to the top page with a text overlay and would like that banner image to randomly load each time someone visits the page.

Any help would be greatly appreciated!

nevermind! I got it to work by taking the image out of the banner and setting background properties with CSS. I've seen some other folks struggling with this so here's what worked for me:

CSS

#page{
  background: #cacaca;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
}

-style your background however you want. I like the parallax effect and added an overlay so the text on top would stand out more

footer code injection:

<script type="text/javascript">

    var images = ['image.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];              
    document.getElementById("page").style.backgroundImage = 'url(" ' + images[Math.floor(Math.random() * images.length)] + '")';
</script>

-you'll have to find the urls for your images and replace image.jpg above with the full url, and replace "page" with whatever your page id is.

good luck!

@Skwolven Thank you for sharing your script. Would the script work with random background videos?

@Skwolven Thanks for sharing the script. I'm trying to implement it on SQSP 7.1 with no luck. Can someone help?

14 hours ago, AndrejB said:

@Skwolven Thanks for sharing the script. I'm trying to implement it on SQSP 7.1 with no luck. Can someone help?

You want this for Banner Image or Banner Video? With banner image, I remember I solved a similar case.

On 8/29/2022 at 3:07 AM, tuanphan said:

You want this for Banner Image or Banner Video? With banner image, I remember I solved a similar case.

@tuanphan Do you have the solution to do random banner image in 7.1? Thank you

On 2/25/2023 at 3:14 AM, rGRAYphotog said:

@tuanphan Do you have the solution to do random banner image in 7.1? Thank you

Just an update

You can use a Gallery Section - Strips Layout (we can give code to make it 1 item/row, fullwidth, then use this code to Code Injection > Footer to make image random on page load

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/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>