Skip to content
This repository has been archived by the owner on Aug 31, 2022. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

⚠️ This project is archived and the repository is no longer maintained.


Filament Group

Tau is a small and simple 360 gallery library. The primary goal is to start with a very light weight core and extend it with optional features as part of the build process. The core supports touch, mouse events, and automatic rotation. You can see a demo here.

Build status


After including library in your document you can create an instance of Tau with:

var tau = new window.componentNamespace.Tau( domElement );

Where domElement is an element conforming to the following markup pattern:

<div class="tau" data-tau>
  <div class="loading">loading...</div>
  <img src=""

The default img provides a fallback for browsers that fail to execute the instantiation. The data-src-template will be used to create the rest of the images images inside the parent element annotated with data-tau. Finally, an element tagged with the loading class will be displayed when the rotation hits an image that hasn't yet fired its loading event. It can be customized with additional markup and CSS as needs be.


Internet Explorer (up to and including 11) decodes the images slowly enough that they blink as they do the initial automatic rotation. To get IE to decode the images sooner we create a div inside the Tau element and load each of the images as 1px width and height, and then remove them once they are all loaded.


The following attributes are required on the initial img unless otherwise specified.

  • data-src-template - the template for the additional img tags inserted by Tau
  • data-frames - the number of images to be inserted
  • data-reduced-step-size - factor of reduction for less capable browsers (ie, browsers with no raf)
  • data-auto-rotate-delay - ms to wait after initialization to start auto-rotate


The core styles can be found in src/core.css. The demo page also includes some styles for clarity that are not required by the library:

.tau {
  border: 3px solid #ccc;
  margin-bottom: 2em;
  position: relative;

.tau img {
  width: 100%;

.tau .loading {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;