Fancybox

FancyBox提供了一种简洁优雅的方式去为图片、网页和多媒体添加灯箱功能。

fancyBox

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

Copyright (c) 2012 Janis Skarnelis - janis@fancyapps.com

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

fancyBox

FancyBox提供了一种简介优雅的方式去为图片、网页和多媒体添加灯箱功能。更多信息和例子请查看: http://www.fancyapps.com/fancybox/

许可: http://www.fancyapps.com/fancybox/#license

如何使用

首先下载插件,解压然后复制文件到你的网站/项目文件夹中。在 中加载文件。确保你已经加载了 jQuery:

<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>

创建你自己的链接,加上 fancybox 样式名,如果你想显示一个标题,那就给该链接加上一个 title 属性。

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

如果你有一组相关的图片,你得额外加上一个 rel(或 data-fancybox-group) 属性,给其赋一个组名:

<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>

用如下脚本初始化:

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

你也可以给初始化脚本加上一些可选项来扩展默认的配置,比如:

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

提示: 自动分组然后将 fancyBox 应用到所有图片上:

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

脚本用到了匹配的元素的 href 属性来取得内容的位置,以及找出你想要展示的内容类型。

你可以通过添加样式名(fancybox.image, fancybox.iframe, 等等)或者 data-fancybox-type 属性来直接指定类型:

//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>

注意,ajax 请求会受到 同源策略 的影响。如果 fancyBox 不能获得内容类型,它将会根据 href 属性值来猜测,如果不成功就会静默退出(这和以前的版本是不一样的,如果猜测不成功就会展示一个错误信息)。

进阶

Helpers

Helpers 提供了一个简单的机制来扩展 fancyBox 的功能 。有两个内置的 helpers - 'overlay' 和 'title'。你可以禁用它们,设置自定义的选项或者启用其它的 helpers,例如:

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

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

//改变 title 的位置和 overlay 的颜色
$(".fancybox").fancybox({
    helpers:  {
        title : {
            type : 'inside'
        },
        overlay : {
            css : {
                'background' : 'rgba(255,255,255,0.5)'
            }
        }
    }
});

//启用 thumbnail helper 并且设置自定义选项
$(".fancybox").fancybox({
    helpers:  {
        thumbs : {
            width: 50,
            height: 50
        }
    }
});

API

事件驱动的回调方法也是可用的。 this 关键字指的是当前或者即将到来的对象(取决于回调方法)。下面的例子是如何修改 标题:

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

        /*
            "this.element" 指的是当前的元素,所以你可以,比如用图片的 `title` 属性来存储标题
            this.title = $(this.element).find('img').attr('alt');
        */
    }
});

我们可以通过程序以多种方式来打开 fancyBox:

//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
});

有多种方式来允许我们交互和操作 fancyBox,比如:

//关闭 fancybox:
$.fancybox.close();

有一种简单的方式来用 JS 访问包装元素:

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

你可以通过覆写 CSS 来自定义 fancyBox 的外观。比如,让导航箭头一直显示,改变其宽度,将它们移出区域(在引用了 fancybox.css 之后引入下面的代码)

.fancybox-nav span {
    visibility: visible;
}

.fancybox-nav {
    width: 80px;
}

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

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

在这种情况下,你或许想要增加 fancybox 周围的空白区:

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

Bug 跟踪器

有 bug?请在 GitHub 上创建一个 https://github.com/fancyapps/fancyBox/issues

讨论区