Camera.js options- continued | part 3

---

Options, and callbacks too

TO CUSTOMIZE ALMOST EVERYTHING

alignment: 'center'

topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight

autoAdvance: true

true, false

mobileAutoAdvance: true

true, false. Auto-advancing for mobile devices

barDirection: 'leftToRight'

'leftToRight', 'rightToLeft', 'topToBottom', 'bottomToTop'

barPosition: 'bottom'

'left', 'right', 'top', 'bottom'

cols: 6

easing: 'easeInOutExpo'

for the complete list http://jqueryui.com/demos/effect/easing.html

mobileEasing: ''

leave empty if you want to display the same easing on mobile devices and on desktop etc.

fx: 'random'

'random','simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight', 'scrollLeft', 'scrollRight', 'scrollHorz', 'scrollBottom', 'scrollTop'

N.B.: you can also use more than one effect, just separate them with commas: 'simpleFade, scrollRight, scrollBottom'

mobileFx: ''

leave empty if you want to display the same effect on mobile devices and on desktop etc.

gridDifference: 250

to make the grid blocks slower than the slices, this value must be smaller than transPeriod

height: '50%'

here you can type pixels (for instance '300px'), a percentage (relative to the width of the slideshow, for instance '50%') or auto

hover: true

true, false. Pause on state hover. Not available for mobile devices

imagePath: 'images/'

the path to the image folder (it serves for the blank.gif, when you want to display videos)

loader: 'pie'

pie, bar, none (even if you choose "pie", old browsers like IE8- can't display it... they will display always a loading bar)

loaderColor: '#eeeeee'

loaderBgColor: '#222222'

loaderOpacity: .8

0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1

loaderPadding: 2

how many empty pixels you want to display between the loader and its background

loaderStroke: 7

the thickness both of the pie loader and of the bar loader. Remember: for the pie, the loader thickness must be less than a half of the pie diameter

minHeight: '200px'

you can also leave it blank

navigation: true

if true the navigation button (prev, next and play/stop buttons) will be visible, if false they will be always hidden

navigationHover: true

if true the navigation button (prev, next and play/stop buttons) will be visible on hover state only, if false they will be visible always

mobileNavHover: true

same as above, but only for mobile devices

opacityOnGrid: false

true, false. Decide to apply a fade effect to blocks and slices: if your slideshow is fullscreen or simply big, I recommend to set it false to have a smoother effect

overlayer: true

true, false. Decide to put a layer on the images to prevent the users grab them simply by clicking the right button of their mouse (.camera_overlayer)

pagination: true

true, false

playPause: true

true or false, to display or not the play/pause buttons

pauseOnClick: true

true, false. It stops the slideshow when you click the sliders

pieDiameter: 38

piePosition: 'rightTop'

'rightTop', 'leftTop', 'leftBottom', 'rightBottom'

portrait: false

true, false. Select true if you don't want that your images are cropped

rows: 4

slicedCols: 12

if 0 the same value of cols

slicedRows: 8

if 0 the same value of rows

slideOn: 'random'

next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide

thumbnails: false

true, false

time: 7000

milliseconds between the end of the sliding effect and the start of the nex one

transPeriod: 1500

length of the sliding effect in milliseconds

CALLBACKS

onStartLoading: function() { }

this callback is invoked when the image on a slide start loading

onLoaded: function() { }

this callback is invoked when the image on a slide has completely loaded

onStartTransition: function() { }

this callback is invoked when the transition effect starts

onEndTransition: function() { }

this callback is invoked when the transition effect ends

Since Camera 1.3.0 you can get the index of the current slider by using the callbacks in this way:

onLoaded: function(){
  var ind = t.find('.camera_target .cameraSlide.cameranext').index();
}

With the method above you can get the index of the slide that will display after the transition effect.

onEndTransition: function(){
  var ind = t.find('.camera_target .cameraSlide.cameracurrent').index();
}

With the method above you can get the index of the slide at the end of the transition effect.