added random selection to home page squares

index.html

@@ -132,7 +132,7 @@ <h1 style="margin-bottom:0px;color:white;">Street</h1>
               <h5 style="color:white;">International</h5>
               <a href="streetinternational.html" class="btn btn-outline-white py-2 px-4">More Photos</a>
             </div>
-            <img src="images/fulls/granadabridesmaidssquare.jpg" alt="Image" class="img-fluid">
+            <img id='intStreetImg' src="" alt="Image" class="img-fluid">
           </div>
         </div>
         <div class="col-lg-6">
@@ -142,7 +142,7 @@ <h1 style="margin-bottom:0px;color:white;">Street</h1>
               <h5 style="color:white;">USA</h5>
               <a href="streetusa.html" class="btn btn-outline-white py-2 px-4">More Photos</a>
             </div>
-            <img src="images/fulls/ashevillebikeridersquare.jpg" alt="Image" class="img-fluid">
+            <img id='usaStreetImg' src="" alt="Image" class="img-fluid">
           </div>
         </div>
         <div class="col-lg-6">
@@ -152,7 +152,7 @@ <h1 style="margin-bottom:0px;color:white;">Travel</h1>
               <h5 style="color:white;">International</h5>
               <a href="travelinternational.html" class="btn btn-outline-white py-2 px-4">More Photos</a>
             </div>
-            <img src="images/fulls/helsingor1square.jpg" alt="Image" class="img-fluid">
+            <img id='intTravelImg' src="" alt="Image" class="img-fluid">
           </div>
         </div>
         <div class="col-lg-6">
@@ -162,7 +162,7 @@ <h1 style="margin-bottom:0px;color:white;">Travel</h1>
               <h5 style="color:white;">USA</h5>
               <a href="travelusa.html" class="btn btn-outline-white py-2 px-4">More Photos</a>
             </div>
-            <img src="images/fulls/cliffjumpsquare.jpg" alt="Image" class="img-fluid">
+            <img id='usaTravelImg' src="" alt="Image" class="img-fluid">
           </div>
         </div>
 
@@ -172,7 +172,7 @@ <h5 style="color:white;">USA</h5>
               <h1 style="color:white;">Greenville Area</h1>
               <a href="greenvillearea.html" class="btn btn-outline-white py-2 px-4">More Photos</a>
             </div>
-            <img src="images/fulls/greenvillescheronsquare.jpg" alt="Image" class="img-fluid">
+            <img id='greenvilleAreaImg' src="" alt="Image" class="img-fluid">
           </div>
         </div>
         <!-- <div class="col-lg-6">
@@ -199,6 +199,25 @@ <h1 style="color:white;">Windows of the World</h1>
 
   </div>
 
+  <script>
+    function getRandomInt(min, max) {
+      min = Math.ceil(min);
+      max = Math.floor(max);
+      return Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive
+    }
+
+    let greenvilleAreaImg = document.getElementById('greenvilleAreaImg');
+    let usaTravelImg = document.getElementById('usaTravelImg');
+    let intTravelImg = document.getElementById('intTravelImg');
+    let usaStreetImg = document.getElementById('usaStreetImg');
+    let intStreetImg = document.getElementById('intStreetImg');
+    intStreetImg.src = 'images/fulls/homepagesquareimages/intstreet/' + getRandomInt(1, 3) + '.jpg';
+    usaStreetImg.src = 'images/fulls/homepagesquareimages/usastreet/' + getRandomInt(1, 3) + '.jpg';
+    intTravelImg.src = 'images/fulls/homepagesquareimages/inttravel/' + getRandomInt(1, 4) + '.jpg';
+    usaTravelImg.src = 'images/fulls/homepagesquareimages/usatravel/' + getRandomInt(1, 3) + '.jpg';
+    greenvilleAreaImg.src = 'images/fulls/homepagesquareimages/greenvillearea/' + getRandomInt(1, 2) + '.jpg';
+  </script>
+
   <script src="assets/js/jquery-3.3.1.min.js"></script>
   <script src="assets/js/jquery-migrate-3.0.1.min.js"></script>
   <script src="assets/js/jquery-ui.js"></script>

streetinternational.html

@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
   <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
 
-  <link rel="stylesheet" href="assets/css/lightgallery.min.css">    
+  <link rel="stylesheet" href="assets/css/lightgallery.min.css">
 
   <link rel="stylesheet" href="assets/css/bootstrap-datepicker.css">
 
@@ -143,8 +143,8 @@ <h4 class="text-center">International</h4>
           <div class="col-sm-6 col-md-4 col-lg-3 col-xl-3 item" data-aos="fade" data-src="images/fulls/rondastreet1.jpg" data-sub-html="<h4>Ronda, Spain | 2023</h4><p>Sony a6600 + Tamron 17-70mm f/2.8</p>">
             <a href="#"><img src="images/thumbs/rondastreet1thumb.jpg" alt="IMage" class="img-fluid"></a>
           </div>
-          <div class="col-sm-6 col-md-4 col-lg-3 col-xl-3 item" data-aos="fade" data-src="images/fulls/malagacheers.jpg" data-sub-html="<h4>Málaga, Spain | 2023</h4><p>Nikon N65 + Sigma 28-70mm f/2.8-4 + Fujifilm Superia 400</p>">
-            <a href="#"><img src="images/thumbs/malagacheersthumb.jpg" alt="IMage" class="img-fluid"></a>
+          <div class="col-sm-6 col-md-4 col-lg-3 col-xl-3 item" data-aos="fade" data-src="images/fulls/malagacheers_cropped.jpg" data-sub-html="<h4>Málaga, Spain | 2023</h4><p>Nikon N65 + Sigma 28-70mm f/2.8-4 + Fujifilm Superia 400</p>">
+            <a href="#"><img src="images/thumbs/malagacheers_croppedthumb.jpg" alt="IMage" class="img-fluid"></a>
           </div>
           <div class="col-sm-6 col-md-4 col-lg-3 col-xl-3 item" data-aos="fade" data-src="images/fulls/madridfire.jpg" data-sub-html="<h4>Madrid, Spain | 2023</h4><p>Nikon N65 + Nikkor 35mm f/1.8G ED + Kodak Tri-X 400</p>">
             <a href="#"><img src="images/thumbs/madridfirethumb.jpg" alt="IMage" class="img-fluid"></a>
@@ -180,10 +180,10 @@ <h4 class="text-center">International</h4>
       </div>
     </div>
 
-
 
-
-
+
+
+
   </div>
   <script src="assets/js/jquery-3.3.1.min.js"></script>
   <script src="assets/js/jquery-migrate-3.0.1.min.js"></script>
@@ -203,7 +203,7 @@ <h4 class="text-center">International</h4>
   <script src="assets/js/jquery.mousewheel.min.js"></script>
 
   <script src="assets/js/main.js"></script>
-  
+
   <script>
     $(document).ready(function(){
       $('#lightgallery').lightGallery({