uikit 3.11.2-dev.9433cd5fd → 3.11.2-dev.a87448e52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (221) hide show
  1. package/.eslintrc.json +4 -49
  2. package/.prettierignore +14 -0
  3. package/.prettierrc.json +13 -0
  4. package/.webstorm.js +3 -3
  5. package/CHANGELOG.md +37 -28
  6. package/build/.eslintrc.json +1 -3
  7. package/build/build.js +26 -28
  8. package/build/icons.js +7 -11
  9. package/build/less.js +48 -36
  10. package/build/package.json +2 -2
  11. package/build/prefix.js +21 -18
  12. package/build/publishDev.js +6 -8
  13. package/build/release.js +20 -17
  14. package/build/scope.js +21 -11
  15. package/build/scss.js +72 -39
  16. package/build/util.js +71 -62
  17. package/build/wrapper/icons.js +0 -2
  18. package/dist/css/uikit-core-rtl.css +118 -201
  19. package/dist/css/uikit-core-rtl.min.css +1 -1
  20. package/dist/css/uikit-core.css +118 -201
  21. package/dist/css/uikit-core.min.css +1 -1
  22. package/dist/css/uikit-rtl.css +120 -207
  23. package/dist/css/uikit-rtl.min.css +1 -1
  24. package/dist/css/uikit.css +120 -207
  25. package/dist/css/uikit.min.css +1 -1
  26. package/dist/js/components/countdown.js +88 -133
  27. package/dist/js/components/countdown.min.js +1 -1
  28. package/dist/js/components/filter.js +408 -439
  29. package/dist/js/components/filter.min.js +1 -1
  30. package/dist/js/components/lightbox-panel.js +1098 -1316
  31. package/dist/js/components/lightbox-panel.min.js +1 -1
  32. package/dist/js/components/lightbox.js +1144 -1393
  33. package/dist/js/components/lightbox.min.js +1 -1
  34. package/dist/js/components/notification.js +94 -114
  35. package/dist/js/components/notification.min.js +1 -1
  36. package/dist/js/components/parallax.js +345 -358
  37. package/dist/js/components/parallax.min.js +1 -1
  38. package/dist/js/components/slider-parallax.js +343 -357
  39. package/dist/js/components/slider-parallax.min.js +1 -1
  40. package/dist/js/components/slider.js +768 -843
  41. package/dist/js/components/slider.min.js +1 -1
  42. package/dist/js/components/slideshow-parallax.js +343 -357
  43. package/dist/js/components/slideshow-parallax.min.js +1 -1
  44. package/dist/js/components/slideshow.js +645 -793
  45. package/dist/js/components/slideshow.min.js +1 -1
  46. package/dist/js/components/sortable.js +587 -620
  47. package/dist/js/components/sortable.min.js +1 -1
  48. package/dist/js/components/tooltip.js +324 -356
  49. package/dist/js/components/tooltip.min.js +1 -1
  50. package/dist/js/components/upload.js +155 -167
  51. package/dist/js/components/upload.min.js +1 -1
  52. package/dist/js/uikit-core.js +5412 -6733
  53. package/dist/js/uikit-core.min.js +1 -1
  54. package/dist/js/uikit-icons.js +7 -9
  55. package/dist/js/uikit-icons.min.js +1 -1
  56. package/dist/js/uikit.js +8008 -9705
  57. package/dist/js/uikit.min.js +1 -1
  58. package/jsconfig.json +1 -1
  59. package/package.json +64 -60
  60. package/src/js/api/boot.js +25 -32
  61. package/src/js/api/component.js +15 -28
  62. package/src/js/api/global.js +6 -12
  63. package/src/js/api/hooks.js +14 -33
  64. package/src/js/api/instance.js +7 -15
  65. package/src/js/api/state.js +79 -100
  66. package/src/js/components/countdown.js +24 -50
  67. package/src/js/components/filter.js +70 -66
  68. package/src/js/components/index.js +13 -13
  69. package/src/js/components/internal/lightbox-animations.js +14 -25
  70. package/src/js/components/internal/slider-preload.js +37 -0
  71. package/src/js/components/internal/slider-transitioner.js +66 -45
  72. package/src/js/components/internal/slideshow-animations.js +46 -64
  73. package/src/js/components/lightbox-panel.js +107 -105
  74. package/src/js/components/lightbox.js +17 -39
  75. package/src/js/components/notification.js +49 -43
  76. package/src/js/components/parallax.js +16 -30
  77. package/src/js/components/slider-parallax.js +13 -23
  78. package/src/js/components/slider.js +95 -64
  79. package/src/js/components/slideshow-parallax.js +1 -1
  80. package/src/js/components/slideshow.js +15 -13
  81. package/src/js/components/sortable.js +125 -106
  82. package/src/js/components/tooltip.js +41 -31
  83. package/src/js/components/upload.js +52 -63
  84. package/src/js/core/accordion.js +53 -48
  85. package/src/js/core/alert.js +9 -17
  86. package/src/js/core/core.js +74 -53
  87. package/src/js/core/cover.js +11 -15
  88. package/src/js/core/drop.js +106 -92
  89. package/src/js/core/form-custom.js +20 -25
  90. package/src/js/core/gif.js +3 -7
  91. package/src/js/core/grid.js +57 -58
  92. package/src/js/core/height-match.js +16 -29
  93. package/src/js/core/height-viewport.js +28 -35
  94. package/src/js/core/icon.js +47 -52
  95. package/src/js/core/img.js +96 -77
  96. package/src/js/core/index.js +39 -39
  97. package/src/js/core/leader.js +9 -18
  98. package/src/js/core/margin.js +21 -37
  99. package/src/js/core/modal.js +49 -36
  100. package/src/js/core/nav.js +2 -4
  101. package/src/js/core/navbar.js +112 -88
  102. package/src/js/core/offcanvas.js +49 -53
  103. package/src/js/core/overflow-auto.js +13 -17
  104. package/src/js/core/responsive.js +14 -12
  105. package/src/js/core/scroll.js +10 -20
  106. package/src/js/core/scrollspy-nav.js +34 -31
  107. package/src/js/core/scrollspy.js +37 -54
  108. package/src/js/core/sticky.js +130 -91
  109. package/src/js/core/svg.js +68 -83
  110. package/src/js/core/switcher.js +47 -46
  111. package/src/js/core/tab.js +7 -10
  112. package/src/js/core/toggle.js +66 -67
  113. package/src/js/core/video.js +11 -22
  114. package/src/js/mixin/animate.js +19 -20
  115. package/src/js/mixin/class.js +2 -4
  116. package/src/js/mixin/container.js +7 -11
  117. package/src/js/mixin/internal/animate-fade.js +73 -30
  118. package/src/js/mixin/internal/animate-slide.js +58 -41
  119. package/src/js/mixin/internal/slideshow-animations.js +7 -14
  120. package/src/js/mixin/internal/slideshow-transitioner.js +10 -17
  121. package/src/js/mixin/media.js +5 -10
  122. package/src/js/mixin/modal.js +89 -66
  123. package/src/js/mixin/parallax.js +149 -106
  124. package/src/js/mixin/position.js +26 -20
  125. package/src/js/mixin/slider-autoplay.js +12 -21
  126. package/src/js/mixin/slider-drag.js +64 -65
  127. package/src/js/mixin/slider-nav.js +26 -35
  128. package/src/js/mixin/slider-reactive.js +2 -8
  129. package/src/js/mixin/slider.js +48 -55
  130. package/src/js/mixin/slideshow.js +13 -19
  131. package/src/js/mixin/togglable.js +89 -63
  132. package/src/js/uikit-core.js +2 -4
  133. package/src/js/uikit.js +2 -4
  134. package/src/js/util/ajax.js +20 -39
  135. package/src/js/util/animation.js +77 -75
  136. package/src/js/util/attr.js +17 -21
  137. package/src/js/util/class.js +14 -52
  138. package/src/js/util/dimensions.js +56 -43
  139. package/src/js/util/dom.js +44 -80
  140. package/src/js/util/env.js +7 -12
  141. package/src/js/util/event.js +60 -59
  142. package/src/js/util/fastdom.js +1 -6
  143. package/src/js/util/filter.js +17 -34
  144. package/src/js/util/index.js +0 -1
  145. package/src/js/util/lang.js +82 -121
  146. package/src/js/util/mouse.js +19 -17
  147. package/src/js/util/options.js +32 -46
  148. package/src/js/util/player.js +41 -36
  149. package/src/js/util/position.js +54 -46
  150. package/src/js/util/selector.js +43 -58
  151. package/src/js/util/style.js +39 -49
  152. package/src/js/util/viewport.js +75 -64
  153. package/src/less/components/base.less +10 -33
  154. package/src/less/components/flex.less +0 -9
  155. package/src/less/components/form-range.less +48 -95
  156. package/src/less/components/form.less +0 -1
  157. package/src/less/components/leader.less +0 -1
  158. package/src/less/components/lightbox.less +0 -1
  159. package/src/less/components/modal.less +3 -7
  160. package/src/less/components/navbar.less +0 -7
  161. package/src/less/components/progress.less +14 -36
  162. package/src/less/components/slider.less +0 -3
  163. package/src/less/components/slideshow.less +0 -3
  164. package/src/less/components/text.less +16 -32
  165. package/src/less/components/utility.less +22 -0
  166. package/src/scss/components/base.scss +10 -33
  167. package/src/scss/components/flex.scss +0 -9
  168. package/src/scss/components/form-range.scss +48 -95
  169. package/src/scss/components/form.scss +3 -4
  170. package/src/scss/components/icon.scss +2 -2
  171. package/src/scss/components/leader.scss +0 -1
  172. package/src/scss/components/lightbox.scss +0 -1
  173. package/src/scss/components/modal.scss +3 -7
  174. package/src/scss/components/navbar.scss +0 -7
  175. package/src/scss/components/progress.scss +14 -36
  176. package/src/scss/components/search.scss +1 -1
  177. package/src/scss/components/slider.scss +0 -3
  178. package/src/scss/components/slideshow.scss +0 -3
  179. package/src/scss/components/text.scss +16 -32
  180. package/src/scss/components/utility.scss +22 -0
  181. package/src/scss/mixins-theme.scss +1 -1
  182. package/src/scss/mixins.scss +1 -1
  183. package/src/scss/variables-theme.scss +9 -9
  184. package/src/scss/variables.scss +9 -9
  185. package/tests/align.html +10 -10
  186. package/tests/animation.html +2 -2
  187. package/tests/article.html +2 -2
  188. package/tests/base.html +3 -3
  189. package/tests/card.html +10 -10
  190. package/tests/column.html +3 -3
  191. package/tests/comment.html +9 -9
  192. package/tests/dotnav.html +3 -3
  193. package/tests/image.html +296 -48
  194. package/tests/images/image-type.avif +0 -0
  195. package/tests/images/image-type.jpeg +0 -0
  196. package/tests/images/image-type.webp +0 -0
  197. package/tests/index.html +8 -8
  198. package/tests/js/index.js +114 -85
  199. package/tests/lightbox.html +10 -10
  200. package/tests/marker.html +2 -2
  201. package/tests/modal.html +8 -9
  202. package/tests/navbar.html +2 -2
  203. package/tests/overlay.html +7 -7
  204. package/tests/parallax.html +14 -5
  205. package/tests/position.html +12 -12
  206. package/tests/slidenav.html +12 -12
  207. package/tests/slider.html +20 -20
  208. package/tests/sortable.html +1 -1
  209. package/tests/sticky-parallax.html +47 -62
  210. package/tests/svg.html +6 -6
  211. package/tests/table.html +11 -11
  212. package/tests/thumbnav.html +12 -12
  213. package/tests/transition.html +30 -30
  214. package/tests/utility.html +33 -33
  215. package/tests/video.html +1 -1
  216. package/tests/width.html +1 -1
  217. package/src/js/mixin/flex-bug.js +0 -56
  218. package/src/js/util/promise.js +0 -191
  219. package/tests/images/animated.gif +0 -0
  220. package/tests/images/test.avif +0 -0
  221. package/tests/images/test.webp +0 -0
package/tests/image.html CHANGED
@@ -14,23 +14,292 @@
14
14
 
15
15
  <h1>Image</h1>
16
16
 
17
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1495321308589-43affb814eee?fit=crop&w=1200&h=450&q=80" uk-img="loading: eager">
18
+ <h1>Background Image Loading Eager</h1>
19
+ </div>
20
+
21
+ <h2>Loading Lazy Attribute</h2>
22
+
17
23
  <div class="uk-child-width-1-2@m" uk-grid>
18
24
  <div>
19
- <img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
25
+ <img src="https://images.unsplash.com/photo-1476820865390-c52aeebb9891?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" loading="lazy">
26
+ <p class="uk-margin-small-top">Image</p>
20
27
  </div>
21
28
  <div>
22
- <img data-src="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
29
+ <picture>
30
+ <source srcset="https://images.unsplash.com/photo-1487958449943-2429e8be8625?fit=crop&w=580&h=386&q=80 580w,
31
+ https://images.unsplash.com/photo-1487958449943-2429e8be8625?fit=crop&w=900&h=600&q=80 900w"
32
+ media="(min-width: 1200px)">
33
+ <img src="https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=900&h=600&q=80"
34
+ srcset="https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=580&h=386&q=80 580w,
35
+ https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=900&h=600&q=80 900w"
36
+ sizes="(min-width: 960px) 580px, 100vw"
37
+ width="900" height="600" alt="" loading="lazy">
38
+ </picture>
39
+ <p class="uk-margin-small-top">Picture with Srcset</p>
23
40
  </div>
24
41
  </div>
25
42
 
26
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" data-sources="srcset: images/test.avif; type: image/avif" uk-img>
27
- <h1>Background Image</h1>
43
+ <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
44
+ <div>
45
+ <img src="https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=373&h=249&q=80"
46
+ srcset="https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=373&h=249&q=80 373w,
47
+ https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=746&h=498&q=80 746w"
48
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
49
+ width="746" height="498" alt="" loading="lazy">
50
+ </div>
51
+ <div>
52
+ <img src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=373&h=249&q=80"
53
+ srcset="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=373&h=249&q=80 373w,
54
+ https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=746&h=498&q=80 746w"
55
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
56
+ width="746" height="498" alt="" loading="lazy">
57
+ </div>
58
+ <div>
59
+ <img src="https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=373&h=249&q=80"
60
+ srcset="https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=373&h=249&q=80 373w,
61
+ https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=746&h=498&q=80 746w"
62
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
63
+ width="746" height="498" alt="" loading="lazy">
64
+ </div>
65
+ <div>
66
+ <img src="https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=373&h=249&q=80"
67
+ srcset="https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=373&h=249&q=80 373w,
68
+ https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=746&h=498&q=80 746w"
69
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
70
+ width="746" height="498" alt="" loading="lazy">
71
+ </div>
72
+ <div>
73
+ <img src="https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=373&h=249&q=80"
74
+ srcset="https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=373&h=249&q=80 373w,
75
+ https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=746&h=498&q=80 746w"
76
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
77
+ width="746" height="498" alt="" loading="lazy">
78
+ </div>
79
+ <div>
80
+ <img src="https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=373&h=249&q=80"
81
+ srcset="https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=373&h=249&q=80 373w,
82
+ https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=746&h=498&q=80 746w"
83
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
84
+ width="746" height="498" alt="" loading="lazy">
85
+ </div>
86
+ <div>
87
+ <img src="https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=373&h=249&q=80"
88
+ srcset="https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=373&h=249&q=80 373w,
89
+ https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=746&h=498&q=80 746w"
90
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
91
+ width="746" height="498" alt="" loading="lazy">
92
+ </div>
93
+ <div>
94
+ <img src="https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=373&h=249&q=80"
95
+ srcset="https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=373&h=249&q=80 373w,
96
+ https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=746&h=498&q=80 746w"
97
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
98
+ width="746" height="498" alt="" loading="lazy">
99
+ </div>
100
+ <div>
101
+ <img src="https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=373&h=249&q=80"
102
+ srcset="https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=373&h=249&q=80 373w,
103
+ https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=746&h=498&q=80 746w"
104
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
105
+ width="746" height="498" alt="" loading="lazy">
106
+ </div>
107
+ <div>
108
+ <img src="https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=373&h=249&q=80"
109
+ srcset="https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=373&h=249&q=80 373w,
110
+ https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=746&h=498&q=80 746w"
111
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
112
+ width="746" height="498" alt="" loading="lazy">
113
+ </div>
114
+ <div>
115
+ <img src="https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=373&h=249&q=80"
116
+ srcset="https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=373&h=249&q=80 373w,
117
+ https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=746&h=498&q=80 746w"
118
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
119
+ width="746" height="498" alt="" loading="lazy">
120
+ </div>
121
+ <div>
122
+ <img src="https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=373&h=249&q=80"
123
+ srcset="https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=373&h=249&q=80 373w,
124
+ https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=746&h=498&q=80 746w"
125
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
126
+ width="746" height="498" alt="" loading="lazy">
127
+ </div>
128
+ <div>
129
+ <img src="https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=373&h=249&q=80"
130
+ srcset="https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=373&h=249&q=80 373w,
131
+ https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=746&h=498&q=80 746w"
132
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
133
+ width="746" height="498" alt="" loading="lazy">
134
+ </div>
135
+ <div>
136
+ <img src="https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=373&h=249&q=80"
137
+ srcset="https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=373&h=249&q=80 373w,
138
+ https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=746&h=498&q=80 746w"
139
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
140
+ width="746" height="498" alt="" loading="lazy">
141
+ </div>
142
+ <div>
143
+ <img src="https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=373&h=249&q=80"
144
+ srcset="https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=373&h=249&q=80 373w,
145
+ https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=746&h=498&q=80 746w"
146
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
147
+ width="746" height="498" alt="" loading="lazy">
148
+ </div>
149
+ <div>
150
+ <img src="https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=373&h=249&q=80"
151
+ srcset="https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=373&h=249&q=80 373w,
152
+ https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=746&h=498&q=80 746w"
153
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
154
+ width="746" height="498" alt="" loading="lazy">
155
+ </div>
156
+ <div>
157
+ <img src="https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=373&h=249&q=80"
158
+ srcset="https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=373&h=249&q=80 373w,
159
+ https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=746&h=498&q=80 746w"
160
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
161
+ width="746" height="498" alt="" loading="lazy">
162
+ </div>
163
+ <div>
164
+ <img src="https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=373&h=249&q=80"
165
+ srcset="https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=373&h=249&q=80 373w,
166
+ https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=746&h=498&q=80 746w"
167
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
168
+ width="746" height="498" alt="" loading="lazy">
169
+ </div>
170
+ <div>
171
+ <img src="https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=373&h=249&q=80"
172
+ srcset="https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=373&h=249&q=80 373w,
173
+ https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=746&h=498&q=80 746w"
174
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
175
+ width="746" height="498" alt="" loading="lazy">
176
+ </div>
177
+ <div>
178
+ <img src="https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=373&h=249&q=80"
179
+ srcset="https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=373&h=249&q=80 373w,
180
+ https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=746&h=498&q=80 746w"
181
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
182
+ width="746" height="498" alt="" loading="lazy">
183
+ </div>
184
+ <div>
185
+ <img src="https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=373&h=249&q=80"
186
+ srcset="https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=373&h=249&q=80 373w,
187
+ https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=746&h=498&q=80 746w"
188
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
189
+ width="746" height="498" alt="" loading="lazy">
190
+ </div>
191
+ <div>
192
+ <img src="https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=373&h=249&q=80"
193
+ srcset="https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=373&h=249&q=80 373w,
194
+ https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=746&h=498&q=80 746w"
195
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
196
+ width="746" height="498" alt="" loading="lazy">
197
+ </div>
198
+ <div>
199
+ <img src="https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=373&h=249&q=80"
200
+ srcset="https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=373&h=249&q=80 373w,
201
+ https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=746&h=498&q=80 746w"
202
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
203
+ width="746" height="498" alt="" loading="lazy">
204
+ </div>
205
+ <div>
206
+ <img src="https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=373&h=249&q=80"
207
+ srcset="https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=373&h=249&q=80 373w,
208
+ https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=746&h=498&q=80 746w"
209
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
210
+ width="746" height="498" alt="" loading="lazy">
211
+ </div>
212
+ <div>
213
+ <img src="https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=373&h=249&q=80"
214
+ srcset="https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=373&h=249&q=80 373w,
215
+ https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=746&h=498&q=80 746w"
216
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
217
+ width="746" height="498" alt="" loading="lazy">
218
+ </div>
219
+ <div>
220
+ <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=373&h=249&q=80"
221
+ srcset="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=373&h=249&q=80 373w,
222
+ https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=746&h=498&q=80 746w"
223
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
224
+ width="746" height="498" alt="" loading="lazy">
225
+ </div>
226
+ <div>
227
+ <img src="https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=373&h=249&q=80"
228
+ srcset="https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=373&h=249&q=80 373w,
229
+ https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=746&h=498&q=80 746w"
230
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
231
+ width="746" height="498" alt="" loading="lazy">
232
+ </div>
28
233
  </div>
29
234
 
30
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" data-sources="[{&quot;srcset&quot;: &quot;images/test.avif&quot;, &quot;type&quot;: &quot;image/avif&quot;},{&quot;srcset&quot;: &quot;images/test.webp&quot;, &quot;type&quot;: &quot;image/webp&quot;}]" uk-img>
235
+ <h2>Background Image</h2>
236
+
237
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" uk-img>
31
238
  <h1>Background Image</h1>
32
239
  </div>
33
240
 
241
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
242
+ data-src="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80"
243
+ data-srcset="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=800&h=300&q=80 800w,
244
+ https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80 1200w,
245
+ https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=2400&h=900&q=80 2400w"
246
+ sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
247
+ <h1>Background Image with Srcset</h1>
248
+ </div>
249
+
250
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
251
+ sources="srcset: https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=1200&h=450&q=80; media: (min-width: 1200px)"
252
+ data-src="https://images.unsplash.com/photo-1546349851-64285be8e9fa?fit=crop&w=1200&h=450&q=8"
253
+ uk-img>
254
+ <h1>Background Picture</h1>
255
+ </div>
256
+
257
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
258
+ sources="srcset: https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=800&h=300&q=80 800w,
259
+ https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1200&h=450&q=80 1200w,
260
+ https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=2400&h=900&q=80 2400w; media: (min-width: 1200px)"
261
+ data-src="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1200&h=450&q=80"
262
+ data-srcset="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=800&h=300&q=80 800w,
263
+ https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1200&h=450&q=80 1200w,
264
+ https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=2400&h=900&q=80 2400w"
265
+ sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
266
+ <h1>Background Picture with Srcset</h1>
267
+ </div>
268
+
269
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
270
+ sources="[{&quot;srcset&quot;: &quot;images/image-type.avif&quot;,
271
+ &quot;type&quot;: &quot;image\/avif&quot;
272
+ },
273
+ {&quot;srcset&quot;: &quot;images/image-type.webp&quot;,
274
+ &quot;type&quot;: &quot;image\/webp&quot;
275
+ }]"
276
+ data-src="images/image-type.jpg"
277
+ uk-img>
278
+ <h1>Background Picture with Multiple Sources</h1>
279
+ </div>
280
+
281
+ <h2>uk-img with Image element (Deprecated)</h2>
282
+
283
+ <div class="uk-child-width-1-2@m" uk-grid>
284
+ <div>
285
+ <img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
286
+ <p class="uk-margin-small-top">Image</p>
287
+ </div>
288
+ <div>
289
+ <picture>
290
+ <source data-srcset="https://images.unsplash.com/photo-1447933601403-0c6688de566e?fit=crop&w=580&h=386&q=80 580w,
291
+ https://images.unsplash.com/photo-1447933601403-0c6688de566e?fit=crop&w=900&h=600&q=80 900w"
292
+ media="(min-width: 1200px)">
293
+ <img data-src="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80"
294
+ data-srcset="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=580&h=386&q=80 580w,
295
+ https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80 900w"
296
+ sizes="(min-width: 960px) 580px, 100vw"
297
+ width="900" height="600" alt="" uk-img>
298
+ </picture>
299
+ <p class="uk-margin-small-top">Picture with Srcset</p>
300
+ </div>
301
+ </div>
302
+
34
303
  <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
35
304
  <div>
36
305
  <img data-src="https://images.unsplash.com/photo-1523359247812-29dde5ac53a0?fit=crop&w=373&h=249&q=80"
@@ -222,34 +491,7 @@
222
491
  width="746" height="498" alt="" uk-img>
223
492
  </div>
224
493
  </div>
225
-
226
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
227
- data-src="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80"
228
- data-srcset="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=800&h=300&q=80 800w,
229
- https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80 1200w,
230
- https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=2400&h=900&q=80 2400w"
231
- sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
232
- <h1>Background Image</h1>
233
- </div>
234
-
235
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
236
- data-src="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=1200&h=450&q=80"
237
- data-srcset="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=800&h=300&q=80 800w,
238
- https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=1200&h=450&q=80 1200w,
239
- https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=2400&h=900&q=80 2400w"
240
- sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
241
- <h1>Background Image</h1>
242
- </div>
243
-
244
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
245
- data-src="https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1200&h=450&q=80"
246
- data-srcset="https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=800&h=300&q=80 800w,
247
- https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1200&h=450&q=80 1200w,
248
- https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=2400&h=900&q=80 2400w"
249
- sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
250
- <h1>Background Image</h1>
251
- </div>
252
-
494
+
253
495
  <div class="uk-child-width-1-2@m" uk-grid>
254
496
  <div>
255
497
 
@@ -257,28 +499,28 @@
257
499
 
258
500
  <ul class="uk-slideshow-items">
259
501
  <li>
260
- <img data-src="images/photo.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
502
+ <img data-src="images/photo.jpg" alt="" uk-cover uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
261
503
  <div class="uk-position-center uk-position-small uk-text-center">
262
504
  <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
263
505
  <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
264
506
  </div>
265
507
  </li>
266
508
  <li>
267
- <img data-src="images/dark.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !* +*">
509
+ <img data-src="images/dark.jpg" alt="" uk-cover uk-img="target: !* -*, !* +*">
268
510
  <div class="uk-position-center uk-position-small uk-text-center">
269
511
  <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
270
512
  <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
271
513
  </div>
272
514
  </li>
273
515
  <li>
274
- <img data-src="images/light.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !* +*">
516
+ <img data-src="images/light.jpg" alt="" uk-cover uk-img="target: !* -*, !* +*">
275
517
  <div class="uk-position-center uk-position-small uk-text-center">
276
518
  <h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
277
519
  <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
278
520
  </div>
279
521
  </li>
280
522
  <li>
281
- <img data-src="images/photo2.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
523
+ <img data-src="images/photo2.jpg" alt="" uk-cover uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
282
524
  <div class="uk-position-center uk-position-small uk-text-center">
283
525
  <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
284
526
  <p uk-slideshow-parallax="x: 0,0,-200">Lorem ipsum dolor sit amet.</p>
@@ -298,43 +540,43 @@
298
540
 
299
541
  <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m">
300
542
  <li>
301
- <img data-src="images/slider1.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
543
+ <img data-src="images/slider1.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
302
544
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
303
545
  </li>
304
546
  <li>
305
- <img data-src="images/slider2.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
547
+ <img data-src="images/slider2.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
306
548
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
307
549
  </li>
308
550
  <li>
309
- <img data-src="images/slider3.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
551
+ <img data-src="images/slider3.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
310
552
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
311
553
  </li>
312
554
  <li>
313
- <img data-src="images/slider4.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
555
+ <img data-src="images/slider4.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
314
556
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
315
557
  </li>
316
558
  <li>
317
- <img data-src="images/slider5.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
559
+ <img data-src="images/slider5.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
318
560
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
319
561
  </li>
320
562
  <li>
321
- <img data-src="images/slider1.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
563
+ <img data-src="images/slider1.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
322
564
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
323
565
  </li>
324
566
  <li>
325
- <img data-src="images/slider2.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
567
+ <img data-src="images/slider2.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
326
568
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
327
569
  </li>
328
570
  <li>
329
- <img data-src="images/slider3.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
571
+ <img data-src="images/slider3.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
330
572
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
331
573
  </li>
332
574
  <li>
333
- <img data-src="images/slider4.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
575
+ <img data-src="images/slider4.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
334
576
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
335
577
  </li>
336
578
  <li>
337
- <img data-src="images/slider5.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
579
+ <img data-src="images/slider5.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
338
580
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
339
581
  </li>
340
582
  </ul>
@@ -367,11 +609,17 @@
367
609
  <td>The image's `src` attribute.</td>
368
610
  </tr>
369
611
  <tr>
370
- <td><code>dataSources</code></td>
612
+ <td><code>sources</code></td>
371
613
  <td>String</td>
372
614
  <td>''</td>
373
615
  <td>The image's sources. This option is used for background images only. The sources attributes be passed in `key: value;` format for a single source. For multiple sources in JSON format.</td>
374
616
  </tr>
617
+ <tr>
618
+ <td><code>loading</code></td>
619
+ <td>`lazy`|`eager`</td>
620
+ <td>`lazy`</td>
621
+ <td>Enable lazy/eager loading. Set to `eager` for images within the first visible viewport.</td>
622
+ </tr>
375
623
  <tr>
376
624
  <td><code>offsetTop</code></td>
377
625
  <td>String</td>
package/tests/images/image-type.avif ADDED
Binary file
package/tests/images/image-type.jpeg ADDED
Binary file
package/tests/images/image-type.webp ADDED
Binary file
package/tests/index.html CHANGED
@@ -195,7 +195,7 @@
195
195
  <header class="uk-comment-header uk-position-relative">
196
196
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
197
197
  <div class="uk-width-auto">
198
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
198
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
199
199
  </div>
200
200
  <div class="uk-width-expand">
201
201
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -470,7 +470,7 @@
470
470
  <div>
471
471
 
472
472
  <div class="uk-inline">
473
- <img src="images/light.jpg" alt="">
473
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
474
474
  <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a>
475
475
  <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" uk-marker></a>
476
476
  <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a>
@@ -480,7 +480,7 @@
480
480
  <div>
481
481
 
482
482
  <div class="uk-inline-clip">
483
- <img src="images/photo.jpg" alt="">
483
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
484
484
  <div class="uk-overlay uk-overlay-default uk-position-bottom">
485
485
  <p>Default Lorem ipsum dolor sit amet, consectetur.</p>
486
486
  </div>
@@ -490,7 +490,7 @@
490
490
  <div>
491
491
 
492
492
  <div class="uk-inline-clip">
493
- <img src="images/photo.jpg" alt="">
493
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
494
494
  <div class="uk-overlay uk-overlay-primary uk-position-bottom">
495
495
  <p>Primary Lorem ipsum dolor sit amet, consectetur.</p>
496
496
  </div>
@@ -500,7 +500,7 @@
500
500
  <div>
501
501
 
502
502
  <div class="uk-inline uk-light">
503
- <img src="images/photo.jpg" alt="">
503
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
504
504
  <div class="uk-position-center">
505
505
  <span uk-overlay-icon></span>
506
506
  </div>
@@ -533,9 +533,9 @@
533
533
  <div>
534
534
 
535
535
  <ul class="uk-thumbnav">
536
- <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="60" alt=""></a></li>
537
- <li><a href="#"><img src="images/dark.jpg" width="60" alt=""></a></li>
538
- <li><a href="#"><img src="images/light.jpg" width="60" alt=""></a></li>
536
+ <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="60" height="40" alt=""></a></li>
537
+ <li><a href="#"><img src="images/dark.jpg" width="60" height="40" alt=""></a></li>
538
+ <li><a href="#"><img src="images/light.jpg" width="60" height="40" alt=""></a></li>
539
539
  </ul>
540
540
 
541
541
  </div>