zoukankan      html  css  js  c++  java
  • query插件(三):Colorbox–内容播放插件

    原文网址:http://ifxoxo.com/jquery-colorbox.html

    一、colorbox介绍

    jQuery Colorbox是一款非常好的内容播放插件。
    它集弹出层、幻灯片播放功能于一身,不仅于此,它还支持其它的内容格式:例如html, flash, iframe等,这些内容的显示方式都是Ajax的。
    更难能可贵的是,在压缩后它只有10K的大小,使用这款插件不会给你的网页带来过多的负担,而且还能实现很棒的视觉效果,为用户体验增色不少。
    而且可以更加自己的喜好,修改colorbox弹出框的样式,非常灵活。

    本文已经同步至我的个人博客站点:
    jquery插件(三):Colorbox–内容播放插件(http://ifxoxo.com/jquery-colorbox.html)

    如果想要看实例,可以到以下网址查看:
    520小美女(http://520xmn.com)

    colorbox的示例截图如下:

    colorbox的截图--ifxoxo.com

    colorbox的截图–ifxoxo.com

     

    Colorbox项目的主页地址是:http://www.jacklmoore.com/colorbox 
    项目主页中提供了5种不同样式的Example:

    样式 1:http://www.jacklmoore.com/colorbox/example1/
    样式 2:http://www.jacklmoore.com/colorbox/example2/
    样式 3:http://www.jacklmoore.com/colorbox/example3/
    样式 4:http://www.jacklmoore.com/colorbox/example4/
    样式 5:http://www.jacklmoore.com/colorbox/example5/

    每一个 样式 中都提供了以下效果:

    • Elastic Transition(弹性动画)
    • Fade Transition(淡入淡出动画)
    • No transition + fixed width and height 75% of screen size (无动画,宽高以屏幕的75%自适应)
    • Slideshow(幻灯片播放)
    • Other Content Types (其它类型:外部html, flash和视频,iframe的flash和视频,iframe的外部html,内部html)

    二、具体用法

    1、需要的js

    (1)jquery

    既然是jquery插件,肯定是需要先加载jquery的,可以到jquery官网去下载最新的jquery:http://jquery.com/

    (2)colorbox

    http://www.jacklmoore.com/colorbox 去下载最新的 color box插件,
    在里面找到一个 jquery.colorbox-min.js

    如:

    //加载的时候注意文件的路径
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.colorbox-min.js"></script>

    2、需要的css

    color-box 的弹出框的样式是需要定义的,你可以先查看官网的Example 1-5, 选择一个自己比较喜欢的样式,到下载下来中去寻找相应的example文件夹,找到coloxbox.css。
    比如个人喜欢example 5, 那么就加载example5文件夹中的的css

    <link media="screen" rel="stylesheet" href="example5/colorbox.css" />

    3、需要的html

    把你需要用color box这种幻灯片方式加载的内容统一用一个class或者,方面后面提取。如

     <p><a class="colorbox1"  href="../content/ohoopee1.jpg" >Grouped Photo 1</a></p>
     <p><a class="colorbox1" href="../content/ohoopee2.jpg" >Grouped Photo 2</a></p>
     <p><a class="colorbox1" href="../content/ohoopee3.jpg">Grouped Photo 3</a></p>
    //这里只是显示了图片,如果你需要加载整个页面,把href替换成相应的页面地址就行

    4、调用color box

    <script>
        $(document).ready(function(){
            //元素调用Colorbox的示例
            $(".colorbox1").colorbox({ rel: 'group1' });
        });
    </script>

    5、color box的其他参数说明

    color box 的参数很多,分成几个部分

    (1)基础参数

     参数  默认值  作用
      transition   “elastic”  弹出窗口的方式,支持”elastic”, “fade”, “none”.
     speed   350  弹出窗口的速度,单位是ms
    href false 动态指定加载的href
    title false 动态指定链接的title
    rel false 分组功能,分组之后可以通过上一页,下一页查看同一个分组的其他内容。指定了相同ref的元素将分为一组
    如:rel:”group1
    scalePhotos true 如果为true,而且定义maxWidth, maxHeight, innerWidth, innerHeight, width, height
    那么会去自动去适配
    scrolling true 如果为false,那么即使内容超出了弹出框,也会隐藏滚动条
    opacity 0.85 弹出框的不透明度,取值范围:0-1
    open false 如果为true,弹出框会立即自动打开
    returnFocus true 如果为true, 当关闭弹出框之后,会继续focus原来的元素
    preloading true 如果为true, 那么在加载当前弹出框的内容之后,会偷偷先加载pre和next的内容
    overlayClose true 如果为true, 那么点击弹出框之外的内容时,自动关闭弹出框
    escKey true 如果为true, 那么按esc键之后,自动关闭弹出框
    arrowKey true 如果为true, 那么允许按下 ← → 去展示 pre和next的内容
    loop true 如果为true, 那么当最后一页时,点击next会循环到第一页
    data false 在ajax加载页面时,post 或者 get 过去的数据
    fadeOut 300 关闭弹出框的速度,单位是ms
    closeButton true 如果为false, 将会隐藏 关闭 按钮

    (2)尺寸相关

     参数  默认值  作用
      width   false  设置弹出框的宽度,包括弹出框的borders 和 button
      height   false  设置弹出框的高度带,包括弹出框的borders 和 button
      innerWidth   false  设置弹出框的内部的宽度,(不包括弹出框的borders 和 button)
      innerHeight   false  设置弹出框的内部的高度,(不包括弹出框的borders 和 button)
      initialWidth   300  在内容还没展示时,弹出框默认的宽度
      initialHeight   100  在内容还没展示时,弹出框默认的高度
      maxWidth   false  设置一个加载内容的最大宽度。例如:“100%”,500,“500px”
      maxHeight   false  设置一个加载内容的最大高度。例如:“100%”,500,“500px”<

    (3)位置相关

     参数  默认值  作用
      fixed   false  如果为true,弹出框 将 显示在一个固定的位置
      top   false  设置弹出框的top属性
      bottom   false  设置弹出框的bottom属性
      left   false  设置弹出框的left属性
      right   false  设置弹出框的right属性
      reposition   true  重新加载color box的属性当触发了window的resize事件

    (4)加载内容的type

     参数  默认值  作用
      iframe   false  如果为true,加载的内容将以iframe的方式呈现
      inline   false  ;如果为true,将从本页面提取 content, href指定元素的selector
    $(“#inline”).colorbox({inline:true, href:”#myForm”});
      html   false  将加载这里指定的html内容
    $.colorbox({html:” <p>Hello </p>”});
      photo   false  如果为true,将会以photo的方式加载内容
    当照片自动检测失败时才需要使用这个参数,(如href是”photo.php”而不是”photo.jpg”,自动检测就会失败)
      ajax    —blog主也没翻译过来,自行脑补吧—

    (5)一些callback函数定义

     参数  默认值  作用
      onOpen   false  当弹出框要即将要open的时候触发
      onLoad   false  当弹出框在load内容的时候触发
      onComplete   false  当弹出内容加载完毕的时候触发
      onCleanup   false  当弹出框要即将要close的时候触发
      onClosed   false  当弹出框close之后的时候触发

    可以用以下代码尝试一些加载的事件

    $(".callbacks").colorbox({
      onOpen:function(){ alert('onOpen: --ifxoxo.com'); },
      onLoad:function(){ alert('onLoad:  --ifxoxo.com'); },
      onComplete:function(){ alert('onComplete: --ifxoxo.com'); },
      onCleanup:function(){ alert('onCleanup:  --ifxoxo.com'); },
      onClosed:function(){ alert('onClosed:  --ifxoxo.com'); }
    });

    还有其他 Slideshow 和 Retina Images的参数,具体查看官网。

    6、color box的方法

     参数  作用
      next()  翻开Next的内容
      prev()  翻开prev的内容
      close()  关闭弹出框
      element()  获取当前的html element
      resize()  重新加载弹出框的长宽高
      remove()  去掉当前元素的colorbox事件

    p.s
    本文已经同步至我的个人博客站点:
    jquery插件(三):Colorbox–内容播放插件(http://ifxoxo.com/jquery-colorbox.html)

    如果想要看实例,可以到以下网址查看:
    http://520xmn.com

  • 相关阅读:
    leetcode Remove Linked List Elements
    leetcode Word Pattern
    leetcode Isomorphic Strings
    leetcode Valid Parentheses
    leetcode Remove Nth Node From End of List
    leetcode Contains Duplicate II
    leetcode Rectangle Area
    leetcode Length of Last Word
    leetcode Valid Sudoku
    leetcode Reverse Bits
  • 原文地址:https://www.cnblogs.com/Cprogrammer/p/3558652.html
Copyright © 2011-2022 走看看