-
Notifications
You must be signed in to change notification settings - Fork 0
/
Gallary.html
100 lines (78 loc) · 3.7 KB
/
Gallary.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallary example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.5.0/custom-elements.min.js" integrity="sha512-QEq2OoCw4DbyQHVHnjan2wOgKlnPHyUzB/OEpLKXk0OJyifj9a6ulr+tXPdmqx9dhIp9q3D+F9+zHaZE9XBo9Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="module" src="js/wcforge.js"></script>
<!-- From CDN -->
<script async type="module" src="https://unpkg.com/@power-elements/lazy-image/lazy-image.js"></script>
<style type="text/css">
html {
--lazy-image-width: 640px;
--lazy-image-height: 480px;
}
lazy-image {
width: var(--lazy-image-width);
height: var(--lazy-image-height);
}
.thumbnail {
max-width:20%;
max-height:200px;
cursor: pointer;
}
</style>
<style>
x-tab {
border: 1px solid black;
padding: 20px;
}
x-panel {
padding: 20px;
background-color: lightgray;
}
x-tab[selected] {
background-color: bisque;
}
x-tabs-view:not(:defined), x-tab:not(:defined), x-panel:not(:defined) {
display: block;
}
</style>
</head>
<body>
<x-tabs-view>
<x-tab role="heading" selected="true" slot="tab">Image</x-tab>
<x-panel role="region"hidden="true" slot="panel">
<img-slider loading="eager">
<img data-src="https://i.pinimg.com/originals/9a/be/5f/9abe5f0ad84b083a1a52dac183c7bc89.jpg" alt="kitten" />
<img data-src="https://i.ytimg.com/vi/gUIJ-UkQsXI/maxresdefault.jpg" alt="kitten" />
<img data-src="https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHx8&w=1000&q=80" alt="kitten" />
<img data-src="https://i.pinimg.com/originals/7a/af/0f/7aaf0f1d48f57b7779c0fbcf103c2d0f.jpg" alt="kitten" />
<img data-src="https://i.pinimg.com/736x/fa/5c/0a/fa5c0a171020251c2a7ad092542be066.jpg" alt="kitten" />
</img-slider>
</x-panel>
<x-tab role="heading" selected="false" slot="tab">Gallary</x-tab>
<x-panel role="region" hidden="true" slot="panel">
</x-panel>
<x-tab role="heading" selected="false" slot="tab">Tab 3</x-tab>
<x-panel role="region" hidden="true" slot="panel">Content 3</x-panel>
</x-tabs-view>
<!-- <lazy-image id="img" src="image.jpg" alt="Lazy Image">
</lazy-image>
<div>
<img src="https://i.ytimg.com/vi/gUIJ-UkQsXI/maxresdefault.jpg" alt="kitten" class="thumbnail" />
<img src="https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHx8&w=1000&q=80" alt="kitten" class="thumbnail" />
<img src="https://i.pinimg.com/originals/7a/af/0f/7aaf0f1d48f57b7779c0fbcf103c2d0f.jpg" alt="kitten" class="thumbnail" />
<img src="https://i.pinimg.com/originals/9a/be/5f/9abe5f0ad84b083a1a52dac183c7bc89.jpg" alt="kitten" class="thumbnail" />
<img src="https://i.pinimg.com/736x/fa/5c/0a/fa5c0a171020251c2a7ad092542be066.jpg" alt="kitten" class="thumbnail" />
</div> -->
<bindings>
<!-- <binding source=".thumbnail" target="#img" event="click" property="src" sourceproperty="src"></binding>
<binding source=".thumbnail:first-child" target="#img" event="load" property="src" sourceproperty="src"></binding>
-->
</bindings>
<script src="bindings.js"></script>
</body>
</html>