search

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
545 stars 32 forks source link

Is there any way to add Label on both of the images? #3

Closed jogeshpi03 closed 4 years ago

jogeshpi03 commented 4 years ago

I like to know if there is a way to add Labels on both of the images and highlight hover.

kylewetton commented 4 years ago

Hey mate, I've just added this feature for you

I've added two new options

For the default labels

{
    showLabels: true
}

For labels with options

{
  showLabels: true,
  labelOptions: {
    onHover: true,
    before: 'Draft',
    after: 'Final'
  }

Furthermore, if you'd like to style these, you can target the elements with

.icv__label for both, and .icv__label-before, .icv__label-after for the individual labels. Please let me know how this goes for you. If it all works the way you'd hope, I'll update the docs to include it. Thanks for using it!

jogeshpi03 commented 4 years ago

hello kyle, it is wonderful and thank you for this newer option.