Markup Guide¶
Script sources¶
Include script sources in the main html <head> element.
Development (test folder)
1<script src="https://vjs.zencdn.net/7.6.6/video.min.js"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
3<script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>
4<script src="js/require.js" data-main="js/entry.js"></script>
Production (examples folder)
1<script src="https://vjs.zencdn.net/7.6.6/video.min.js"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
3<script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>
4<script src="js/sg3d.min.js"></script>
Stylesheet sources¶
Include stylesheet sources in the main html <head> element.
Development (test folder)
1<link rel="stylesheet" href="https://vjs.zencdn.net/7.6.6/video-js.css">
2<link rel="stylesheet" href="css/sg3d.css">
Production (examples folder)
1<link rel="stylesheet" href="https://vjs.zencdn.net/7.6.6/video-js.css">
2<link rel="stylesheet" href="css/sg3d.min.css">
Define app data¶
Create the container element
1 <div class="rs-container">
2 <div class="rs-sg3d">
3 </div>
4 </div>
Inside rs-sg3d, create category element with data-name as the category title:
1 <!--New category-->
2 <ul data-name="My category">
3 </ul>
For each item, add a <li> element with nested <a> element containing the item path
1 <li>
2 <a href="path/to/item1.jpg">Item 1 title</a>
Add item description with <p> element
1 <p>Item 1 description</p>
2 </li>
Add extended content for MediaViewer
1 <li>
2 <a href="path/to/item1.jpg">Item 1 title</a>
Full markup example¶
1<div class="rs-container">
2
3 <!--Gallery element-->
4 <div class="rs-sg3d">
5
6 <!--Category 1-->
7 <ul data-name="Category 1">
8 <!--First item: Photo type-->
9 <li>
10 <a
11 href="assets/category1/1.jpg"
12 data-type="photo"
13 data-thumbnail="assets/category1/thumbs/1.jpg"
14 data-extended="assets/category1/extended/1.jpg">Item 1</a>
15 <p>Item 1 description</p>
16 </li>
17
18 <!--Second item: Audio type-->
19 <li>
20 <a
21 href="assets/category1/2.jpg"
22 data-type="audio"
23 data-extended="assets/category1/extended/2.mp3">Item 1</a>
24 <p>Item 2 description</p>
25 </li>
26
27 <!--Third item: Video type-->
28 <li>
29 <a
30 href="assets/category1/3.jpg"
31 data-type="video"
32 data-thumbnail="assets/category1/thumbs/3.jpg"
33 data-poster="assets/category1/3.jpg"
34 data-extended="['assets/videos/extended/sample3.mp4', 'assets/videos/extended/sample3.webm']">Item 3</a>
35 <p>Item 3 description</p>
36 </li>
37
38 <!-- More items... -->
39 </ul>
40 <!--end 1st category-->
41
42 <!--Category 2-->
43 <ul data-name="Category 2">
44
45 <!--First item: inline type, show up content from element with id #inline1-->
46 <li>
47 <a
48 href="assets/category2/1.jpg"
49 data-type="inline"
50 data-extended="inline1">Item 1</a>
51 <p>Item 1 description</p>
52 </li>
53
54 <!--Second item: ajax type-->
55 <li>
56 <a
57 href="assets/category2/2.jpg"
58 data-type="ajax"
59 data-extended="assets/category2/ajax/2.json">Item 2</a>
60 <p>Item 2 description</p>
61 </li>
62
63 <!--Third item: embed type, show up content from a youtube iframe-->
64 <li>
65 <a
66 href="assets/category2/2.jpg"
67 data-type="embed"
68 data-extended='<iframe width="600" height="340" src="https://www.youtube.com/embed/TLkA0RELQ1g" </iframe>'>Item 2</a>
69 <p>Item 3 description</p>
70 </li>
71
72 <!-- More items... -->
73 </ul>
74 <!--end 2nd category-->
75
76 <!-- More categories... -->
77 </div>
78 </div>