jquery图片弹出浏览层插件jquery.ColorBox使用教程方法及5种弹出风格

使用说明/使用教程/使用方法


1、引入jquery核心库和ColorBox脚本文件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="../colorbox/jquery.colorbox.js"></script>


2、引入ColorBox样式表文件,注意引入不同皮肤的css文件将实现不同的皮肤。

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


3、html代码,

<h2>弹性效果</h2>
<p>
  <a href="../content/ohoopee1.jpg"rel="example1" title="Me and my">GroupedPhoto1</a>
</p>
<p>
  <a href="../content/ohoopee2.jpg"rel="example1" title="On the Ohoopee">Grouped Photo 2</a>
</p>
<p>
  <a href="../content/ohoopee3.jpg"rel="example1" title="On the Ohoopee">Grouped Photo 3</a>
</p>
<h2>淡入淡出效果</h2>
<p>
  <a href="../content/ohoopee1.jpg"rel="example2" title="Me and my">Grouped Photo 1</a>
</p>
<p>
  <a href="../content/ohoopee2.jpg"rel="example2" title="On the">Grouped Photo 2</a>
</p>
<p>
  <a href="../content/ohoopee3.jpg"rel="example2" title="On the Ohoopee">Grouped Photo 3</a>
</p>
<h2>没有动画效果,高度固定(屏幕大小的75%)</h2>
<p>
  <a href="../content/ohoopee1.jpg"rel="example3" title="Me and my">Grouped Photo 1</a>
</p>
<p>
  <a href="../content/ohoopee2.jpg"rel="example3" title="On the">Grouped Photo 2</a>
</p>
<p>
  <a href="../content/ohoopee3.jpg"rel="example3" title="On the Ohoopee">Grouped Photo 3</a>
</p>
<h2>自动播放</h2>
<p>
  <a href="../content/ohoopee1.jpg"rel="example4" title="Me">Grouped Photo 1</a>
</p>
<p>
  <a href="../content/ohoopee2.jpg"rel="example4" title="On the Ohoopee">Grouped Photo 2</a>
</p>
<p>
  <a href="../content/ohoopee3.jpg"rel="example4" title="On">Grouped Photo 3</a>
</p>


4、jquery初始化代码 

$(document).ready(function() {
    //Examples of how to assign the Colorbox event to elements
    $(".group1").colorbox({
        rel: 'group1'
    });
    $(".group2").colorbox({
        rel: 'group2',
        transition: "fade"
    });
    $(".group3").colorbox({
        rel: 'group3',
        transition: "none",
        width: "75%",
        height: "75%"
    });
    $(".group4").colorbox({
        rel: 'group4',
        slideshow: true
    });
    $(".ajax").colorbox();
    $(".youtube").colorbox({
        iframe: true,
        innerWidth: 640,
        innerHeight: 390
    });
    $(".vimeo").colorbox({
        iframe: true,
        innerWidth: 500,
        innerHeight: 409
    });
    $(".iframe").colorbox({
        iframe: true,
        width: "80%",
        height: "80%"
    });
    $(".inline").colorbox({
        inline: true,
        width: "50%"
    });
    $(".callbacks").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');
        }
    });
    $('.non-retina').colorbox({
        rel: 'group5',
        transition: 'none'
    }) $('.retina').colorbox({
        rel: 'group5',
        transition: 'none',
        retinaImage: true,
        retinaUrl: true
    });
    //Example of preserving a JavaScript event for inline calls.
    $("#click").click(function() {
        $('#click').css({
            "background-color": "#f00",
            "color": "#fff",
            "cursor": "inherit"
        }).text("Open this window again and this message will still be here.");
        return false;
    });
});





如果文章对您有帮助|有启发|有共鸣|有“爽了”,请随意打赏。您的支持是我的动力和价值的体现。

----------我不是街头卖艺者,但我渴望被打赏,博客要生存下去不容易。
----------我不是酒店服务生,但我渴望被打赏,博主也有妻儿子女一家子人。
----------我不是乞丐叫花子,但我渴望被打赏,渴望被打赏的价值认同感。
----------我不是建筑搬运工,但我渴望被打赏,我是蜜蜂我阅读/挑选/整合/转载/传播。
----------我不是作家或教授,但我渴望被打赏,咱中国人也能主动为知识/为受益而付费。

感谢土豪的打赏!


一码支持:微信/支付宝

打赏qoogle的二维码


分享,也是您对我的热力支持。谢谢!

内容版权声明:除转载分类下的文章来源网络(直转或整合而成),其它皆为本站原创文章。

转载注明出处:http://qoogle.cn/?id=30

发表评论(不用注册哟!)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。