You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
zIndex | Number | `1` | | Option to control layer positions
69
-
animationTime | Number | `300` | | Animation speed in milliseconds
70
-
in / out | String | `zoom-in / zoom-out` | | The cursor property specifies the mouse cursor to be displayed when pointing over an element
71
-
color | String | `#fff` | | Overlay layer color, hex only
72
-
opacity | Number | `100` | | Overlay layer opacity, number must be an integer, maximum number 100
73
-
onLoaded | Function | | | A helper function with which we can, for example, add text from the caption to the photo to show when zooming in on the photo. In the function we have access to the image element
74
-
onCleared | Function | | | A function that runs when the photo is closed. It can be combined with the function `onLoaded` see example. As in the previous `onLoaded` function, here we have access to the image element
| zIndex | Number |`1`|| Option to control layer positions |
76
+
| animationTime | Number |`300`|| Animation speed in milliseconds |
77
+
| in / out | String |`zoom-in / zoom-out`|| The cursor property specifies the mouse cursor to be displayed when pointing over an element |
78
+
| color | String |`#fff`|| Overlay layer color, hex only |
79
+
| opacity | Number |`100`|| Overlay layer opacity, number must be an integer, maximum number 100 |
80
+
| onResize | Function ||| A function that can be used to block clicking on an image. See example below - How to prevent zoom-in/out images |
81
+
| onOpen | Function ||| A helper function with which we can, for example, add text from the caption to the photo to show when zooming in on the photo. In the function we have access to the image element |
82
+
| onClose | Function ||| A function that runs when the photo is closed. It can be combined with the function `onOpen` see example. As in the previous `onOpen` function, here we have access to the image element |
83
+
84
+
## Minimal configuration
85
+
86
+
```javascript
87
+
newZooom('img-zoom');
88
+
```
75
89
76
90
## Sample configuration
91
+
77
92
```javascript
78
93
newZooom('img-zoom', {
79
94
zIndex:9,
80
-
95
+
81
96
// animation time in number
82
97
animationTime:300,
83
-
98
+
84
99
// cursor type
85
100
cursor: {
86
101
in:'zoom-in',
87
-
out:'zoom-out'
102
+
out:'zoom-out',
88
103
},
89
104
90
105
overlay: {
91
-
92
106
// hex or color-name
93
107
color:'#fff',
94
-
108
+
95
109
// [10, 20, 34, ..., 100] maximum number 100
96
110
opacity:80,
97
111
},
98
112
99
113
// callback function
100
114
// see usage example docs/index.html
101
-
onLoaded:function(element) {},
102
-
onCleared:function(element) {}
115
+
onResize:function () {},
116
+
onOpen:function (element) {},
117
+
onClose:function (element) {},
103
118
});
104
119
```
105
120
106
-
## Minimal configuration
107
-
```javascript
108
-
newZooom('img-zoom');
109
-
```
110
-
111
121
## How to use Zooom with Bootstrap Carousel
122
+
112
123
See an [example](https://codepen.io/Tomik23/full/VwPmLqX)
124
+
113
125
```javascript
114
126
newZooom('img-zoom', {
115
127
zIndex:9,
116
-
128
+
117
129
// animation time in number
118
130
animationTime:300,
119
-
131
+
120
132
// cursor type
121
133
cursor: {
122
134
in:'zoom-in',
123
-
out:'zoom-out'
135
+
out:'zoom-out',
124
136
},
125
137
overlay: {
126
-
127
138
// hex or color-name
128
139
color:'#fff',
129
-
140
+
130
141
// [10, 20, 34, ..., 100] maximum number 100
131
142
opacity:80,
132
143
},
133
144
134
145
// callback function
135
146
// see usage example docs/index.html
136
-
onLoaded:function(element) {
137
-
147
+
onOpen:function (element) {
138
148
// we stop automatic scrolling when we do zoom images
139
149
$('.carousel').carousel('pause');
140
150
},
141
-
142
-
onCleared:function(element) {
143
-
151
+
152
+
onClose:function (element) {
144
153
// we restart the carousels after closing the photo
145
154
$('.carousel').carousel('cycle');
146
-
}
155
+
},
156
+
});
157
+
```
158
+
159
+
## How to prevent zoom-in/out images
160
+
161
+
Below is an example showing how to block a click when the browser width is less than 600px
162
+
Of course, here is an example with the width of the window, but nothing prevents you from using it in a different way. The most important thing is to return the logical value - `true/false`. Each `reduction/reduction` of the window reads this variable and blocks the click.
0 commit comments