Jump to content

Random BG Image for Projects Background

Recommended Posts

Hi! So basically what I'm trying to do is: 
- Whenever I go to my webstite (www.a2-foto.com), there's a fixed Background Image 
- I want this first background image to be random from an array / selection 
- Currently one can only upload ONE image at a time 

I know this is possible using css/javascript 
but I'm not sure which selectors to use, etc. Someone can help? 🙂

iScreen Shoter - Safari - 240702182134.jpg

iScreen Shoter - Safari - 240702182235.jpg

Link to comment
  • Replies 2
  • Views 156
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Try the code discussed here:

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Posted (edited)

@Ziggy  I tried it but it was showing an image for 1ms. 
I asked ChatGTP for help and it worked, but I needed to do 2 steps: 

(1) Add a DARK image as a background in the homepage, for the project categories. 

   - this is to prevent a 1milisecond image jump that was really annoying

(2) Add the code you suggested, but with some modifications: 

     - Added a code to prevent the same image to show twice in a row after reload.
    - The images popped up abruptly, so now they have a 'fade-in' effect.  

CSS CODE 
 

.fade-in {
   opacity: 0;
   transition: opacity 1s ease-in-out;
 }
 .fade-in.show {
    opacity: 1;
 }



FOOTER CODE INJECTION

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  var images = [
    'https://images.squarespace-cdn.com/YOURIMAGE-1',
    'https://images.squarespace-cdn.com/YOURIMAGE-2',
    'https://images.squarespace-cdn.com/YOURIMAGE-3',
    'https://images.squarespace-cdn.com/YOURIMAGE-4',
    'https://images.squarespace-cdn.com/YOURIMAGE-5',
    'https://images.squarespace-cdn.com/YOURIMAGE-6',
    'https://images.squarespace-cdn.com/YOURIMAGE-7',
    'https://images.squarespace-cdn.com/YOURIMAGE-8',
    'https://images.squarespace-cdn.com/YOURIMAGE-9',
    'https://images.squarespace-cdn.com/YOURIMAGE-10'
  ];

  // Function to get a new random image that is not the same as the last one
  function getRandomImage() {
    var lastImage = localStorage.getItem('lastImage');
    var randImage;
    do {
      randImage = images[Math.floor(Math.random() * images.length)];
    } while (randImage === lastImage);
    localStorage.setItem('lastImage', randImage);
    return randImage;
  }

  var randImage = getRandomImage();
  var imgEl = document.querySelector(".homepage article.sections section:first-child .section-background img");

  imgEl.classList.add('fade-in'); // Add fade-in class
  imgEl.src = randImage + '?v=' + Math.random(); // Add a query parameter to prevent caching
  imgEl.setAttribute("srcset", "");

  imgEl.onload = function() {
    imgEl.classList.add('show'); // Add show class after image is loaded
  };
});
</script>

 

iScreen Shoter - Safari - 240703122800.jpg

Edited by A2_foto
forgot to add screenshot
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.