JavaScript - Resize Images with a Slider

From NoskeWiki
Jump to navigation Jump to search
Slider resizes all images (matching a classname)


About

NOTE: This page is a daughter page of: JavaScript


The slider below resize all images matching a drop down. It builds on my CSS - Centered Thumbnail Display page.


Slider to resize images, including center cropping example

slider_that_resizes_images.html: 

<html>
<head>

  <style>
  .image_box {
    background-color: #fafafa;
    height: 160px;
    width: 160px;
    border-style: solid;
    border-width: 1px;
    border-color: #eaeaea;
    display: inline-block;
    position: relative;
  }
  .image_thumbnail {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .center_cropped {
    object-fit: cover;         /* Scale the image so it covers whole area */
    object-position: center;   /* Center the image within the element */
    height: 100%;
    width: 100%;
  }
  </style>

  <script>
    
  /**
   * Resizes all `image_box` div/images.
   * @param {Number} rangeValue Slider value between 1 and 100.
   */
  function changeImageSizeWithSlider(sideLength)
  {
    var sideLengthStr = (sideLength + "px");
    var imageBoxes = document.getElementsByClassName("image_box");

    for (var i = 0; i < imageBoxes.length; i++) {
      imageBoxes[i].style.width = sideLengthStr;
      imageBoxes[i].style.height = sideLengthStr;
    }
    
    // Little images look nicer when center cropped:
    var centerCrop = sideLength < 150;
    changeImagesToCenterCrop(centerCrop);
  }
    
  /**
   * Center crops all `image_thumbnail` div/images or not.
   * @param {bool} centerCrop Whether to apply center crop.
   */
  function changeImagesToCenterCrop(centerCrop)
  {
    var imageBoxes = document.getElementsByClassName("image_thumbnail");
    for (var i = 0; i < imageBoxes.length; i++) {
      if (centerCrop) {
        imageBoxes[i].classList.add("center_cropped");
      } else {
        imageBoxes[i].classList.remove("center_cropped");
      }
    }
  }

  </script>
  
</head>
  
  
<body>

  Resize images below:
  <input type="range" min="50" max="500" value="160"
         class="slider" id="range-image-size"
         oninput="changeImageSizeWithSlider(this.value)"> <br><hr>

  <div class="image_box"><img src="http://lorempixel.com/800/1200/" class="image_thumbnail"></div>
  <div class="image_box"><img src="http://lorempixel.com/1200/800/" class="image_thumbnail"></div>
  
</body>
</html>


Code license
For all of the code on my site... if there are specific instruction or licence comments please leave them in. If you copy my code with minimum modifications to another webpage, or into any code other people will see I would love an acknowledgment to my site.... otherwise, the license for this code is more-or-less WTFPL (do what you want)! If only copying <20 lines, then don't bother. That said - if you'd like to add a web-link to my site www.andrewnoske.com or (better yet) the specific page with code, that's a really sweet gestures! Links to the page may be useful to yourself or your users and helps increase traffic to my site. Hope my code is useful! :)


Retrieved from "http://andrewnoske.com/w/index.php?title=JavaScript_-_Resize_Images_with_a_Slider&oldid=1315"