1.5.1 • Published 6 months ago
@dreamworld/dw-image v1.5.1
dw-image
A WebComponent to show zoomable image on documentation & blog sites.
Behaviours
- Auto compute height or width based on
auto
property, give another value as a css of element. - When user click on image, then image open in dialog using
zoomSrc
property. ifzoomSrc
is not available then usesrc
property to show image in dialog. - If you want to disable the above zoomable behaviour then
disableZoom
property passed as atrue
.
Examples
Default example
<dw-image src='https://picsum.photos/id/237/200/300' zoom-src='https://picsum.photos/id/237/1000/1000'></dw-image>
<!-- In this above case you give a height css property as an element. --> dw-image { width: 200px; }
Auto width
<dw-image auto='width' src='https://picsum.photos/id/237/200/300' zoom-src='https://picsum.photos/id/237/1000/1000'></dw-image>
Auto none
<dw-image auto='none' src='https://picsum.photos/id/237/200/300' zoom-src='https://picsum.photos/id/237/1000/1000'></dw-image>
<!-- In this above case you give a height css property as an element. --> dw-image { height: 200px; }
Disabled zoomable behaviour and open link click on image.
<a href="https://www.google.com/"> <dw-image src='https://picsum.photos/id/237/200/300' disable-zoom></dw-image> </a>
Properties
Property | Attribute | Type | Description |
---|---|---|---|
auto | auto | string | Auto compute css property name.Default value: heightPossible value: height, width, none. |
disableZoom | disable-zoom | boolean | Disabled zoom behaviour when this value is true . |
src | src | string | Image path/source. |
title | title | string | Image title. |
zoomSrc | zoom-src | string | Zoomable image path. |
1.5.1
6 months ago
1.5.0
6 months ago
1.5.1-change-in-fallbacksrc.1
6 months ago
1.5.0-fallBackSrc-support.1
6 months ago
1.4.3-event-issue.1
1 year ago
1.4.2-full-screen-issue.1
1 year ago
1.2.0
1 year ago
1.1.0
1 year ago
1.0.0
1 year ago
1.4.6
1 year ago
1.4.5
1 year ago
1.4.5-dw-image-loading.1
1 year ago
1.4.4
1 year ago
1.4.3
1 year ago
1.4.2
1 year ago
1.4.1
1 year ago
1.2.3
1 year ago
1.4.0
1 year ago
1.3.1
1 year ago
1.2.2
1 year ago
1.3.0
1 year ago
1.2.1
1 year ago
1.2.2-image-title-issue.1
1 year ago
1.4.1-full-screen-misc.1
1 year ago
1.4.0-full-screen.1
1 year ago
1.4.4-event-issue.1
1 year ago
1.3.0-image-max-width.1
1 year ago
1.1.0-dw-image-as-es-module.1
1 year ago
1.3.1-image-lazy-loading.1
1 year ago
1.3.0-outside-click-close-image.1
1 year ago
1.4.3-chagne-css-property.1
1 year ago
1.0.0-init.1
1 year ago