options

All options are optional, but some of them are recommended:

elems:

Type:String Default:
elems: '> a'

jQuery selector which indicates elems of gallery.

template:

Type:String Default:
template: undefined
You can use one of templates defined inside the Scregal. Just put the name of the template, for instance 
template: 'footer'
For now there is only one available template: footer(see the DEMO).
How it works? If you define template in Your options, then Scregal will apply options defined for this template. Later are considered options defined by You.

maxWidth:

Type:String, Number Default:
maxWidth: '85%'

Max width of central image, if there is a percent value it depends on screen width.

centerDisappearAnimation:

Type:Object Default:
centerDisappearAnimation: { opacity: 0 }

Object with properties to disappear center image.

sideDisappearAnimation:

Type:Object Default:
sideDisappearAnimation: { opacity: 0 }

Object with properties to disappear side images.

centerAppearAnimation:

Type:Object Default:
centerAppearAnimation: { opacity: 1 }

Object with properties to appear center image.

sideAppearAnimation:

Type:Object Default:
sideAppearAnimation: { opacity: 1 }

Object with properties to appear side images.

disappearDuration:

Type:Number Default:
disappearDuration: 500

Duration for disappearing images.

appearDuration:

Type:Number Default:
appearDuration: 500

Duration for appearing images.

disappearEasing:

Type:String Default:
disappearEasing: 'easeInOutExpo'

Easing to disappear images.

appearEasing:

Type:String Default:
appearEasing: 'easeInOutExpo'

Easing to appear images.

isNavigationHidden:

Type:Boolean Default:
isNavigationHidden: false

Determine whether to show or hide navigation.

manageNavigationUsingKeyboard:

Type:Boolean Default:
manageNavigationUsingKeyboard: true
Determine whether to use keyboard to use navigation. If 
true
You can use keyboard from the list below:
  • right arrow - next photo
  • left arrow - previous photo
  • esc - close gallery

hideNavigationWhenAutoGallery:

Type:Boolean Default:
hideNavigationWhenAutoGallery: true

Determine whether to show or hide navigation while auto gallery is running.

hideFrontWhenAutoGallery:

Type:Boolean Default:
hideFrontWhenAutoGallery: false

Determine whether to show or hide front title box while auto gallery is running

runAutoGalleryAfterDelay:

Type:Number Default:
runAutoGalleryAfterDelay: 5000

Determine when auto gallery is about to turn its on, since your last move on screen.

autoGalleryDelay:

Type:Number Default:
isNavigationHidden: 3000

Time interval to display image while auto gallery is running after it finished animation and before it moves to the next photo.

init:

Type:Boolean Default:
init: true

Define whether to init Scregal automaticly. Otherwise you have to do this by method 

.init()

close:

Type:String Default:
close: undefined

jQuery selector to indicate on navigation close element.

addFront:

Type:Boolean Default:
addFront: true

Determine whether to show or hide front title box.

frontContent:

Type:Function Default:
frontContent: function() { }
If 
addFront: true
, it defines the content for a whole gallery.

frontTitle:

Type:Function Default:
frontTitle: function() {
		return $('<div class="scregalSubtitle">');
	}
If 
addFront: true
then, unlike 
frontContent:
it defines the title for every elem of the gallery.

basicHeight:

Type:Function Default:
basicHeight: function() {
		return $(window).height();
	}

The height of a space when gallery is working

basicWidth:

Type:Function Default:
basicWidth: function() {
		return $(window).width();
	}

The width of a space when gallery is working

getGalleryName:

Type:Function Default:
getGalleryName: function() {
		return 'rel';
	}
Define Your own group of pictures (galleries) by assigning the name of group to every elem from 
elems: