-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-2.html
122 lines (107 loc) · 4.47 KB
/
index-2.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!-- setup exmample using html markup -->
<div data-nanogallery2 = '{
<!-- ### gallery settings ### -->
"thumbnailHeight": 150,
"thumbnailWidth": 150,
"itemsBaseURL": "http://nanogallery2.nanostudio.org/samples/"
}'>
<!-- ### gallery content ### -->
<a href="img_01.jpg" data-ngthumb="img_01t.jpg">Title Image 1</a>
<a href="img_02.jpg" data-ngthumb="img_02t.jpg">Title Image 2</a>
<a href="img_03.jpg" data-ngthumb="img_03t.jpg">Title Image 3</a>
</div>
<!-- setup example using javascript -->
$("#my_nanogallery2").nanogallery2({
<!-- ### gallery settings ### -->
thumbnailHeight: 150,
thumbnailWidth: 150,
itemsBaseURL: 'http://nanogallery2.nanostudio.org/samples/',
<!-- ### gallery content ### -->
items: [
{ src: 'img_01.jpg', srct: 'img_01t.jpg', title: 'Title Image 1' },
{ src: 'img_02.jpg', srct: 'img_02t.jpg', title: 'Title Image 2' },
{ src: 'img_03.jpg', srct: 'img_03t.jpg', title: 'Title Image 3' }
]
});
<!-- the end -->
<!-- image gallery -->
<div id="my_nanogallery2" data-nanogallery2></div>
<script>
$(document).ready(function () {
$("#my_nanogallery2").nanogallery2({
items: [
{
src: 'image_01.jpg', // image url
srct: 'image_01ts.jpg', // thumbnail url
title: 'Title Image1', // media title
description: 'Description1' // media description
},
{ src: 'image_02.jpg', srct: 'image_02t.jpg', title: 'Title Image2' },
{ src: 'image_03.jpg', srct: 'image_03ts.jpg', title: 'Title Image3' }
]
});
});
</script>
<h3>
nanogallery2 - create one gallery (Javascript method)
<a href="https://nanogallery2.nanostudio.org/" target="_blank">[more...]</a>
</h3><div id="my_nanogallery2"></div>
<!-- another example -->
<div id="my_nanogallery2" data-nanogallery2></div>
<h2>Gallery with albums</h2>
<script>
$(document).ready(function () {
$("#my_nanogallery2 ").nanogallery2({
items: [
// album 1
{ src: 'image_01.jpg', title: 'album A', ID: 1, kind:'album' },
{ src: 'image_01.jpg', srct: 'image_01ts.jpg', title: 'image A1', ID: 10, albumID: 1 },
{ src: 'image_02.jpg', srct: 'image_02ts.jpg', title: 'image A2', ID: 11, albumID: 1 },
{ src: 'image_03.jpg', srct: 'image_03ts.jpg', title: 'image A3', ID: 12, albumID: 1 },
// album 2
{ src: 'image_02.jpg', title: 'album B', ID: 2, kind:'album' },
{ src: 'image_01.jpg', srct: 'image_01ts.jpg', title: 'image B1', ID: 20, albumID: 2 },
{ src: 'image_02.jpg', srct: 'image_02ts.jpg', title: 'image B2', ID: 21, albumID: 2 },
{ src: 'image_03.jpg', srct: 'image_03ts.jpg', title: 'image B3', ID: 22, albumID: 2 }
]
});
});
</script>
<!-- another -->
<div id="my_nanogallery2" data-nanogallery2></div>
<script>
$(document).ready(function () {
$("#my_nanogallery2").nanogallery2({
items: [
{
src: 'https://vimeo.com/32875422', // video url
srct: 'https://i.vimeocdn.com/video/222726041_1280x720.jpg', // video thumbnail url
title: 'Vimeo video', // video title
description: 'Video' // video description
},
{ src: 'https://www.youtube.com/watch?v=Ir098VWCv8Q', title: 'Youtube video' },
{ src: 'http://www.dailymotion.com/video/x4wtyl6', title: 'Dailymotion video' },
]
});
});
</script>
<h2>Video gallery</h2>
<!-- more code -->
<div id="my_nanogallery2" data-nanogallery2></div>
<script>
$(document).ready(function () {
$("#my_nanogallery2").nanogallery2({
items: [
{
src: 'https://vimeo.com/32875422', // media url
srct: 'https://i.vimeocdn.com/video/222726041_1280x720.jpg', // media thumbnail url
title: 'Vimeo video', // media title
description: 'Video' // media description
},
{ src: 'https://www.youtube.com/watch?v=Ir098VWCv8Q', title: 'Youtube video' },
{ src: 'http://www.dailymotion.com/video/x4wtyl6', title: 'Dailymotion video' },
{ src: 'image_01.jpg', srct: 'image_01ts.jpg', title: 'Title Image' }
]
});
});
</script>