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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment