If you're interested in contributing, check out the guidelines here.When you run a Shopify store, you may have to encounter with multiple challenging tasks. And if you want to talk through ideas first, check out the discussions page. If there's a demand for additional triggers or other functionality, I'd be open to looking into it so feel free to ask. For example, I chose click to zoom as the default because it's been the most requested on product detail pages I've worked on. Most of the implementation choices for this component are based on use cases I've encountered in the past. This is useful for using newer formats like WebP. The component looks for the following optional properties and you can find additional details on responsive images here: PropĪn attribute containing a media condition for use with the srcset.Īn image MIME type. This prop accepts an array of objects which it uses to create a picture tag and source elements.
If set to true, zoom out is triggered by tap.Ĭustom classname for styling the component. The maximum breakpoint for fullscreen zoom image when fullscreenOnMobile is true. If zooming in on transparent images, set this to 0 for best results.Įnables fullscreen zoomed image on touch devices below a specified breakpoint. When using hover, combine with zoomPreload to avoid flickering on rapid mouse movements.įade transition time in milliseconds. The user behavior for moving zoomed images on non-touch devices.Ĭlick or hover. If set to true, preloads the zoom image instead of waiting for mouseenter and (unless on a touch device) persists the image on mouseleave. This will generally be a decimal (example, 0.9 for 90%). Multiplied against the natural width and height of the zoomed image. Falls back to original image src if not defined. The imgAttributes keys should follow the React DOM element naming conventions. Img and global attributes for the original image (excluding src, width, height, and style which are set elsewhere). If true, gets the original image's aspect ratio based on the width and height props and creates a spacer to prevent cumulative layout shift. Props PropĪ list of image sources for using the picture tag to serve the appropriate original image (see below for more details). For additional examples, visit the demo page. Import InnerImageZoom from 'react-inner-image-zoom'
0 kommentar(er)
