Configuration

There are few parameters that can configure the Polar Gallery while calling it's constructor. Take a look at this example:

<script type="text/javascript">
	$(".polar").polarGallery({
		animationDuration : 500,
		maxRotation : 25,
		maxScale : 2.0,
		showNavigation : true,
		useArrowsNavigation : true
	});
</script>

Which is equal to:

<script type="text/javascript">
	$(".polar").polarGallery();
</script>

Gallery configuration attributes

Name	Type	Default value
animationDuration	Number (integer)	500
	Number of milliseconds the animation last.
maxRotation	Number (integer)	25
	Number of maximal degrees the photo can be rotated. Note, this parameter is ignored if rotate attribute is set for the photo.
maxScale	Number (float)	2.0
	The maximal zoom factor for the photo. When set to 2.0, the photo can't be zoomed closer than twice.
showNavigation	Boolean	true
	Indicates whether navigation buttons appear when the photo is zoomed.
thumbnailHeight	Number (integer)
	Determines the default prefered height of zoomed-out photo. Note, default value is defined in CSS file for the ".polar-item-wrapper img" rule.
thumbnailWidth	Number (integer)
	Determines the default prefered width of zoomed-out photo. Note, default value is defined in CSS file for the ".polar-item-wrapper img" rule.
useArrowsNavigation	Boolean	true
	Indicates whether user can navigate through the gallery with arrow keys when the photo is zoomed.
wrapperHeight	Number (integer)
	Determines the default height (in pixels) of every photo wrapper HTML element inside the gallery.
wrapperWidth	Number (integer)
	Determines the default width (in pixels) of every photo wrapper HTML element inside the gallery.

Photo configuration

Every photo can have some extra attributes like title, subtitle and some other parameters related with those two. Take a look at this example:

<img class="polar" src="my-image-1.jpg" alt="My Image 1"/>

which is equal to:

<img class="polar" src="my-image-1.jpg" data-title="My Image 1"/>

and this example below uses all possible features:

<img class="polar" src="my-image-1.jpg"
	data-title="My Image 1"
	data-subtitle="created on May 2012"
	data-rotate="-15"
	data-wrapperWidth="250"
	data-wrapperHeight="250"
	data-thumbnailWidth="250"
	data-thumbnailHeight="250"
	data-imageLinkTo="my-image-1-large.jpg"
	data-imageLinkTarget="_blank"
	data-subtitleLinkTo="index.html"
	data-subtitleLinkTarget="_self"/>

Photo configuration attributes

Name	Type	Default value
data-imageLinkTo	String (URL)
	An URL determining the location where the user will be redirected after clicking the zoomed photo.
data-imageLinkTarget	String	_blank
	Determines a window name for which the URL specified in data-imageLinkTo will be loaded.
data-rotate	Number (integer)
	Photo rotation in degrees. If not given, a random value between -maxRotation and +maxRotation will be taken.
data-subtitle	String
	Subtitle of the photo
data-subtitleLinkTo	String (URL)
	An URL determining the location where the user will be redirected after clicking the photo subtitle.
data-subtitleLinkTarget	String	_blank
	Determines a window name for which the URL specified in data-subtitleLinkTo will be loaded.
data-thumbnailHeight	Number (integer)
	Determines the height of zoomed-out photo. Note, default value is defined in CSS file for the ".polar-item-wrapper img" rule. It may be also defined as a gallery constructor parameter.
data-thumbnailWidth	Number (integer)
	Determines the width of zoomed-out photo. Note, default value is defined in CSS file for the ".polar-item-wrapper img" rule. It may be also defined as a gallery constructor parameter.
data-title	String
	Title of the photo, can be also determined by "alt" HTML attribute.
data-wrapperHeight	Number (integer)
	Determines the height (in pixels) of a photo wrapper HTML element.
data-wrapperWidth	Number (integer)
	Determines the width (in pixels) of a photo wrapper HTML element.