Documentation

Installation

Dependencies

Style sheets <link> & Scripts <script>

Definition and Usage

Files that need to be included.

Style sheets

Place in header


<link rel="stylesheet" type="text/css" href="yui/2.3.1/build/base/base-min.css" >
<link rel="stylesheet" type="text/css" href="yui/2.3.1/build/fonts/fonts-min.css" >
<link rel="stylesheet" type="text/css" href="../2.3.1/build/container/assets/container.css" >
<link rel="stylesheet" type="text/css" href="../extend/photoviewer/build/photoViewer_base.css" >

Scripts

Place in header


<script type="text/javascript" src="../2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../2.3.1/build/dragdrop/dragdrop-min.js" ></script>
<script type="text/javascript" src="../2.3.1/build/animation/animation-min.js"></script>
<script type="text/javascript" src="../2.3.1/build/container/container-min.js"></script>
<script type="text/javascript" src="../2.3.1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="../extend/photoviewer/build/photoViewer_base-min.js"></script>

HTML

Anchor <a>

Definition and Usage

This tag defines an anchor. By using the href attribute, you link to the full sized image the anchor is associated with.

Relevant Attributes

Attribute	Value	Description
href	URL	The URL of the full sized image.
title	String	Title you want to appear in the viewer.
class	String (photoViewer)	Required class name.

Example


<a 
	href="[path to full sized image]" 
	title="[title of image]"
	class="photoViewer">
</a>

Image <img>

Definition and Usage

This tag defines a thumbnail. The attributes of this tag are used in associating the full sized image as well as the title and description.

Relevant Attributes

Attribute	Value	Description
src	URL	The URL of the thumbnail sized image.
alt	String	The full description you want to appear in the viewer.

Example


<img  
	src="[path to thumbnail image]"
	alt="[description of image]" />

Div <div>

Definition and Usage

This tag is used to define both galleries and lightbox containers.

Relevant Attributes

Attribute	Value	Description
id	String	The String id for the element, unique to the DOM.

Example


<div id="lightbox">
</div>

Configuration

YAHOO.photoViewer.config

Object

Definition and Usage

This object is used to define each gallery separately. For each gallery, create a new config object by adding a new member to config using the HTML id of the gallery DIV tag.

Relevant Attributes

Attribute

Value

Description

viewers

Object

List of viewers to configure, must match the div id.

viewers[id].properties

Object

Properties unique to each viewer.

viewers[id].properties.id

String

String id that matches the viewer key and the div id.

viewers[id].properties.grow

Number

Number interval used for determining sizing speeds of the viewer.

viewers[id].properties.fade

Number

Number interval used for determining fading speeds of the viewer.

viewers[id].properties.modal

Boolean

True/false value for determining modal mode.

viewers[id].properties.dragable

Boolean

True/false value for determining drag and drop mode.

viewers[id].properties.fixedcenter

Boolean

True/false value for determining auto-centering mode.

viewers[id].properties.loadFrom

String ["html", "xml"]

Load type, local or remote via xml.

viewers[id].properties.url

URL

The URL for loading remote xml when loadFrom set to true.

viewers[id].properties.position

String ["absolute", "relative"]

The type of positioning for placement of the viewer.

viewers[id].properties.container

String

The String dom id for placement of a viewer with a position set to relative.

viewers[id].properties.xy

Array

The x and y coordinates used to place the viewer when fixedcenter is set to false.

viewers[id].properties.easing

Object

Object used for calculating animation type. Easing objects available can be found in Yahoos docs.

viewers[id].properties.buttonText

Object

Object used for assigning text to the buttons (next, prev and close). To leave the button text blank, for image replacement, set a background image in CSS and set the texts to a space (not blank) " ". This object has 3 properties: next, prev, close.

viewers[id].properties.thumbEvent

String

String name for the type of event used to trigger the thumbnails. default is click and it is suggested you only use click, mousedown, mouseup and dblclick.

viewers[id].properties.slideShow

Object, Boolean

Object used for setting up the slide show functionality.

Attribute

Value

Description

loop

Boolean

Tells the slide show to loop or to only play once

duration

Number

Number of milliseconds between each slide, default is 3000.

autoStart

Boolean

Tells the slide show to start at DOM ready.

playMode

String

(ordered|random|shuffle) The three play modes currently supported, default is ordered. Note that with play mode random, there is no end and therefor no "lastphoto" event.

controlsText

Object, Boolean

Object used for setting the slide show controls text

Attribute	Value	Description
play	String	Text used for the play button (leave a space " " and set your images in a CSS skin for custom buttons)
pause	String	Text used for the pause button
stop	String	Text used for the stop button
display	String	Text used to display what slide is current and the total slides, they are represented by {0} and {1}, respectively

viewers[id].properties.flickrRss

Object

Object used to set up the Flickr RSS reader.

Attribute	Value	Description
id	String	The Flickr nsid used to identify accounts. You can get it from your RSS feed URL (http://api.flickr.com/services /feeds/photos_public.gne?id= 26965636@N00&lang=en-us& format=rss_200)
thumbSize	String	(square\|thumb) For loading either Flickr's square thumbs or their normal thumbs.
maxDescriptionLen	Number	Max character length allowed for RSS feed descriptions, default is 255.
set	Number	This is the Flickr set ID used if you want to load only the photos from a particular set.

viewers[id].properties.flickrApi

Object

Object used to set up the Flickr API wrapper.

Attribute	Value	Description
apikey	String	This is where you put your developer API key, read more about it here: http://www.flickr.com/services /api/keys/
thumbSize	String	(square\|thumb) For loading either Flickr's square thumbs or their normal thumbs.
method	String	This is the Flickr API method you would like to call. Here are the list of methods, you can see their supported parameters as well: http://www.flickr.com/services /api/ photoViewer currently nativly supports the following methods: flickr.photos.search, flickr.people.getPublicPhotos, flickr.interestingness.getList, flickr.groups.getPhotos. You can get a response from any method when making manual calls to the photoViewer method loadFlickr. photoViewer calls your provided callback and passes in the response.
params	Object	This is a JSON object containing all the parameters you want passed to any particular Flickr API method call, see Flickr docs for supported parameters.
jsoncallback	String	This is the string representation of your custom callback that will get fired when the Flickr API method call returns. This is ONLY used when making manual API calls, not in the initial configuration.

Example


YAHOO.photoViewer.config = {
	viewers: {
		"showcase" : {
			properties: {
				id: "showcase",
				grow: 0.2,
				fade: 0.2,
				modal: false,
				dragable: false,
				fixedcenter: false,
				loadFrom: "html",
				url: "photos.xml",
				position: "relative",
				container:"showcase",
				xy: [0,0],
				easing: YAHOO.util.Easing.easeBothStrong,,
				thumbEvent: "mouseup"
				buttonText: {
					next: "older",
					prev: "newer",
					close: "remove"
				},
				slideShow: { 
					loop: true,
					duration: 5000, 
					autoStart: false,
					playMode: "shuffle",					
					controlsText: {
						play: "play",
						pause: "pause",
						stop: "stop",
						display: "({0} of {1})"
					}
				},
				flickrRss: { 
					id: "26965636@N00", 
					thumbSize: "square",
					set: "72157603710063007"
				},
				flickrApi: {
					apikey: "5ae7887a41f1354366a18ab8a03b32ef",
					thumbSize: "thumb",
					method: "flickr.photos.search",
					params: {user_id:"26965636@N00",text:"family",per_page:"50",page:"1"}
				}
			}
		}
	}
};

PhotoViewer Base Object

YAHOO.photoViewer.base

Object

Definition and Usage

Base object for photoViewer, public methods are used as the API.

Public Methods

Method	Arguments	Returns	Description
init	()	Object (photoViewer.base)	Used to initiate the object and get a handle. The controller object uses this and it is not suggested to call this directly. You can get references of the object from the controller API.
loadXML	([url String])	null	Uses the config properties url attribute to fetch an xml file and load it into the dom. You can explicitly call this multiple times and override the url by passing it as an argument.
loadFlickr	()	null	Uses the config properties flickrRss or flickrApi attributes to fetch a Flickr RSS feed or Flickr API and load it into the dom.
prev	()	null	Pages the viewer to the previous image.
next	()	null	Pages the viewer to the next image.
close	()	null	Closes the viewer.
open	([index Number])	null	Opens the viewer, defaults to first image or last image previously paged to. You can open a specific image by passing the index as an argument.
on	(evt String, callback Object)	null	Used to subscribe a call back function to a particular event. See below for available events.
un	(evt String, callback Object)	null	Used to unsubscribe a call back function to a particular event.
getProperty	(property String)	Any (value)	Gets a value from the config properties object based on the name you pass as an argument.
setProperty	(property String, value Any)	Any (value)	Sets a value from the config properties object based on the name and value you pass as an argument.
play	()	null	Starts the slide show.
stop	()	null	Stops the slide show.
pause	()	null	Pauses the slides how.
destroyViewer	()	null	Destroys the slide show and all associated objects, DOM nodes and event handlers.

Events

Event	Returns	Description
xmlload	Object (photoViewer.base)	Fires when an xml document is finished loading.
flickrload	Object (photoViewer.base)	Fires when a Flickr RSS feed or Flickr API call is finished loading.
viewerload	Object (photoViewer.base)	Fires when the viewer has finished loading the current image.
beforelastphoto	Object (photoViewer.base)	Fires just before the last photo loads.
lastphoto	Object (photoViewer.base)	Fires just after the last photo loads.
play	Object (photoViewer.base)	Fires when the slide show plays.
stop	Object (photoViewer.base)	Fires when the slide show stops.
pause	Object (photoViewer.base)	Fires when the slide show pausess.
openviewer	Object (photoViewer.base)	Fires when the viewer first opens.
closeviewer	Object (photoViewer.base)	Fires when the viewer is closed.

PhotoViewer Loading Object

YAHOO.photoViewer.loading

Object

Definition and Usage

Object used for implementing a loading screen.

Public Methods

Method	Arguments	Returns	Description
on	(config Object)	null	Method for turning on the loading screen. You can apply the screen to an individual element by setting the applyTo property in the config argument. The default is document.body. config applyTo: [id String]
off	()	null	Turns off the loading screen.

PhotoViewer Controller Object

YAHOO.photoViewer.controller

Object

Definition and Usage

Object used for directly interacting with the photoViewer API.

Public Methods

Method	Arguments	Returns	Description
init	()	null	This method is automatically invoked with the onDOMReady event, it can be called at any time to init DOM fragments introduced after run time.
getViewer	(id String)	Object (photViewer.base)	Returns an instantiated photoViewer.base object. Use this methods to interact with the API.

PhotoViewer Flickr Object

YAHOO.photoViewer.base.prototype.flickr

Object

Definition and Usage

Public Methods

Method	Arguments	Returns	Description
photos.search	()	photoViewer.base properties Object	http://www.flickr.com/services/api /flickr.photos.search.html
people.getPublicPhotos	()	photoViewer.base properties Object	http://www.flickr.com/services/api /flickr.people.getPublicPhotos.html
interestingness.getList	()	photoViewer.base properties Object	http://www.flickr.com/services/api /flickr.interestingness.getList.html
groups.getPhotos	()	photoViewer.base properties Object	http://www.flickr.com/services/api /flickr.groups.pools.getPhotos.html

PhotoViewer Flickr Object Helper

YAHOO.photoViewer.flickrCommon

Object

Definition and Usage

Public Methods

Method	Arguments	Returns	Description
photosPattern	()	photoViewer.base properties Object	Used to convert a common JSON response object into thumbnails.