Change Image on SquareSpace with jQuery

Question

Having trouble changing an image in Squarespace. I'm getting very close but I have not yet solved the problem.

I am trying to generate a random number, use that number to pick a photograph from my pictures array and replace the background of my gallery with that image.

My jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
 $(document).ready( function() { 
    const index = randomMove(0, pictures.length),
    picture = pictures[index];

   // Gets the img tag under the imageWrapper class
   const test = $('.imageWrapper > img');
   // Gets the first index of the div (the image I want to manipulate)
   const test1 = test[0];
   // trying to change the picture
   // I have tried attr('src', picture) as well and did not work
   const test2 = $(test1).data("currentSrc", picture);
 })

 const randomMove = (mi, ma) => {
  const min = Math.ceil(mi),
    max = Math.floor(ma),
    selection = Math.floor(Math.random() * (max - min) + min);

  return selection;
};

  const pictures = [
    "https://i.imgur.com/bsG8hx7.jpg",
    "https://i.imgur.com/Vuw28Lq.jpg",
    "https://i.imgur.com/09Cfuks.jpg",
    "https://i.imgur.com/3TRmorT.jpg",
    "https://i.imgur.com/JElBKPO.jpg",
    "https://i.imgur.com/eSTVz8D.jpg",
    "https://i.imgur.com/3n1z9uc.jpg",
    "https://i.imgur.com/aW5HWI5.jpg",
    "https://i.imgur.com/5uEtErN.jpg",
    "https://i.imgur.com/HMHehUy.jpg"
  ];
 </script>

I believe the biggest challenge with this problem is that the HTML uses "data-src" and "data-image" in contrast to just a "src". This also may not be the correct way to solve this problem.

Here is my error log: https://image.prntscr.com/image/JaArgLTOT0WHY0oCkVdPCA.png

Here is the HTML code that showcases the aforementioned data-src and data-image attributes: https://image.prntscr.com/image/n1ME_XpXShifytEOfFVV8w.png

Answer 1

Update

Commented 3 alternative jQuery statements that should help to manipulate a Squaresoft image (untested since I don't have a Squaresoft site)

---

You can dereference your jQuery Object to make it a plain object...

$('.imageWrapper img')[0].src

...and use simple properties like .src to manipulate the values.

Ref: Fisher-Yates Shuffle

See comments in demo for details

Demo

$(function() {
  const pictures = [
    "https://i.imgur.com/bsG8hx7.jpg",
    "https://i.imgur.com/Vuw28Lq.jpg",
    "https://i.imgur.com/09Cfuks.jpg",
    "https://i.imgur.com/3TRmorT.jpg",
    "https://i.imgur.com/JElBKPO.jpg",
    "https://i.imgur.com/eSTVz8D.jpg",
    "https://i.imgur.com/3n1z9uc.jpg",
    "https://i.imgur.com/aW5HWI5.jpg",
    "https://i.imgur.com/5uEtErN.jpg",
    "https://i.imgur.com/HMHehUy.jpg"
  ];

  // Callback function pass an array
  function changeImg(array) {

    // Pass the array to shuffle function get result
    var url = shuffle(array);

    /* Asign the result to src attribute of img
    || Note: the bracket notation [0]
    || this dereferences the jQuery Object, thus
    || changing it into a plain object
    || Once a plain object, simple properties
    || such as .src may be used.
    */
    $('.imageWrapper img')[0].src = url;

    // This is the equivelant in jQuery
    // $('.imageWrapper img').attr('src', url);

    /* Solution for Squaresoft images */
    /* This should work granted that the array pictures has
    || the appropriate urls pointing to images uploaded to
    || the site.
    */
    /* ALT 1. All attributes grouped
       $('.imageWrapper img').attr({
         'src': url+'?format=1500w',
         'data-src': url,
         'data-image': url
       });
    */
    /* ALT 2. attr() and .data() chained
       $('.imageWrapper img').att('src', url+'?format=1500w').data({'src': url, 'image':url});
    */
    /* ALT 3. Dereferenced jQObj and plain JavaScript
       $('.imageWrapper img')[0].src = url+'?format=1500w';
       $('.imageWrapper img')[0].setAttribute('data-src', url);
       $('.imageWrapper img')[0].setAttribute('data-image', url);
    */
  }


  // Fisher-Yates Shuffle 
  // https://stackoverflow.com/a/962890/2813224
  function shuffle(array) {
    var i = 0,
      j = 0,
      temp = null;

    for (i = array.length - 1; i > 0; i -= 1) {
      j = Math.floor(Math.random() * (i + 1))
      temp = array[i]
      array[i] = array[j]
      array[j] = temp
    }
    return array[j];
  }

  // Added for demo purposes
  $('button').on('click', function() {
    changeImg(pictures);
  });

});

<button>Change Image</button>
<section class='imageWrapper'>
  <img src='https://i.imgur.com/bsG8hx7.jpg'>
</section>






<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>