aaron1 Posted May 12, 2022 Share Posted May 12, 2022 Hi all, I'm trying to get the background image of a section (first section on a 7.1 home page) to randomly load a different image each time the user visits or refreshes the page - probably around 8 images in total. I found the below code on an older post - sometimes it works, sometimes a new image loads but the original suddenly pops up over top of it. Any suggestions that might iron out the bugs here would be appreciated. <script> document.addEventListener('DOMContentLoaded', function() { var images = [ 'https://randomwordgenerator.com/img/picture-generator/54e9d1454b5ba914f1dc8460962e33791c3ad6e04e507440752b7edc9649c2_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/nick-dunlap-h65WkTvyWJY-unsplash.jpg' ].sort( () => .5 - Math.random() ); var randImage = images[0]; document.querySelector(".homepage article.sections section:first-child .section-background img").src = randImage; document.querySelector(".homepage article.sections section:first-child .section-background img").setAttribute("srcset", ""); }); </script> Link to comment
tuanphan Posted May 15, 2022 Share Posted May 15, 2022 Hi, We can achieve this with Gallery. Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
aaron1 Posted May 16, 2022 Author Share Posted May 16, 2022 On 5/15/2022 at 3:07 PM, tuanphan said: Hi, We can achieve this with Gallery. Do you still need help on this? Hi tuanphan, Yes still looking for a suitable solution here. Ideally I was hoping to achieve this using background images as I have a bit of content to go over top of the imagery. A gallery may be a workable option though if I cant get background images to work - how do you go about achieving random load of gallery images? (I don't want users to be able to scroll through other images either). Thanks, Aaron Link to comment
rGRAYphotog Posted February 24 Share Posted February 24 Have you figured this out yet? I too would like to randomize the first image on my homepage. Link to comment
gary769 Posted February 24 Share Posted February 24 On 5/12/2022 at 7:52 AM, aaron1 said: Hi all, I'm trying to get the background image of a section (first section on a 7.1 home page) to randomly load a different image each time the user visits or refreshes the page - probably around 8 images in total. I found the below code on an older post - sometimes it works, sometimes a new image loads but the original suddenly pops up over top of it. Any suggestions that might iron out the bugs here would be appreciated. <script> document.addEventListener('DOMContentLoaded', function() { var images = [ 'https://randomwordgenerator.com/img/picture-generator/54e9d1454b5ba914f1dc8460962e33791c3ad6e04e507440752b7edc9649c2_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/nick-dunlap-h65WkTvyWJY-unsplash.jpg' ].sort( () => .5 - Math.random() ); var randImage = images[0]; document.querySelector(".homepage article.sections section:first-child .section-background img").src = randImage; document.querySelector(".homepage article.sections section:first-child .section-background img").setAttribute("srcset", ""); }); </script> The code you provided looks like it should work for randomly loading a background image on refresh, but it's possible that the issue you're experiencing is related to caching. The browser may be caching the previous image and not updating it with the new one. One way to prevent caching is to add a query parameter to the image URL. This will make the browser think that the image is a new resource and force it to reload the image. Here's an updated version of the code that includes a query parameter: document.addEventListener('DOMContentLoaded', function() { var images = [ 'https://randomwordgenerator.com/img/picture-generator/54e9d1454b5ba914f1dc8460962e33791c3ad6e04e507440752b7edc9649c2_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg', 'https://randomwordgenerator.com/img/picture-generator/nick-dunlap-h65WkTvyWJY-unsplash.jpg' ].sort(() => .5 - Math.random()); var randImage = images[0]; var imgEl = document.querySelector(".homepage article.sections section:first-child .section-background img"); imgEl.src = randImage + '?v=' + Math.random(); // add a query parameter to prevent caching imgEl.setAttribute("srcset", ""); }); Link to comment
Lkrohnmiller Posted April 26 Share Posted April 26 I am also looking for a solution to this! Seems like nothing was ever resolved and I've reopened a similar question thread. Are these code injections into the <head> tag of the page? or in general code injections? Or as a code block added onto the page? Link to comment
tuanphan Posted April 29 Share Posted April 29 On 4/27/2023 at 12:06 AM, Lkrohnmiller said: I am also looking for a solution to this! Seems like nothing was ever resolved and I've reopened a similar question thread. Are these code injections into the <head> tag of the page? or in general code injections? Or as a code block added onto the page? Code Injection > Footer Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment