kylewetton / image-compare-viewer

Compare before and after images, for grading and other retouching for instance. Vanilla JS, zero dependencies.
https://image-compare-viewer.netlify.com
MIT License
553 stars 34 forks source link

Vanilla demo does not work at all #34

Closed dylanh724 closed 3 years ago

dylanh724 commented 3 years ago

Using CDN and template init code:

image

const element = document.getElementById("image-compare");

    const options = 
    {
        // UI Theme Defaults      
        controlColor: "#FFFFFF",
        controlShadow: true,
        addCircle: false,
        addCircleBlur: true,

        // Label Defaults      
        showLabels: true,
        labelOptions: 
        {
          before: '1',
          after: '2',
          onHover: false
        },

        // Smoothing [looks laggy]      
        smoothing: false,
        smoothingAmount: 100,

        // Other options      
        hoverStart: false,
        verticalMode: false,
        startingPoint: 75,
        fluidMode: true
      };

      // Add your options object as the second argument
      const viewer = new ImageCompare(element, options).mount();

image

Chrome desktop, latest, Win10.

Should I serve locally? Any known issue of this? Why is there even a jQuery (3.6.0) clash, I wonder?

dylanh724 commented 3 years ago

Update: Same err with local instead of CDN

dylanh724 commented 3 years ago

The problem is actually worse than I thought - opening a new ticket. The github demo doesn't work.