search

francoischalifour / medium-zoom

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

Using medium-zoom on a div with a background image #173

Closed noctivityinc closed 3 years ago

noctivityinc commented 3 years ago

The problem

A concise description of why you want a new feature.

We use image grids throughout the site with divs that set the image as the background image. We would like to be able to zoom on those images using medium-zoom, perhaps by simply specifying a data attribute that would get used as the source of the image to display.

Solution

A clear description of what you want to happen.

Something like this:

<div class="image-grid-item" style="background-image: url('//cdn.shopify.com/s/files/1/0241/7757/3943/products/organic-turmeric-08_large.jpg?v=1619114830');" data-zoomable="" data-zoom-src="//cdn.shopify.com/s/files/1/0241/7757/3943/products/organic-turmeric-08_large.jpg?v=1619114830"></div>

so that we can zoom an image that is displayed as a background image.

Implementation

Do you have an idea how it could be implemented?

See above

M-ZubairAhmed commented 3 years ago

@francoischalifour any updates on this one ?

francoischalifour commented 3 years ago

Medium Zoom was developed for image elements and not CSS properties, so this won't be supported in the library, sorry.