Getting Started

What’s inside

  • dist

    Production ready application files.

  • examples

    Working examples 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

  • designer

    Source files for designer administrator web app

Using Designer app

See Designer

Using examples files

  1. Prepare photo assets. It’s a good idea to resize or crop each photo to a suitable size to improve rendering performance.

  2. Look for examples directory and place your photos in assets directory. Photo assets should be categorized and placed in its corresponding folders.

  3. Pick the html file that suits your need, for example base.html has the most simple configuration to get you started

  4. Modify the html file with your own data. For more detail see Usage and Markup Guide

App Structure

assets/
  category1/
  category2/
  category3/
css/
  fonts/
  pc3d.min.css
  style.css
  pc3d.light.min.css
  style.light.css
js/
  pc3d.min.js
index.html

  • assets: Contain all photo items

  • css: Application stylesheet folder, contains default dark and light theme.

    • fonts: Custom icon fonts folder

    • pc3d[.light].min.css: Minimized application styles

    • style[.light].css: General and non-application specific style

  • js:

    • pc3d.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.