Getting Started¶
What’s inside¶
- dist
Production ready application files.
- examples
Working examples that demonstrate various features of the application.
- libs
External Javascript libraries used in development.
- src
Main javascript source files.
- test
Test folder including data used in development.
- Gruntfile.js
Grunt build file.
- package.json
node.js project file.
- npm-shrinkwrap.json
node.js package dependencies file.
- docs
Documentation includes html and pdf format
Use examples files¶
Prepare photo assets. It’s a good idea to resize or crop each photo to a suitable size to improve rendering performance.
Look for examples directory and place your photos in assets directory. Photo assets should be categorized and placed in its corresponding folders.
Pick the html file that suits your need, for example base.html has the most simple configuration to get you started.
Modify the html file with your own data. For more detail see Usage and Markup Guide
App Structure¶
assets/
category1/
category2/
category3/
css/
fonts/
sg3d.min.css
style.css
sg3d.light.min.css
style.light.css
js/
sg3d.min.js
index.html
assets: Contain all photo items
css: Application stylesheet folder, contains default dark and light theme.
fonts: Custom icon fonts folder
sg3d[.light].min.css: Minimized application styles
style[.light].css: General and non-application specific style
js:
sg3d.min.js: Main minimized Javascript file
index.html: Main html file
Manually setup¶
Alternatively, setup your own directory structure as in the guideline above. The two most important set of files are CSS and JS files can be found in dist folder in download package. Copy and link them as stylesheet sources and script sources in the main html file. Then customize html data and add a bootstrap code to initialize the gallery.