search

francoischalifour / medium-zoom

🔎🖼 A JavaScript library for zooming images like Medium
https://medium-zoom.francoischalifour.com
MIT License
3.58k stars 162 forks source link

Support for Background Images #76

Closed chiragbhansali closed 5 years ago

chiragbhansali commented 5 years ago

Bug description

The zoom effect doesn't work with background images.

How to reproduce

Try using a background image and initializing it in the JS

  1. Run mediumZoom(selector, options)
  2. Click on the image
  3. See error

Expected behavior

Zoom will work with background images

Environment

francoischalifour commented 5 years ago

The background option behaves like the CSS background property. You can therefore add a background image to your zoom like so:

mediumZoom('#zoom', {
  background: 'url(image.jpg)',
})

Let me know if that helps.

swergas commented 5 years ago

I think he wanted to say that he would like medium-zoom to support zooming images that are defined using the background-image CSS property of any HTML element (instead of only img elements).

I would also be interested in this feature.

francoischalifour commented 5 years ago

Oh, I see. What's your use case?

swergas commented 5 years ago

My use case is the customization of a page that I have generated using https://grapesjs.com. GrapesJS shows cards that contain images set as background-image.

chiragbhansali commented 5 years ago

I would like to use this on https://blendy.ml. There are multiple <div>s that contain images set as background-image.

kirillgroshkov commented 3 years ago

My case is that I want to use medium-zoom on top of <v-img> from Vuetify. It uses background-image as well