Help with custom code

Design help Custom code
1

Hi,
I’m trying to recreate this functionality in Webflow:

in this project:
https://preview.webflow.com/preview/script-test?preview=8ce52112d9586486fa1e736a8bda8eb4

No matter what I do - paste all code with the embed function or as custom code, it doesn’t seem to work.

I’ve got the raw html file which works (pasted below) but when I input the same content in to webflow, it breaks.

Please help.

Thanks,

Dave

<!DOCTYPE html>
cropit 
<style>
  .cropit-preview {
    background-color: #f8f8f8;
    background-size: cover;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 7px;
    width: 250px;
    height: 250px;
  }

  .cropit-preview-image-container {
    cursor: move;
  }

  .image-size-label {
    margin-top: 10px;
  }

  input, .export {
    display: block;
  }

  button {
    margin-top: 10px;
  }
</style>
Resize image
Rotate counterclockwise Rotate clockwise 
  <button class="export">Export</button>
</div>

<script>
  $(function() {
    $('.image-editor').cropit({
      imageState: {
        src: 'http://lorempixel.com/500/400/',
      },
    });

    $('.rotate-cw').click(function() {
      $('.image-editor').cropit('rotateCW');
    });
    $('.rotate-ccw').click(function() {
      $('.image-editor').cropit('rotateCCW');
    });

    $('.export').click(function() {
      var imageData = $('.image-editor').cropit('export');
      window.open(imageData);
    });
  });
</script>
1 Like