FancyBox

website:http://fancyapps.com/fancybox/

该控件针对图片效果非常好。

1. 所需的js文件

<!DOCTYPE html>
<html>
<head>
    <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- Add jQuery library -->
    <script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>

    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />

    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

2. Simple image gallery.

Uses default settings

<script type="text/javascript">
        $(document).ready(function() {
            /*
             *  Simple image gallery. Uses default settings
             */

            $(‘.fancybox‘).fancybox();

html source code:

<h3>Simple image gallery</h3>
    <p>
        <a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" alt="" /></a>

        <a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" /></a>

        <a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" /></a>

        <a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" /></a>
    </p>

效果如下:

3.Different effects

fancybox:

$(".fancybox-effects-a").fancybox({
                helpers: {
                    title : {
                        type : ‘outside‘
                    },
                    overlay : {
                        speedOut : 0
                    }
                }
            });

            // Disable opening and closing animations, change title type
            $(".fancybox-effects-b").fancybox({
                openEffect  : ‘none‘,
                closeEffect    : ‘none‘,

                helpers : {
                    title : {
                        type : ‘over‘
                    }
                }
            });

            // Set custom style, close if clicked, change title type and overlay color
            $(".fancybox-effects-c").fancybox({
                wrapCSS    : ‘fancybox-custom‘,
                closeClick : true,

                openEffect : ‘none‘,

                helpers : {
                    title : {
                        type : ‘inside‘
                    },
                    overlay : {
                        css : {
                            ‘background‘ : ‘rgba(238,238,238,0.85)‘
                        }
                    }
                }
            });

            // Remove padding, set opening and closing animations, close if clicked and disable overlay
            $(".fancybox-effects-d").fancybox({
                padding: 0,

                openEffect : ‘elastic‘,
                openSpeed  : 150,

                closeEffect : ‘elastic‘,
                closeSpeed  : 150,

                closeClick : true,

                helpers : {
                    overlay : null
                }
            });

html source code:

<h3>Different effects</h3>
    <p>
        <a class="fancybox-effects-a" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>

        <a class="fancybox-effects-b" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>

        <a class="fancybox-effects-c" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>

        <a class="fancybox-effects-d" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="5_s.jpg" alt="" /></a>
    </p>

3.1 效果a

3.2 效果b

3.3 效果c

3.4 效果d

4. button helper

fancybox:

$(‘.fancybox-buttons‘).fancybox({
                openEffect  : ‘none‘,
                closeEffect : ‘none‘,

                prevEffect : ‘none‘,
                nextEffect : ‘none‘,

                closeBtn  : false,

                helpers : {
                    title : {
                        type : ‘inside‘
                    },
                    buttons    : {}
                },

                afterLoad : function() {
                    this.title = ‘Image ‘ + (this.index + 1) + ‘ of ‘ + this.group.length + (this.title ? ‘ - ‘ + this.title : ‘‘);
                }
            });

html source code:

<h3>Button helper</h3>
    <p>
        <a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>

        <a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>

        <a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>

        <a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
    </p>

效果

5.Thumbnail helper

fancybox:

$(‘.fancybox-thumbs‘).fancybox({
                prevEffect : ‘none‘,
                nextEffect : ‘none‘,

                closeBtn  : false,
                arrows    : false,
                nextClick : true,

                helpers : {
                    thumbs : {
                        width  : 50,
                        height : 50
                    }
                }
            });

html source code:

<h3>Thumbnail helper</h3>
    <p>
        <a class="fancybox-thumbs" data-fancybox-group="thumb" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs" data-fancybox-group="thumb" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs" data-fancybox-group="thumb" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs" data-fancybox-group="thumb" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
    </p>

效果:

通过cancel按钮来取消显示。

时间: 2024-09-28 11:42:24

FancyBox的相关文章

fancybox关闭弹出窗口parent.$.fancybox.close();

fancybox弹出窗口右上角会自带一个关闭窗口,并且点击遮罩层也会关闭fancybox 有时我们不需要这样进行关闭,隐藏关闭窗口,并且遮罩层不可点击 在弹出窗口页面加一链接进行关闭使用parent.$.fancybox.close();可进行对其关闭 以下为弹出页面的代码: function myclose(){ parent.$.fancybox.close(); } <a href="javascript:myclose();">关闭</a> 需要注意的一

非常简单的使用jquery fancybox插件实现的查看图片效果

<html> 其中用到了bootstrap的图片处理,响应式图片属性img-responsive,和图片形状,img-thumbnail 写成 class="img-responsive img-thumbnail" 然后fancybox直接用默认 $("a.grouped_elements").fancybox();    $()这里的是选择器. <head> <title> </title> <meta ht

jQuery Fancybox插件介绍

下面介绍一款jquery图片播放插件叫Fancybox,项目主页地址:http://fancybox.net/ Fancybox的特点如下: 1.可以支持图片.html文本.flash动画.iframe以及ajax的支持 2.可以自定义播放器的CSS样式 3.可以以组的形式进行播放,导航的按钮(上一项,下一项) 4.如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片 5.Fancybox播放器支持投影,更有立体的感觉 Fancyb

JQuery FancyBox

Demo effect(image gallery): Sample code: <link href="~/Content/jquery.fancybox.css" rel="stylesheet" /> <p> <h2>First test(Image gallery)</h2> <a class="fancybox1" rel="group" href="h

mark---[jQuery Fancybox插件使用参数详解]

天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. 今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fancybox.net/ Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CS

图片预览插件 fancyBox

今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox. 它除了能够展示图片之外,还能够展示 flash.iframe 内容.html 文本以及 ajax 调用.我们能够通过 css 来自己定义外观. 原文与源代码来自:http://tqcto.com/article/web/53337.html 中文文档网址:点击打开链接 Demo下载地址:点击打开链接 效果图 fancybox 特点: 能够支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持:

jQuery Fancybox插件使用参数详解

我是一个搬运工 本文转自http://www.weste.net/2013/4-22/90629.html 先给上Fancybox的项目主页地址:http://fancybox.net/, Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片 Fancybox播放器支持投影,

jQuery.fancybox 学习笔记

设置堆叠顺序(z-index) 用bootstrap+jquery开发前端,需要给弹出的模态框中的图片,增加单击图片,可以对图片进行放大预览的功能,如果仅仅绑定了fancybox()函数,如: $("a.fancybox").fancybox(); 而没有配置z-index的值,可能出现弹出层在模态框的后面的情况,如: 解决方案: 配置fancybox的覆盖层(overlay)的堆叠顺序(z-index),大约为12500 最终实现代码如下: $("a.fancybox&qu

fancybox关闭弹出窗体parent.$.fancybox.close();

fancybox弹出窗体右上角会自带一个关闭窗体,而且点击遮罩层也会关闭fancybox 有时我们不须要这样进行关闭,隐藏关闭窗体,而且遮罩层不可点击 在弹出窗体页面加一链接进行关闭使用parent.$.fancybox.close();可进行对其关闭 下面为弹出页面的代码: function myclose(){ parent.$.fancybox.close(); } <a href="javascript:myclose();">关闭</a> 须要注意的一

jQuery fancybox ie 无法显示关闭按钮

如果版本是: 1.3.1 IE无法显示关闭按钮 如果版本是: 1.3.4 IE6无法显示关闭按钮 解决办法: Version: 1.3.1 打开fancybox.css 注释掉此行: .fancybox-ie #fancybox-close { background: transparent; filter: progid : DXImageTransform.Microsoft.AlphaImageLoader ( src = 'images/fancy_close.png', sizingM