Adding JavaScript to Slideshow?

Question

I asked a question a few days ago about getting the height of images to adjust in Slideshow along with the width. Unfortunately, I received no responses.

So, I went about writing some JavaScript that adjusts images in a page the way I would like the images in Slideshow to be adjusted. The code works fine on regular Drupal pages, but does not work for the images in Slideshow.

Does anyone know how to get the JavaScript to work for the images in the Slideshow? I should state that I am brand new to coding and JavaScript, so there may be some issues with the code below, but it does work.

Here is the JavaScript code:

function myFunction() {
  var x = document.getElementsByClassName("slide");


  for (i = 0; i < x.length; i++) {
    var viewHeight = window.innerHeight;
    var viewWidth = window.innerWidth;
    var viewAspect = viewWidth / viewHeight;

    var imageHeight = x[i].height;
    var imageWidth = x[i].width;
    var imageAspect = imageWidth / imageHeight;


    if (imageAspect < viewAspect) {
        x[i].style.height = viewHeight + "px";
    }
    else {
        x[i].style.width = viewWidth + "px";        
    }
  }
}

window.onload = function() {
  myFunction();
};

window.onresize = function() {
  myFunction();
};

Answer 1

I ended up creating a regular view, not a slideshow. Then I used a variation on the code above to reshape the images. And I used CSS on the mini pager to turn it into the buttons that one would find in a typical slideshow. It turned out exactly how I wanted it. Although it took a lot of time and aggravation, I learned a bit more about about Drupal, JavaScript, and CSS. Plus, I can reuse the code again.

If anyone is interested, my final JavaScript code is below; there were a few minor problems with the code above that caused it to act wonky in certain resizing situations.

    function myFunction() {
      var x = document.getElementsByClassName("slide");


      for (i = 0; i < x.length; i++) {
        var viewHeight = window.innerHeight;
        var viewWidth = window.innerWidth;
        var viewAspect = viewWidth / viewHeight;

        var imageHeight = x[i].height;
        var imageWidth = x[i].width;
        var imageAspect = imageWidth / imageHeight;


        if (imageAspect < viewAspect) {
          x[i].style.height = viewHeight + "px";
          x[i].style.width = "auto";
          x[i].style.marginTop = - viewHeight/ 2 + "px";
          x[i].style.marginLeft = - x[i].width / 2 + "px";
        }
        else {
          x[i].style.width = viewWidth + "px";
          x[i].style.height = "auto";
          x[i].style.marginTop = - x[i].height / 2 + "px";
          x[i].style.marginLeft = - viewWidth / 2 + "px";       
        }
      }
    }

    window.onload = function() {
      myFunction();
    };

    window.onresize = function() {
        myFunction();
    };