This time I will share jQuery Plugin and tutorial about Mobile-compatible Slider/Slideshow Plugin For jQuery – Camera, hope it will help you in programming stack.
| File Size: | 2.51 MB |
|---|---|
| Views Total: | 20427 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Camera is a powerful, configurable, responsive, mobile-friendly jQuery slideshow/slider/carousel plugin that comes with fancy slice transition effects between slides.
Basic usage:
1. Load necessary jQuery JavaScript library and the jQuery Camera plugin’s files into the document.
1 |
<link href="camera.css" rel="stylesheet"> |
2 |
<script src="jquery.min.js"></script> |
3 |
<script src="camera.min.js"></script> |
2. Insert images & captions to the camera slider.
01 |
<div class="camera_wrap"> |
02 |
<div data-src="1.jpg"> |
03 |
<img src="1.jpg"> |
04 |
<div class="camera_caption"> |
05 |
<p>Caption 1</p> |
06 |
</div> |
07 |
</div> |
08 |
<div data-src="2jpg"> |
09 |
<img src="2.jpg"> |
10 |
<div class="camera_caption"> |
11 |
<p>Caption 2</p> |
12 |
</div> |
13 |
</div> |
14 |
<div data-src="3.jpg"> |
15 |
<img src="3.jpeg"> |
16 |
<div class="camera_caption"> |
17 |
<p>Caption 3</p> |
18 |
</div> |
19 |
</div> |
20 |
</div> |
3. Activate the camera slider with default settings.
1 |
jQuery('#camera_wrap').camera(); |
4. Activate the camera slider with default settings.
001 |
jQuery('#camera_wrap').camera({ |
002 |
003 |
// topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight |
004 |
alignment: 'center', |
005 |
|
006 |
// true, false |
007 |
autoAdvance: true, |
008 |
|
009 |
// true, false. Auto-advancing for mobile devices |
010 |
mobileAutoAdvance: true, |
011 |
|
012 |
// 'leftToRight', 'rightToLeft', 'topToBottom', 'bottomToTop' |
013 |
barDirection: 'leftToRight', |
014 |
|
015 |
// 'bottom', 'left', 'top', 'right' |
016 |
barPosition: 'bottom', |
017 |
|
018 |
// the number of columns |
019 |
cols: 6, |
020 |
|
021 |
//for the complete list http://jqueryui.com/demos/effect/easing.html |
022 |
easing: 'easeInOutExpo', |
023 |
|
024 |
//leave empty if you want to display the same easing on mobile devices and on desktop etc. |
025 |
mobileEasing: '', |
026 |
|
027 |
// 'random','simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight' |
028 |
//you can also use more than one effect, just separate them with commas: 'simpleFade, scrollRight, scrollBottom' |
029 |
fx: 'random', |
030 |
031 |
// leave empty if you want to display the same effect on mobile devices and on desktop etc. |
032 |
mobileFx: '', |
033 |
034 |
// to make the <a href="https://www.jqueryscript.net/tags.php?/grid/">grid</a> blocks slower than the slices, this value must be smaller than transPeriod |
035 |
gridDifference: 250, |
036 |
|
037 |
// here you can type pixels (for instance '300px'), a percentage (relative to the width of the slideshow, for instance '50%') or 'auto' |
038 |
height: '50%', |
039 |
|
040 |
// the path to the image folder (it serves for the blank.gif, when you want to display <a href="https://www.jqueryscript.net/tags.php?/video/">video</a>s) |
041 |
imagePath: 'images/', |
042 |
|
043 |
// true, false. Puase on state hover. Not available for mobile devices |
044 |
hover: true, |
045 |
|
046 |
// pie, bar, none (even if you choose "pie", old browsers like IE8- can't display it... they will display always a loading bar) |
047 |
loader: 'pie', |
048 |
loaderColor: '#eeeeee', |
049 |
loaderBgColor: '#222222', |
050 |
loaderOpacity: .8, //0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1 |
051 |
loaderPadding: 2, |
052 |
loaderStroke: 7, |
053 |
pieDiameter: 38, |
054 |
piePosition: 'rightTop', //'rightTop', 'leftTop', 'leftBottom', 'rightBottom' |
055 |
|
056 |
// you can also leave it blank |
057 |
minHeight: '200px', |
058 |
|
059 |
// true or false, to display or not the navigation buttons |
060 |
navigation: true, |
061 |
|
062 |
// 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 |
063 |
navigationHover: true, |
064 |
|
065 |
// same as above, but only for mobile devices |
066 |
mobileNavHover: true, |
067 |
|
068 |
// 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 |
069 |
opacityOnGrid: false, |
070 |
|
071 |
// a layer on the images to prevent the users grab them simply by clicking the right button of their mouse (.camera_overlayer) |
072 |
overlayer: true, |
073 |
|
074 |
// enable pagination |
075 |
pagination: true, |
