Colorbox使用方法及参数设定中英双版.docx

ColorBox使用方法及参数详解ColorBox的使用方法。1、引入jquery核心库和ColorBox脚本文件2、引入ColorBox样式表文件，注意引入不同皮肤的css文件将实现不同的皮肤3、html代码弹性效果Grouped Photo 1Grouped Photo 2Grouped Photo 3 淡入淡出效果Grouped Photo 1Grouped Photo 2Grouped Photo 3 没有动画效果，高度固定（屏幕大小的75%）Grouped Photo 1Grouped Photo 2Grouped Photo 3 自动播放Grouped Photo 1Grouped Photo 2Grouped Photo 34、jquery初始化代码$(document).ready(function() /Examples of how to assign the ColorBox event to elements $(arel=example1).colorbox(); $(arel=example2).colorbox(transition:fade); $(arel=example3).colorbox(transition:none, width:75%, height:75%); $(arel=example4).colorbox(slideshow:true); $(.example5).colorbox(); $(.example6).colorbox(iframe:true, innerWidth:425, innerHeight:344); $(.example7).colorbox(width:80%, height:80%, iframe:true); $(.example8).colorbox(width:50%, inline:true, href:#inline_example1); $(.example9).colorbox( onOpen:function() alert(onOpen: colorbox is about to open); , onLoad:function() alert(onLoad: colorbox has started to load the targeted content); , onComplete:function() alert(onComplete: colorbox has displayed the loaded content); , onCleanup:function() alert(onCleanup: colorbox has begun the close process); , onClosed:function() alert(onClosed: colorbox has completely closed); ););访问http:/localhost/预览效果ColorBox的使用方法。设置的值默认值介绍transitionelasticThe transition type. Can be set to elastic, fade, or none.过渡效果，可以是elastic, fade, or none.speed350Sets the speed of the fade and elastic transitions, in milliseconds.设置过渡效果的持续时间，毫秒hreffalseThis can be used as an alternative anchor URL or to associate a URL for non-anchor elements such as images or form buttons. Example:$(h1).colorbox(href:welcome.html)这个用来设置一个锚标记的值或者一个不是锚的元素，例如图像或者表单的按钮，例如：$(h1).colorbox(href:welcome.html)titlefalseThis can be used as an anchor title alternative for ColorBox.这可以为Colorbox设置一个标题relfalseThis can be used as an anchor rel alternative for ColorBox. This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. Example:$(#example a).colorbox(rel:group1)这个可以根据元素的rel属性设置要显示的元素集合，也可以覆盖一个存在的rel属性。例如：$(#example a).colorbox(rel:group1)widthfalseSet a fixed total width. This includes borders and buttons. Example: 100%, 500px, or 500设置宽度，包括边框和按钮heightfalseSet a fixed total height. This includes borders and buttons. Example: 100%, 500px, or 500设置高度，包括边框和按钮innerWidthfalseThis is an alternative to width used to set a fixed inner width. This excludes borders and buttons. Example: 50%, 500px, or 500这个可以设定一个固定的内大小，包括边框和按钮innerHeightfalseThis is an alternative to height used to set a fixed inner height. This excludes borders and buttons. Example: 50%, 500px, or 500这个可以设定一个固定的内高度，包括边框和按钮。例如：“50%”，“500px”或者500initialWidth300Set the initial width, prior to any content being loaded.设置初始化宽度initialHeight100Set the initial height, prior to any content being loaded.设置初始化高度maxWidthfalseSet a maximum width for loaded content. Example: 100%, 500, 500px设置内容的最大宽度maxHeightfalseSet a maximum height for loaded content. Example: 100%, 500, 500px设置内容的最大高度scalePhotostrueIf true and if maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined, ColorBox will scale photos to fit within the those values.如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被设置，Colorbox会缩放图片以使用边框scrollingtrueIf false ColorBox will hide scrollbars for overflowing content. This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of ColorBox.如果是false,Colorbox不会为了溢出元素设置滚动条iframefalseIf true specifies that content should be displayed in an iFrame.如果是true，元素会在Iframe中显示inlinefalseIf true a jQuery selector can be used to display content from the current page. Example: $(#inline).colorbox(inline:true, href:#myForm);如果是true,jQuery选择器可以用来选择要显示的元素。例如：$(#inline).colorbox(inline:true, href:#myForm);htmlfalseThis allows an HTML string to be used directly instead of pulling content from another source (ajax, inline, or iframe). Example: $.fn.colorbox(html:Hello);这个是直接让你显示HTML代码，例如：$.fn.colorbox(html:Hello);photofalseIf true, this setting forces ColorBox to display a link as a photo. Use this when automatic photo detection fails (such as using a url like photo.php instead of photo.jpg, photo.jpg#1, or photo.jpg?pic=1)如果为true，ColorBox只会把元素按照图片显示，防止类似photo.php?pic=1这样的连接被误认为是网页opacity0.85The overlay opacity level. Range: 0 to 1.遮罩层不透明度 从0-1之间取值openfalseIf true, the lightbox will automatically open with no input from the visitor.如果为true,ColorBox会自动开启preloadingtrueAllows for preloading of Next and Previous content in a shared relation group (same values for the rel attribute), after the current content has finished loading. Set to false to disable.如果为True,ColorBox会自动预载要显示图片overlayClosetrueIf true, enables closing ColorBox by clicking on the background overlay.为true单击遮罩层就可以把ColorBox关闭slideshowfalseIf true, adds an automatic slideshow to a content group / gallery.为True，会自动滚动图片slideshowSpeed2500Sets the speed of the slideshow, in milliseconds.设置时间，毫秒slideshowAutotrueIf true, the slideshow will automatically start to play.为tuue，滑动会自动开始slideshowStartstart slideshowText for the slideshow start button.开始自动滑动按钮的文本slideshowStopstop slideshowText for the slideshow stop button停止自动滑动按钮的文本currentcurrent of totalText format for the content group / gallery count. current and total are detected and replaced with actual numbers while ColorBox runs.文本内容：现在正在显示的元素序号，格式现在 of 总计previouspreviousText for the previous button in a shared relation group (same values for rel attribute).“上