raidiun/tatejs

A javascript gallery creator/controller

tateJS

A javascript gallery creator/controller

tateModern.js uses a <div> filled with <img> elements to create the gallery. This allows a somewhat nice degreade with JS turned off.

Each <img> element used has two optional attributes: data-tatejs-caption and data-tatejs-exp. The -caption attribute specifies an alternative caption for the image when "expanded". By default this caption takes the alt text as its value. The -exp attribute specifies an alternative source for the expanded image allowing a higher res image to be used for the expanded state.

##tateModern.js tateModern only really has one interface:

tateJS.createViewerFor(divId,opts)

Here divId is the id of the <div> containing the <img> elements that make up the gallery. The images in the gallery will be in the order that the <img> elements are in the div. opts is detailed below.

Additionally the image that is in first place in the viewer has the class tateJSkeyImage applied to enable it to have a custom styling from the rest of the images.

As for the different versions: NB: ALL MIN VERS OUT OF DATE (commit:9da1cb1b53fb70d8d633641e2dfe70ed550477aa)

• .js is the human readable source with all interfaces with HR-names
• .mach.js is a machine-minified version of the .js version (http://closure-compiler.appspot.com/ )(With HR-interfaces)
• .min.js is the hand-minified version. All interfaces except tateJS.createViewerFor() have single letter names
• .machmin.js is the machine-minified version of the hand-minified version (No HR-interfaces)

##The opts

defaultOpts: {	
		canExpand: true,	//Do images expand when clicked
		cycles: false,		//Does the gallery automatically cycle
		hasControls: true,	//Does the viewer have controls
		hasIndicator: true,	//Does the viewer have a n of x indicator
		width: 4,			//How many images in the viewer 
		skipSize: "width"	//How far does the next button take you
		}

The opts argument is a JSO as outlined above. Any option left undefined will take the default values shown above. The skipSize option has a default value equal to the width. It can be changed to an integer value

NB: the cycles option currently does nothing

##Features to Add

• A preload option to load the -exp images in the background.
• Custom attachment points for the expander
• An overlay div for the expander, nominally transparent.

##Styling

The expander (the box that contains the expanded image) has the structure below:

<div id="tateJSexpander">
	<img id="tateJSexpanderImage" />
	<div id="tateJSexpanderCaption"> ... </div>
			
	<div id="tateJSexpanderControls">
		<button>Previous</button>
		<button>Close</button>
		<button>Next</button>
  </div>
</div>

Styling can be applied using the CSS id selectors

The viewer (the box containing the full set of images) has the structure:

<div class="tateJSviewer">
 <img class="tateJSthumb" />
 <img class="tateJSthumb" />
 <img class="tateJSthumb" />
 ...
 <img class="tateJSthumb" />
 <div class="tateJSviewerControls">
 	<button>Previous</button>
   	<button>Next</button>
 </div>
</div>

The main viewer <div> will have id="[galleryName]" as this is set during creation of the viewer.

###Standard style

.tateJSthumb {
                width:25%;
                float:left;
                }
.tateJSviewer {
                display:block;
                }
#tateJSExpander {
                display:block;
                background-color:#cccccc;
                box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
                position:fixed;
                top:25%;
                left:25%;
                height:50%;
                width:50%;
                padding:1%;
                border-radius:2%;
                }
#tateJSExpanderImage {
                width:100%
                }
#tateJSExpanderCaption {
                float:left;
                }
#tateJSExpanderControls {
                float:right;
                }