包简介

fancyBox offers an elegant way to present images, html content and multimedia for webpages

README 文档

README

fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages.

More information and examples: http://www.fancyapps.com/fancybox/

License: http://www.fancyapps.com/fancybox/#license

How to use

To get started, download the plugin, unzip it and copy files to your website/application directory. Load files in the section of your HTML document. Make sure you also add the jQuery library.

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
</head>

Create your links with a title if you want a title to be shown, and add a class:

<a href="large_image.jpg" class="fancybox" title="Sample title"><img src="small_image.jpg" /></a>

If you have a set of related items that you would like to group, additionally include a group name in the rel (or data-fancybox-group) attribute:

<a href="large_1.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_1.jpg" /></a>
<a href="large_2.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_2.jpg" /></a>

Initialise the script like this:

<script>
    $(document).ready(function() {
        $('.fancybox').fancybox();
    });
</script>

May also be passed an optional options object which will extend the default values. Example:

<script>
    $(document).ready(function() {
        $('.fancybox').fancybox({
            padding : 0,
            openEffect  : 'elastic'
        });
    });
</script>

Tip: Automatically group and apply fancyBox to all images:

$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();

Script uses the href attribute of the matched elements to obtain the location of the content and to figure out content type you want to display. You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc) or data-fancybox-type attribute:

//Ajax:
<a href="/example.html" class="fancybox fancybox.ajax">Example</a>
//or
<a href="/example.html" class="fancybox" data-fancybox-type="ajax">Example</a>

//Iframe:
<a href="example.html" class="fancybox fancybox.iframe">Example</a>

//Inline (will display an element with `id="example"`)
<a href="#example" class="fancybox">Example</a>

//SWF:
<a href="example.swf" class="fancybox">Example</a>

//Image:
<a href="example.jpg" class="fancybox">Example</a>

Note, ajax requests are subject to the same origin policy. If fancyBox will not be able to get content type, it will try to guess based on 'href' and will quit silently if would not succeed. (this is different from previsous versions where 'ajax' was used as default type or an error message was displayed).

Advanced

Helpers

Helpers provide a simple mechanism to extend the capabilities of fancyBox. There are two built-in helpers - 'overlay' and 'title'. You can disable them, set custom options or enable other helpers. Examples:

//Disable title helper
$(".fancybox").fancybox({
    helpers:  {
        title:  null
    }
});

//Disable overlay helper
$(".fancybox").fancybox({
    helpers:  {
        overlay : null
    }
});

//Change title position and overlay color
$(".fancybox").fancybox({
    helpers:  {
        title : {
            type : 'inside'
        },
        overlay : {
            css : {
                'background' : 'rgba(255,255,255,0.5)'
            }
        }
    }
});

//Enable thumbnail helper and set custom options
$(".fancybox").fancybox({
    helpers:  {
        thumbs : {
            width: 50,
            height: 50
        }
    }
});

API

Also available are event driven callback methods. The this keyword refers to the current or upcoming object (depends on callback method). Here is how you can change title:

$(".fancybox").fancybox({
    beforeLoad : function() {
        this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');

        /*
            "this.element" refers to current element, so you can, for example, use the "alt" attribute of the image to store the title:
            this.title = $(this.element).find('img').attr('alt');
        */
    }
});

It`s possible to open fancyBox programmatically in various ways:

//HTML content:
$.fancybox( '<div><h1>Lorem Lipsum</h1><p>Lorem lipsum</p></div>', {
    title : 'Custom Title'
});

//DOM element:
$.fancybox( $("#inline"), {
    title : 'Custom Title'
});

//Custom object:
$.fancybox({
    href: 'example.jpg',
    title : 'Custom Title'
});

//Array of objects:
$.fancybox([
    {
        href: 'example1.jpg',
        title : 'Custom Title 1'
    },
    {
        href: 'example2.jpg',
        title : 'Custom Title 2'
    }
], {
    padding: 0
});

There are several methods that allow you to interact with and manipulate fancyBox, example:

//Close fancybox:
$.fancybox.close();

There is a simply way to access wrapping elements using JS:

$.fancybox.wrap
$.fancybox.skin
$.fancybox.outer
$.fancybox.inner

You can override CSS to customize the look. For example, make navigation arrows always visible, change width and move them outside of area (use this snippet after including fancybox.css):

.fancybox-nav span {
    visibility: visible;
}

.fancybox-nav {
    width: 80px;
}

.fancybox-prev {
    left: -80px;
}

.fancybox-next {
    right: -80px;
}

In that case, you might want to increase space around box:

$(".fancybox").fancybox({
    margin : [20, 60, 20, 60]
});

Bug tracker

Have a bug? Please create an issue on GitHub at https://github.com/fancyapps/fancyBox/issues

lagman/fancybox 适用场景与选型建议

lagman/fancybox 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 6.02k 次下载、GitHub Stars 达 0，最近一次更新时间为 2014 年 06 月 01 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 lagman/fancybox 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 lagman/fancybox 我们能提供哪些服务？

定制开发 / 二次开发

基于 lagman/fancybox 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

lagman/fancybox

包简介