Camera - Free jQuery Slideshow

Camera slideshow

Camera slideshow is an open source project. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work.

Camera slideshow  is tested on new browsers, but I tried to make it compatible with the old versions of Internet Explorer too (8 and 7). But I don't think I will spend many hours to improve this feature, sorry.

Camera slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing and a customized version of jQuery Mobile to use Camera with mobile devices. These plugins are included in the zip you can download at the bottom of this page.

<div class="camera_wrap">
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_2.jpg"></div>
</div>

jQuery('YOUR_TARGET').camera(); //the basic method

jQuery('YOUR_TARGET').camera({ //here I declared some settings, the height and the presence of the thumbnails 
	height: '41%',
	pagination: false,
	thumbnails: true
});

jQuery('YOUR_TARGET').cameraStop(); //stop the slideshow

jQuery('YOUR_TARGET').cameraPlay(); //start the slideshow

jQuery('YOUR_TARGET').cameraPause(); //pause the slideshow (some difference between 'pause' and 'stop': when you stop the loader and the commands are hidden)

jQuery('YOUR_TARGET').cameraResume(); //resume the slideshow after pausing

 

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 device

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 millisecond

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.