JQuery Camera 插件参数
来源:互联网 发布:百度知道评论软件 编辑:程序博客网 时间:2024/05/16 12:40
Introduction, where I talk about Camera slideshow
And I apologize for my bad English
HI THERE. First of all excuse me for my bad english, second excuse me if you will find some bugs on Camera slideshow. I developed it for free, so it's not easy to find the time to work on it.If you want to help me with a donation I'll appreciate :-)
Camera slideshow is an open source project, based on Diapo slideshow (http://www.pixedelic.com/plugins/diapo,no more supported, sorry), but improved a lot. 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 (in this case please consider a donation).
Camera slideshow (as Diapo) 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 (visit the project page) and a customized version ofjQuery Mobile (visit the project page) to use Camera with mobile devices. These plugins are included in the zip you can download at the bottom of this page.
Usage, how to include Camera into your projects
And all the methods
The basis
This is the basic structure to make Camera work:
<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>
Just put this code into your HTML page and the basic slideshow will be ready to use. See the other demos to create more complex slideshows.
For jQuery newbies: after downloading and unzipping Camera, you can see some files in the folder calledExamples included in the zip: there I provided some examples of Camera slideshow.
As you can see in the examples themselves, before the Camera plugin, you must calljQuery in the head of your document: without jQuery the slideshow doesn't work.
Then you must call jQuery Easing plugin and jQuery Mobile plugin. After that you must callCamera plugin and initialize the function camera with the simply methodjQuery('YOUR_TARGET').camera();
Skins
Do not forget to call also "camera.css". By editing this CSS file you can createyour own personal skin, of course. But Camera already provides some skins. It has got33 different colors for the icons. To use them just add one of this classes to the target element (if you don't use any of this classes the color of the icons will be petroleum/graphite):
camera_amber_skin | camera_ash_skin | camera_azure_skin | camera_beige_skin | camera_black_skin | camera_blue_skin | camera_brown_skin | camera_burgundy_skin | camera_charcoal_skin | camera_chocolate_skin | camera_coffee_skin | camera_cyan_skin | camera_fuchsia_skin | camera_gold_skin | camera_green_skin | camera_grey_skin | camera_indigo_skin | camera_khaki_skin | camera_lime_skin | camera_magenta_skin | camera_maroon_skin | camera_orange_skin | camera_olive_skin | camera_pink_skin | camera_pistachio_skin | camera_pink_skin | camera_red_skin | camera_tangerine_skin | camera_turquoise_skin | camera_violet_skin | camera_white_skin | camera_yellow_skin
Methods
This is the main function to start your slideshow. Have a look to the options for more detailed info about how to set the slideshow.
jQuery('YOUR_TARGET').camera(); //the basic methodjQuery('YOUR_TARGET').camera({ //here I declared some settings, the height and the presence of the thumbnails height: '41%',pagination: false,thumbnails: true});
You can use the public methods below to stop the slideshow, for instance, when you open a lightbox. They simply add or remove a class to the target element.
jQuery('YOUR_TARGET').cameraStop(); //stop the slideshowjQuery('YOUR_TARGET').cameraPlay(); //start the slideshowjQuery('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
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.
Apis, classes and HTML5 data- attributes
To manipulate almost everything...
A simple slide
This is the "simple anathomy" of a slide:
<div data-src="images/image_1.jpg"></div>
Captions
You can add a caption to the slide, just put a div with class "camera_caption" into the div above:
<div data-src="images/image_1.jpg"><div class="camera_caption">The text of your caption</div></div>
By adding one more class to the "camera_caption" div you can decide the effect of the caption. The possible classes are:"moveFromLeft", "moveFomRight", "moveFromTop", "moveFromBottom", "fadeIn", "fadeFromLeft", "fadeFromRight", "fadeFromTop", "fadeFromBottom"
HTML elements
You can also put some HTML elements into your slides. These elements must be wrapped into a div withposition:absolute
and they can be included in the transition effect too:
<div data-src="images/image_1.jpg"><div class="fadeIn camera_effected">The text of your html element</div></div>
An HTML element can have a class "fadeIn": in this case it will be displayed with a fading effect. By adding the class"camera_effected" to the div, it will be included in the transition effect (butpay attention, this could make the transition slow).
Videos
To include a video into your slideshow you must put an iframe into one of your slides:
<div data-src="images/image_1.jpg"><iframe src="http://player.vimeo.com/video/1084537" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
As you can see I set the width and the height of the iframe to 100%, so it changes its size according with the size of the slideshows (I mean the iframe, the video in the iframe will mantain its ratio).
The iframes can't be included in the transition effect, so you can use a screenshot of the iframe as image for your slide. By default they are displayed after the transition, but you can decide to display them only after clicking the image of the slide itself. Just add to the div (the slide) the attribute data-video="hide"
(see below thedata- attributes).
The "data-" attributes
The URL of the image on the slide is added by using the HTML5 data- attribute. This allows to load the image only when the slideshow calls it and not (lazy load method).
By using the HTML5 data- attribute you can add many properties to your slide, that overwrite the general ones. For instance the URL of thethumbnails:
<div data-src="images/image_1.jpg" data-thumb="images/thumbs/image_1.jpg"></div>
or a particular alignment for one slide only:
<div data-src="images/image_1.jpg" data-alignment="topLeft"></div>
Here below you can see all the other "data-" possibilities
- data-alignment
- "topLeft", "topCenter", "topRight", "centerLeft", "center", "centerRight", "bottomLeft", "bottomCenter", "bottomRight"
- data-easing
- for the complete list http://jqueryui.com/demos/effect/easing.html
- data-mobileEasing
- the easing effect for mobile devices only
- data-fx
- "random","simpleFade", "curtainTopLeft", "curtainTopRight", "curtainBottomLeft", "curtainBottomRight", "curtainSliceLeft", "curtainSliceRight", "blindCurtainTopLeft", "blindCurtainTopRight", "blindCurtainBottomLeft", "blindCurtainBottomRight", "blindCurtainSliceBottom", "blindCurtainSliceTop", "stampede", "mosaic", "mosaicReverse", "mosaicRandom", "mosaicSpiral", "mosaicSpiralReverse", "topLeftBottomRight", "bottomRightTopLeft", "bottomLeftTopRight", "bottomLeftTopRight"
- data-link
- the URL where you go by clicking your slide
- data-portrait
- "true", "false". Select "true" if you don't want that your images are cropped
- data-slideOn
- "next", "prev", "random": decide if the transition effect will be applied to the current (prev) or the next slide
- data-src
- the URL of the image of the slide
- data-target
- "_blank", "_new", "_parent", "_self", "_top", the target values for the data-link attribute
- data-thumb
- the URL of the thumbnail of the slide (if the value of the 'thumbnail' option istrue)
- data-time
- the milliseconds between the end of the sliding effect and the start of the nex one
- data-transPeriod
- the length of the sliding effect in milliseconds
- data-video="hide"
- "hide" is the unique possible value. If you use this data- attribute means you are using a video on your slideshow. The videos on Camera can be displayed only after the transition. By adding thisdata- attribute you must click the image to display the video, otherwise the video will be displayed automatically after the transition. More info are available on the demo pages
Download, support, contacts, changelog
And if you want donations
Support for me
If you want to support my work you can buy something from my ThemeForest page:ThemeForest, I'll really appreciate
You can also share this page or follow me on Dribbble, Twitter, Facebook, Forrst etc.
Support for you
If you need support or if you want to report a bug or ask animplementation the only way is by join the Camera slideshow Google group:http://groups.google.com/group/camera-slideshow
Hiring
If you want you can hire me at manu at pixedelic dot com (include some details about your project and do not ask for support at this address).Do not use this address to ask support please.
Download
Se also the project on the github repository: https://github.com/pixedelic/Camera
Changelog
- v.1.3.4 - 2012.06.23
- Fixed some issues with rtl direction
- v.1.3.3 - 2012.06.17
- Fixed a misprint (sorry)
- v.1.3.2 - 2012.06.12
- Fixed a bug with the nextSlide function
Added the pageshow event
Fixed a problem with iframes - v.1.3.1 - 2012.05.28
- Fixed an issue with portrait mode
- v.1.3.0 - 2012.05.23
- Changed the behavior of some callbacks and added the class "cameranext" (read the documentation about the callbacks)
- v.1.2.0 - 2012.05.04
- Changed the lazy loading way of working
- v.1.1.2 - 2012.04.29
- Fixed some issues with old IE version
Added a demo file with a PHP function to create randomically ordered slideshow - v.1.1.0 - 2012.04.21
- Fixed an issue with the image loader on IE8 (thanks to Aquila)
Changed the fullscreen demo to solve an issue with IE7... I hate IE :-) - v.1.0.8 - 2012.04.05
- Fixed an issue with the image loader on IE
- v.1.0.6 - 2012.03.24
- Removed cameraPlay function
Used cameraPause and cameraResume instead of cameraStop and cameraPlay
Now cameraStop is used to block (destroy) the timer of the slideshow (you can't resume it after that)
Fixed a problem with links
Fixed a problem with the captions (thank you to @sattes - v.1.0.5 - 2012.03.13
- Added onStartTransition callback
- v.1.0.4 - 2012.03.08
- Fixed a bug with the captions
- v.1.0.3 - 2012.02.23
- Made some changes according with the WP version and fixed a bug of cameraResume method
- v.1.0.2 - 2012.02.18
- Added 'minHeight' option
- v.1.0.1 - 2012.02.18
- Fixed a problem with IE8-
- v.1.0.0 - 2012.02.17
- First release
原文:http://www.pixedelic.com/plugins/camera/
- JQuery Camera 插件参数
- JQuery Camera 插件参数
- JQuery Camera.js幻灯片插件
- Jquery插件参数问题
- jQuery插件---获取URL参数.
- jQuery获取url参数插件
- jQuery插件pagination参数使用说明
- JQuery插件获取URL参数
- Jquery插件flexigrid 参数 详解
- jquery.treeview插件参数介绍
- jQuery插件---获取URL参数
- jquery 插件之参数制作
- jquery treeview 插件参数说明
- camera 参数
- Jquery插件flexigrid的参数说明
- Jquery插件flexigrid的参数说明
- jQuery插件infinitescroll参数【无限翻页】
- jQuery Fancybox插件使用参数详解
- 读入优化的模板
- poj-1844-Sum
- JS 在 对table 的操作 例如 动态增加行的关键函数
- HDU 4976 A simple greedy problem. DP
- Bootstrap3.0学习第六轮(表单)
- JQuery Camera 插件参数
- 日志分割
- Servlet过滤器
- ListView与ExpandableListView设置分割线 divider
- 拓扑排序
- C语言缺陷和陷阱
- STM32寄存器操作方式学习-GPIO
- hdu 4983 Goffi and GCD(欧拉函数)
- 如何学习Vim