Beerslider.js stop working properly when new image is loaded into beer-reveal

Question

I use beerslider.js to show a before and after image of an object.

What I want is to give the user a possibilty to get a preview of the images that they uploads before they get saved. If they are not happy with the result they can change the images in the preview by uploading new/other images. But when they upload a new/other image to the img-element inside the div-element with the beer-reveal class the initial height differs from the height of the img in the div with the beer-slider class, and when the handle is slided not only is the width changed, also the height. See images:

First time works fine:

But from second upload all go wrong

I can change the img src in the div with class "beer-slider" as many times I want without problems. It is also this image that defines the height of the preview. But the problems reveal itself when I change the img src in the div with class "beer-reveal".

The hat picture above has a natural size of 708*796, and is showed as 340*382. The other picture is 607*607.

In the code below it is first checked if their exists image urls. If their exist none, then none img-elements will exist inside the beer-slide div and the beer-reveal div. There will never exist img-urls where one is null and the other is different from null. When user uploads new/other images, that images is sent to server for some operations before they are returned back as a base64 image format and injected into new img src.

In short I do the following:

// Hook beerslider on jquery-elements:
$.fn.BeerSlider = function ( options ) {
  options = options || {};
  return this.each(function() {
      new BeerSlider(this, options);
  });
};


// I only show the preview-mapping for the first image. It is the same for the second image, except imageReload takes in ".beer-slider" and not ".beer-reveal" as argument:

// When new picture is selected:
$("#file1").on("change", function(e){
  var formData = new FormData();
  var file = this.files[0];
  formData.append("file", file);
  imageReload("https://i.ibb.co/7jxDhcc/nikecom-homepage.jpg",".beer-reveal");
  // AJAX call to server to do something with it
  /*$.ajax({
    url:"/Picture/SomeOperation",
    data: formData,
    type: "POST",
    processData: false,
    contentType: false, 
    success: function(data){
        // data/image is returned in base64 format: (data:image/{mimetype};base64,/9j…Aduuawc8Y6j.....).
        imageReload(data, ".beer-reveal");
  }*/
 });
$("#file2").on("change", function(e){
  imageReload("https://i.ibb.co/YtP8r8j/17mai.jpg",".beer-slider");
 });


function imageReload(data, selectorBefore) 
{
// If parent div contains img-elemnt, remove it:
if($(selectorBefore).find("> img").length)
{
  $(selectorBefore).find("> img").remove();
}
// Add new img-elemnt with img-src as base64:
var img = document.createElement("img");
img.src = data;
img.setAttribute("class", "imageBody");
$(selectorBefore).prepend(img); 
$(".beer-slider").BeerSlider({start: 50});
}

$(document).ready(function(){
  $(".beer-slider").BeerSlider({start: 50});
});

.image-box {
    width: 100%;
}

#imagebody {
    width: 100%;
    height: auto;
}

<link href="https://unpkg.com/beerslider/dist/BeerSlider.css" rel="stylesheet"/>

<!-- Input-elements -->
<!-- Picture before (image that is mapped to div with class "beer-slider") -->
<input id="file2" name="file2" type="file">

<!-- Picture after (image that is mapped to div with class "beer-reveal") -->
<input id="file1" name="file1" type="file">

<!-- Beerslider/preview -->
<div class="image-box">
  <div class="beer-slider" data-beer-label="After">
    <img id="img-slider" class="imagebody"  src="https://i.ibb.co/LnbTfvp/Mr-Bean.jpg">
    <div class="beer-reveal" data-beer-label="Before">
      <img id="img-reveal" class="imagebody" src="https://i.ibb.co/YcD9zqf/1565567946098.jpg">
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script>

You can try it! It does not matter what images you choose on your local computer. When you have changed left input all is still fine, but when you change the right input the error is a fact.

I am stuck and help would be quite lovely.

Answer 1

I solved it by rewrite the imageReload function:

function imageReload(data, selectorBefore) 
{
   // Remove old image
   if($(selectorBefore).find("> img").length)
   {
      $(selectorBefore).find("> img").remove();
   }
   // Make new image with new src and class
   var img = document.createElement("img");
   img.src = data;
   img.setAttribute("class", "imageBody");

   // Replace the hole beerslider div
   // Is it the before-image?
   var førBilde = selectorBefore.localeCompare(".beer-reveal");
   if(førBilde == 0) // yes
   {
      var srcEtterBilde = $(".beer-slider > img").attr("src");
      img.setAttribute("id", "forhåndsvisning-bilde-før");
      $(".beer-slider").remove();
      var html = '<div class="beer-slider" data-beer-label="Etter">' +
                    '<img class="imagebody" id="forhåndsvisning-bilde-etter"   src="' +srcEtterBilde +'">'+
                       '<div class="beer-reveal" data-beer-label="Før">' +
                       '</div>' +
                 '</div>';
      $(".image-box").append(html);
      $(".beer-reveal").prepend(img);
      $(".beer-slider").BeerSlider({start: 50});
   }
   else // no
   {
      var srcFørBilde = $(".beer-reveal > img").attr("src");
      img.setAttribute("id", "forhåndsvisning-bilde-etter");
      $(".beer-slider").remove();
      var html = '<div class="beer-slider" data-beer-label="Etter">' +        
                    '<div class="beer-reveal" data-beer-label="Før">' +
                       '<img class="imagebody" id="forhåndsvisning-bilde-etter" src="' +srcFørBilde +'">'+
                    '</div>' +
                 '</div>';
      $(".image-box").append(html);
      $(".beer-slider").prepend(img);
      $(".beer-slider").BeerSlider({start: 50});
   }
}