Home > About Me > Web Portfolio
 360° Customs Viewer
  360 degree custom viewer

Before I created the PaintStik website I kept photos of my customs on my personal website. However, I wanted a way to display my figures from multiple angles without having to list them one after another in a single, long page. My solution was to create a small JavaScript and PHP program that would allow a 360° view of my figures as if they were on a turn-table.

The system starts with some PHP code. The PHP script is given the name of a subfolder on the web server that contains a sequential set of images of my custom, taken from multiple angles. The script opens the folder and reads the file names before building up a JavaScript function to display them.

The PHP file writes the JavaScript function directly to the browser. This breaks up the gradient at the bottom of the custom photo to act as a simple "scrub bar" to move through the various images, making it look like it rotates. The script automatically counts the number of images in the folder on the server and splits the gradient graphic into an image map using the same number of sections. Each section is then assigned one of the images and a simple image-swap function in JavaScript takes care of the rest.

With the script as a template I can create new 360° views of my figures by simply taking the photos, naming them sequentially, uploading them to the server and then sending the folder name to the appropriate PHP file. No manual HTML coding is necessary.


"Simpler is better."

All content © Brian Spradlin, 2009, unless otherwise noted.
No unauthorized alteration of content is permitted without consent.
Contact Brian Spradlin